React系列学习笔记:1.React与webpack基本配置

前端之家收集整理的这篇文章主要介绍了React系列学习笔记:1.React与webpack基本配置前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

http://www.jianshu.com/p/eb2da4fe7f5b

字数625阅读472评论0

前言

webpack和react搭配开发非常棒可以说是最佳的搭档了,包在安装过程中开发用的使用npm install --save-dev <name>安装,生产环境需要的包用npm install --save <name>安装,国内由于网络环境建设使用淘宝的镜像源cnpm,本节使用的包列表:

  • babel一系列编译转换工具:
    babel-core babel-cli babel-loader babel-preset-es2015 babel-preset-react
  • React库:react react-dom

目录结构

  1. |-React-redux-example
  2. |-node_modules/ #包文件
  3. |-public/ #静态目录
  4. |-assets/ #静态资源生成目录
  5. |-index.html
  6. |-src/ #开发目录
  7. |-app.js #client入口文件
  8. |-config/ #配置目录
  9. |-webpack.dev.js #webpack开发配置文件
  10. |-package.json
  11. |-README.md
  12. |-.gitignore #git的忽略列表

config/webpack.dev.js

  1. var path = require('path') //配置文件是放在config的目录下的,所有这里定义了一个项目的根目录变量 var projectRootPath = path.resolve(__dirname,'..') var config = { entry: path.resolve(projectRootPath,152);">'src/app.js'),output:{ path: path.resolve(projectRootPath,152);">'public',152);">'assets'),filename: 'bundle.js',publicPath: '/assets/' },module:{ loaders:[ { test:/\.js$/,exclude:/node_modules/,loader:'babel-loader',query:{ presets:['react',152);">'es2015'] } } ] } } module.exports=config;module.exports=config;

entry:要打包文件
output:打包文件位置
module:打包要加载的模块--presets用来解析ES6,React,ES7语法
publicPath:指定公共URL地址在浏览器输出文件的引用

package.json

scripts添加webpack的编译命令,由于我的webpack配置文件,放在config目录中,所以在编译时要指定--config ./config/webpack.dev.js

  1. "scripts": {
  2. "build": "webpack --verbose --color --display-error-details --config ./config/webpack.dev.js "
  3. }

src/app.js

这里我们用最少的代码测试一下我们的webpack配置有没有问题

  1. import React from 'react' import ReactDOM 'react-dom' ReactDOM.render(<h1>Hello</h1>,document.getElementById('app'))'app'))

public/index.html

因为没有启动web服务器,所以<script src="./assets/bundle.js"></script>用的是文件的相对地址

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <Meta charset="UTF-8">
  5. <title>React-redux-example</title>
  6. </head>
  7. <body>
  8. <div id="app"></div>
  9. </body>
  10. <script src="./assets/bundle.js"></script>
  11. </html>

build

完成上面所有步骤后,npm run build会看到在public/assets/目录中生成了一个bundle.js文件,在浏览器中打开index.html看到Hello,我们的webpack基本配置就完成了,如图


NEXT

webpack与express开发服务器的配置,hotreplace(热替换)的配置

猜你在找的React相关文章