入口：
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
})
网友评论