webpack是一个打包web项目的工具 ，可以实现css，js，less，cass，html的混淆加密，minify，结合webpack-dev-server热部署，非常方便前端页面和Nodejs的开发。

 

webpack

安装方法

npm install webpack --save-dev 

npm install webpack-dev-server --save-dev

 

执行webpack需要在项目目录有一个配置文件 webpack.config.js 。 

var webpack = require('webpack');module.exports = {    entry:{        index:'./src/index.js',        vendor: [          'react',          'react-dom', 'react-redux' ]}, output:{ path:'./bin', filename:'app.bundle.js', publicPath:'/bin' }, module:{ loaders:[{ test:/\.js$/, exclude:/node_modules/, loader:'babel', query: { presets: ['es2015', 'stage-0', 'react'] } }] }, plugins: [ new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js") ] }

 

上面的 entry 表示入口文件，webpack会自动关联出此js文件引用的其他js文件。可以设置为一个数组，表示多个入口。

自己写的代码打包存放的位置在output中指定了相对路径./bin/app.bundle.js。

vendor 指出其中使用的第三方js，

便于下方plugins使用CommonsChunkPlugin把自己编写的代码和第三方代码分开，此插件构造函数中指定了是哪个vendor，以及处理后的保存位置。

 

modules 中的配置的loaders用于执行顺序从右到左，类似管道依次处理test参数匹配到的js文件、css文件。

 

webpack好用的的参数 

-p 或者 --optimize-minimize 实现去空格压缩

-d 生成js.map文件，便于对应源码位置 

-- hot  启用热部署，不用刷新网页

--watch 观察文件变化自动重新webpack ，启动webpack-dev-server时不使用这个参数也可以自动触发webpack