案例代码以"webpack": "3.10.0","uglifyjs-webpack-plugin": "^1.3.0",为主
1.UglifyJsPlugin
webpack内置UglifyJsPlugin,压缩和混淆代码
new UglifyJsPlugin({ parallel: 4, uglifyOptions: { output: { comments: false, beautify: false, }, compress: { warnings: false }, }, cache: true, }), //压缩代码
2.CommonsChunkPlugin
webpack内置CommonsChunkPlugin,提高打包效率,将第三方库和业务代码分开打包。
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: "js/vendor.js", children: true, minChunks: Infinity, }),
3.ProvidePlugin
ProvidePlugin:自动加载模块,代替require和import
new webpack.ProvidePlugin({ //自动加载模块 '$': "jquery", 'jQuery': "jquery", 'window.jQuery': "jquery", 'window.$': 'jquery' }),
4.html-webpack-plugin
html-webpack-plugin可以根据模板自动生成html代码,并自动引用css和js文件
new HtmlWebpackPlugin({ template: 'src/index.html', }),
5.extract-text-webpack-plugin
extract-text-webpack-plugin 将js文件中引用的样式单独抽离成css文件,防止将样式打包在js中引起页面样式加载错乱的现象
new ExtractTextPlugin({ filename:"css/index.css", allChunks:false, }),
6.DefinePlugin
DefinePlugin 编译时配置全局变量,这对开发模式和发布模式的构建允许不同的行为非常有用。
7.HotModuleReplacementPlugin
HotModuleReplacementPlugin 热更新
8.optimize-css-assets-webpack-plugin
optimize-css-assets-webpack-plugin 不同组件中重复的css可以快速去重
9.compression-webpack-plugin
compression-webpack-plugin 生产环境可采用gzip压缩JS和CSS
new CompressionPlugin({ //打包文件为giz格式 filename: '[path].gz[query]', //目标资源名称。[file] 会被替换成原资源。[path] 会被替换成原资源路径,[query] 替换成原查询字符串 algorithm: 'gzip',//算法 test: new RegExp('\.(js|css)$'), threshold: 10240,//只处理比这个值大的资源。按字节计算 minRatio: 0.8//只有压缩率比这个值小的资源才会被处理 })
10.happypack
happypack:通过多进程模型,来加速代码构建
11.CleanWebpackPlugin
重构之前删除dist文件,除dist/img文件
new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns:['**/*', '!img', '!img/**'] }),