webpack-dev-server轻量级js高速打包、热部署服务器

56gt

　　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