To v4 from v2
升级过程
- webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
内置插件，压缩js。
需要安装：npm install uglifyjs-webpack-plugin --save-dev
安装后："uglifyjs-webpack-plugin": "^2.2.0"
......
const UglifyJsPlugin=require('uglifyjs-webpack-plugin');
// 清空基本配置的插件列表
webpackBaseConfig.plugins=[];
module.exports=merge(webpackBaseConfig,{
output:{
publicPath:'/dist/',
// 将入口文件重命名为带有20位hash值得唯一文件
filename:'[name].[hash].js'
},
plugins:[
......
],
optimization:{
minimizer:[
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false
},
compress: {
warnings: false,
drop_debugger: true,
drop_console: true
}
}
})
]
}
});
3.extract-text-webpack-plugin 用 mini-css-extract-plugin 替代loader, 原：分离文件，分离CSS到指定文件
- webpack.optimize.CommonsChunkPlugin
optimization: {
minimize: true,
splitChunks: {
cacheGroups: {
vendors: {
name: 'vendor',
test: /[\\/]node_modules[\\/]/,
priority: -10
}
}
}
}
5.压缩图片：image-webpack-loader imagemin-webpack-plugin
安装版本：images-webpack-loader@6.0.0
6.文件分割，多入口
7.webpack-bundle-analyzer 打包分析
8.copy-webpack-plugin 升级到 6.0.2
Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
- 新功能——用import做动态加载
/* webpackChunkName: "h-w1" */
是webpack4中提供的注解，给切割模块命名，如果不要这个注解的话切割出来的模块js不能分辨是那个业务模块的，所以一般都是一个业务模块共用一个名称。
问题：
image.png
不支持import
image.png
老版本： "file-loader": "^0.11.2",
尝试新版本："file-loader": "^6.0.0" ——解决
image.png
待解决
image.png
老版本："expose-loader": "^0.7.3",
第一次：尝试升级版本 :
"expose-loader": "^0.7.5", ——失败
第二次：
expose-loader 为了解决一些插件不支持commonJs引入的问题（如:bootstrap.js，它只允许jQuery暴露为全局变量才可用）
20200628——Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
——————————
webpack打包环境优化的一个点：将css样式代码抽离出来。
若不抽离，可以在bundle.js中发现css代码被转化成节点样式插入到了body下；这个过程是：style-loader将外部css文件注入到html中，css内容使用css-loader进行解析，转化成js文件；因为webpack只能识别js文件。
css分离：
使用extract-text-webpack-plugin插件，该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象。
优点
非js文件单独打包，通过js将文件写入，可以用来单独做浏览器缓存。
目前工程中大部分用到的还是webpack3+；实际中，在不指定版本的情况下，npm默认安装的4.0.0版本，这时使用上述插件会报错：
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
原因：
extract-text-webpack-plugin还不能支持webpack4.0.0以上的版本。
解决办法：
npm install –save-dev extract-text-webpack-plugin@next
会下载到+ extract-text-webpack-plugin@4.0.0-beta.0
然后在打包就正常了
image.png
image.png
官网建议：mini-css-extract-plugin
image.png
webpack 打包后页面加载icon-font显示为小方块
小方块
正确的iconfont
编译后引用路径出错：
@font-face {
font-family: 'hui-font';
src: url(data:application/vnd.ms-fontobject;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiaHVpLWZvbnQtZTU5OGQuZW90Ijs=);
src: url(data:application/vnd.ms-fontobject;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiaHVpLWZvbnQtZTU5OGQuZW90Ijs=#iefix) format("embedded-opentype"), url(data:application/font-woff;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiaHVpLWZvbnQtYmZiNTUud29mZiI7) format("woff"), url(data:application/x-font-ttf;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiaHVpLWZvbnQtMTNkYTkudHRmIjs=) format("truetype"), url(https://localhost:8888/hui-font-5852f.svg#hui-font) format("svg");
font-weight: normal;
font-style: normal; }
正确的引用路径
@font-face {
font-family:hui-font;
src:url(../_/common/font/hui-font-dd14a.eot);
src:url(../_/common/font/hui-font-dd14a.eot#iefix) format("embedded-opentype"), url(../_/common/font/hui-font-a7c55.woff) format("woff"), url(../_/common/font/hui-font-1241d.ttf) format("truetype"), url(../_/common/font/hui-font-a7d45.svg#hui-font) format("svg");
font-weight:400;
font-style:normal
}
参考
https://webpack.js.org/migrate/4/
https://v4.webpack.js.org/concepts/
https://blog.csdn.net/lizhi1030/article/details/107062799/
https://segmentfault.com/q/1010000011319530
