webpack个人总结

入口：

entry: {

page1: "./page1",

page2:["./entry1","./entry2"]

}

把前面的二个使用方法结合使用。对象的key是作为打包成的文件的名称，所以有多少个key，就代表打包成多少个文件。

出口：

output: {

path: path: path.join(__dirname,'/public/dist'),

filename: 'static/js/[name].[chunkhash:8].js',

publicPath: publicPath

}

path：打包后的js文件存放地址。

filename：文件名称；如果前面有/开始的，webpack自动帮你生成目录；[name]就是entry中的key，[chunkhash:8]自动帮你加上hash。

publicPath：在你网站运行时候可能你访问的资源地址（image，url等）可能不是你打包的目录（path）,publicPath就是在path前加上一段；可以是目录，也可以是CDN地址

插件CommonsChunkPlugin

一般会把jQuery、react、angular等框架或者库打包成一个文件，因为不会经常更改，可以长时间的缓存在用户的浏览器上。

插件ExtractTextPlugin

webpack把css也当成模块，在js中可以import css文件，所以html中不需要手动去加css，当这个js加载时候，会帮你把css包裹在style标签中插入页面。但是这个使用场景也是极少的，你还是需要把css生成文件的。

webpack-dev-server

一个npm的包，需要安装。

开发时候你需要运行你的应用，就需要一个server，webpack-dev-server其实就是封装了express的一个server，里面又使用了一个中间件webpack-dev-middleware来把webpack编译的文件放在内存中，请求资源时候都是从内存中取，编译过程也是在内存中运行，所以速度非常快。

热替换react-hot不刷新浏览器

常用Plugins介绍

代码热替换,HotModuleReplacementPlugin

生成html文件，HtmlWebpackPlugin

将css成生文件，而非内联，ExtractTextPlugin

报错但不退出webpack进程，NoErrorsPlugin

代码丑化，UglifyJsPlugin，开发过程中不建议打开

多个html共用一个js文件(chunk)，可用CommonsChunkPlugin

清理文件夹，Clean

调用模块的别名ProvidePlugin，例如想在js中用$，如果通过webpack加载，需要将$与jQuery对应起来

压缩：http://www.qingpingshan.com/jb/javascript/175812.html

newwebpack.DefinePlugin({ // <--减少React大小的关键

'process.env': {

'NODE_ENV': JSON.stringify('production')

}

}),

newwebpack.optimize.DedupePlugin(),//删除类似的重复代码

newwebpack.optimize.UglifyJsPlugin(),//最小化一切

newwebpack.optimize.AggressiveMergingPlugin()//合并块

//在生产环境服务端gzip压缩文件

newCompressionPlugin({

asset: "[path].gz[query]",

algorithm: "gzip",

test: /\.js$|\.css$|\.html$/,

threshold: 10240,

minRatio: 0.8

})