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

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