webpack + es6 + react 环境搭建

需要的依赖包:

• 打包工具 webpack

• 转码工具 babel

  • babel-core

  • babel-loader

  • babel所需的系列转码器和loader

    • es6: babel-preset-es2015 babel-preset-stage-N(支持es7等未定es标准)

    • react: babel-preset-react

    • css sass套装: css-loader style-loader node-sass sass-loader

webpack的配置

webpack.config.js

var path = require('path');
module.exports = {

entry:'./src/pages/demo.js',output:{

path:path.join(__dirname,'/dist'),filename:'bundle.js'

},resolve:{

extensions:['','.js','.jsx']   //指定可以被 import 的文件后缀

},module:{

loaders:[

{

test: /.js|jsx$/,exclude: /node_modules/,loaders: ['babel?presets[]=react,presets[]=es2015,presets[]=stage-1']  //注意这里设置js loader的方式

},{

test: /.css|scss|sass$/,loaders: ['style','css',"sass"]

}

]

}

};

webpack-dev-server

"scripts": {
  "build": "webpack -b","dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base dist"
}

需要在content-base指定的路径下有index.html文件， 然后npm run dev后，访问本地:8080端口就能访问index.html文件，其中加载了打包的bundle.js脚本，脚本文件是加载在内存中的，目录中看不到

浏览器自动刷新

在上一步骤中，更改代码后webpack会自动打包，但是在浏览器需要手动刷新才能加载新打包的脚本。想让浏览器自动刷新,修改webpack.config.js：

entry:[
     'webpack/hot/dev-server','webpack-dev-server/client?http://localhost:8080','./src/pages/demo.js'
]

（要求webpack-dev-server在项目中有安装，全局的不行）

hot-loader

上诉的浏览器自动刷新，只是代替了手动刷新的步骤，和手动刷新页面没有区别。如果希望代码更改后只会刷新受影响的地方，而不去整体刷新，不重置页面已有的state,就可以使用hot-loader。