2021-07-01

一、
webpack3升4
webpack4 以后webpack-dev-server 要改成webpack server
https://blog.csdn.net/SilenceJude/article/details/103080559
如下11步
1、安装 webpack-cli ，升级webpack
2、升级webpack-dev-server至3.9.0
3、升级html-webpack-plugin
4、升级vue-loader
5、增加VueLoaderPlugin插件代码
6、升级一下 eslint 和 eslint-loader。
7、设置mode
8、配置performance。
9、安装babel-plugin插件转换es6代码。
10、配置optimization.splitChunks，删除optimize.CommonsChunkPlugin
11、去除extract-text-webpack-plugin，安装 mini-css-extract-plugin

Bug难点
（1）去除extract-text-webpack-plugin，安装 mini-css-extract-plugin遇到的问题
new MiniCssExtractPlugin({
filename: utils.assetsPath(‘css/[name].[contenthash].css’),
ignoreOrder: true,）}
解决： //allChunk换成ignoreOrder
（2）Performance爆黄解决
在congfig里moduleexport添加如下：
//关闭 webpack 的性能提示
performance: {
hints:false
},
(3)问题：Tapable.plugin is deprecated. Use new API on .hooks instead
解决：
const webpackConfig = merge(baseWebpackConfig, {
//关闭 webpack 的性能提示
performance: {
hints: false
},
mode: “production”,
module: {
rules: utils.styleLoaders(
// 增加代碼，解決爆全黃
[“style-loader”, “css-loader”, “postcss-loader”, “sass-loader”],
{
//
sourceMap: config.build.productionSourceMap,
extract: true,
usePostCSS: true
}
)
},

(4)问题：
ERROR in static/js/12.a6d50c80ea7c1c1592c1.js from UglifyJs
warnings is not a supported option
解决：注释或删除UglifyJs的有关配置（但是他是压缩插件），多线程压缩插件的是webpack-parallel-uglify-plugin
或者在new UglifyJsPlugin({
uglifyOptions: {
// compress: {
warnings: false,
drop_debugger: true,
drop_console: true
// }
},里注释// compress: {}因为它跟warnings: false,
同级

（5）问题：
copy-webpack-plugin报错，它的4版本升到9版本引起
注释或删除node_modules里的copy-webpack-plugin/dist/index.js有关内容
并且：new CopyWebpackPlugin(
{
patterns: [
{ from: “source”, to: “dest” },
{ from: “other”, to: “public” }
],
options: {
concurrency: 100
}
}
// [
// {
// from: path.resolve(__dirname, “…/static”),
// to: config.dev.assetsSubDirectory,
// ignore: [".*"]
// }
// ]
)
]
});

（6）resolve(“static”), //UglifyJs不支持ES6的问题 webpack.base.conf.js下找到/.js$/，include参数加上一条resolve(‘static’)
（7）问题：element-ui不带星号的表单校验

解决：/deep/ .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before { content: ’ '; width: 0px; margin-right: 0px; }
项目bug
（1）问题：用Dialog组件，当对话框弹出时，被一层阴影遮盖。
解决：标签中添加append-to-body后阴影就消失
（2）回填数据bug（袁建楠 2021/6/8 17:00:34
他在created默认执行了重置表单，然后把回填改成了同步

第二次执行的时候回填事件在created周期之前执行了）
解决：this.loadings=false
this.$eventBus.$emit(“getFormInfo”, this.loadings);

this.$eventBus.$on(‘getFormInfo’, value => {
// console.log(value);
if(value===false){
this.$nextTick(()=>this.$refs.tyFormDialog.echoData(item, false));
}
});

二、Vue+webpack3升4过程
1.
（1）npm i --save-dev webpack webpack-cli
（2）npm i --save-dev webpack@4.41.2
2.npm i webpack-dev-server@3.9.0 --save-dev
Error: Cannot find module ‘webpack/bin/config-yargs’
3.npm i html-webpack-plugin@3.2.0 -D
compilation.mainTemplate.applyPluginsWaterfall is not a function
4.npm i vue-loader@15.7.2 -D
Module build failed (from ./node_modules/vue-loader/index.js):
TypeError: Cannot read property ‘vue’ of undefined
5.安装完毕之后，再次执行npm run dev，发现之前的报错消失了。但是又有新的错误提示：
6.vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
7.File was processed with these loaders:
8.* ./node_modules/vue-loader/lib/index.js
9.You may need an additional loader to handle the result of these loaders.
10.————————————————
//webpack.dev.conf.js
…
// 引入
const { VueLoaderPlugin } = require(‘vue-loader’)
…
// 找到plugins数组，增加一个数组项
plugins: [
…
new VueLoaderPlugin()
]

// webpack.prod.conf.js
…
// 引入
const { VueLoaderPlugin } = require(‘vue-loader’)
…
// 找到plugins数组，增加一个数组项
plugins: [
…
new VueLoaderPlugin()
]

6.npm i --save-dev eslint-loader@latest eslint@latest
cannot read property ‘eslint’ of undefind!
7.// webpack.dev.conf.js
const webpackConfig = merge(baseWebpackConfig, {
mode: ‘development’,
module: {…}
}
// webpack.prod.conf.js
const webpackConfig = merge(baseWebpackConfig, {
mode: ‘production’,
module: {…}
}

报错：The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each enviroment
8.// webpack.base.conf
module.exports = {
performance: {
hints: “warning”, // 枚举
maxAssetSize: 30000000, // 整数类型（以字节为单位）
maxEntrypointSize: 50000000, // 整数类型（以字节为单位）
assetFilter: function(assetFilename) {
// 提供资源文件名的断言函数
return assetFilename.endsWith(’.css’) || assetFilename.endsWith(’.js’);
}
},
module: {…}
}
但是又有新的错误提示：
asset size limit: The following asset(s) exceed the recommended size limit (244 kib).
This can impact web performance.

9.npm install babel-plugin-transform-es2015-modules-commonjs -D
在项目根目录的.babelrc文件中加入：
“plugins”: [“transform-es2015-modules-commonjs”]
10.Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
（1）// plugins
const webpackConfig = merge(baseWebpackConfig, {
module: {…},
optimization: { // 增加此处代码
// Setting optimization.runtimeChunk to true adds an additonal chunk to each entrypoint containing only the runtime.
// The value single instead creates a runtime file to be shared for all generated chunks.
runtimeChunk: ‘single’,
minimize: env === ‘production’ ? true : false, //生产环境下才进行代码压缩。
splitChunks:{
//As it was mentioned before this plugin will affect dynamic imported modules. Setting the optimization.
//splitChunks.chunks option to “all” initial chunks will get affected by it (even the ones not imported dynamically).
//This way chunks can even be shared between entry points and on-demand loading.
//This is the recommended configuration.
//官方推荐使用all.
chunks: ‘all’,
minSize: 30000, //模块大于30k会被抽离到公共模块
minChunks: 1, //模块出现1次就会被抽离到公共模块
maxAsyncRequests: 5, //异步模块，一次最多只能被加载5个
maxInitialRequests: 3, //入口模块最多只能加载3个
name: true, // 拆分出来块的名字(Chunk Names)，默认由块名和hash值自动生成；设置为true则表示根据模块和缓存组秘钥自动生成。
cacheGroups: {
// 详情建议参看官网 http://webpack.html.cn/plugins/split-chunks-plugin.html
default: {
minChunks: 2,
reuseExistingChunk: true,
},
//打包重复出现的代码
vendor: {
// chunks: ‘initial’,
// 省略test默认选择所有的模块。
chunks: ‘all’,
minChunks: 2,
name: ‘vendor’
},
//打包第三方类库
commons: {
// chunks: “initial”,
chunks: “all”,
name: “commons”,
minChunks: Infinity
}
}
}
},
plugins: […]
})
（2）// 去掉 plugins 中的这3部分代码
…
new webpack.optimize.CommonsChunkPlugin({
name: ‘vendor’,
minChunks (module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, ‘…/node_modules’)
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: ‘manifest’,
minChunks: Infinity
}),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
name: ‘app’,
async: ‘vendor-async’,
children: true,
minChunks: 3
}),
…
11.Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
（1）npm i mini-css-extract-plugin -D
（2）npm uninstall extract-text-webpack-plugin
a.// utils.js
‘use strict’
…
// const ExtractTextPlugin = require(‘extract-text-webpack-plugin’) //删除或注释此段。
// 引入
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’)
…

// 修改此处的generateLoaders函数。
// generate loader string to be used with extract text plugin
function generateLoaders(loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

if (loader) {
  loaders.push({
    loader: loader + '-loader',
    options: Object.assign({}, loaderOptions, {
      sourceMap: options.sourceMap
    })
  })
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
 /**注释或删除此处代码，开始 */

标题

 // return ExtractTextPlugin.extract({
 //   use: loaders,
 //   publicPath: '../../',
 //   fallback: 'vue-style-loader'
 // })
 /**注释或删除此处代码，结束 */
 /**增加此处代码开始 */
 return [MiniCssExtractPlugin.loader].concat(loaders)
 /**增加此处代码结束 */
} else {
  return ['vue-style-loader'].concat(loaders)
}

}
b…
//webpack.prod.conf
/**注释或删除此处代码，开始 */
// const ExtractTextPlugin = require(‘extract-text-webpack-plugin’)
/**注释或删除此处代码，结束 */
/**增加此处代码，开始 */
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’)
/**增加此处代码，结束 */
…

plugins:[
…
/**注释或删除此处代码，开始 */
// extract css into its own file
// new ExtractTextPlugin({
// filename: utils.assetsPath(‘css/[name].[contenthash].css’),
// // Setting the following option to false will not extract CSS from codesplit chunks.
// // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
// // It’s currently set to true because we are seeing that sourcemaps are included in the codesplit bundle as well when it’s false,
// // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
// allChunks: true,
// }),
/**注释或删除此处代码，结束 */
/**增加此处代码，开始 */
new MiniCssExtractPlugin({
filename: utils.assetsPath(‘css/[name].[contenthash].css’),
allChunks: true,
}),
/**增加此处代码，结束 */
…
]

webpack5升级：
1.“copy-webpack-plugin”: “^9.0.0”,高版本需要去除ignore: [’.’]，并添加patterns
new CopyWebpackPlugin({
patterns: [{
from: path.resolve(__dirname, ‘…/static’),
to: config.build.assetsSubDirectory,
// ignore: [’.’]
}]
})
2.报错：Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
原因：插件冲突，CopyWebpackPlugin和html-webpack-plugin 同时生成了不同的html
解决：升级copy-webpack-plugin
3.terser-webpack-plugin替代uglifyjs-webpack-plugin
，在webpack5中
4. optimization:对象中的
runtimeChunk: ‘single’,
minimize: env === ‘production’ ? true : false, //生产环境下才进行代码压缩。
splitChunks: {
cacheGroups: {
defaultVendors: {
test: /[\/]node_modules[\/]/,
name: ‘vendors’,
minSize: 30000,
minChunks: 1,
chunks: ‘initial’,
priority: 1 // 该配置项是设置处理的优先级，数值越大越优先处理
},
commons: {
test: /[\/]src[\/]common[\/]/,
name: ‘commons’,
minSize: 30000,
minChunks: 3,
chunks: ‘initial’,
priority: -1,
reuseExistingChunk: true // 这个配置允许我们使用已经存在的代码块
}
}
},
moduleIds: ‘deterministic’,