记录webpack3升级webpack4各插件版本以及webpack配置变化

针对npm run dev时会出错调整

1)依赖插件版本调整先

先到package.json文件中改变为这些值

"webpack": "^4.8.1",
"webpack-dev-server": "^3.1.4",
"webpack-cli": "^3.3.7",
"html-webpack-plugin": "^3.2.0",
"vue-loader": "^15.6.4",
"vue-style-loader": "^4.1.2",

然后 cnpm install或 npm install重新根据package.json下载即可

2)针对vue-loader进行webpack配置改造

注：修改地方会有//注释

修改 webpack.base.conf.js

    'use strict'
    const path = require('path')
    const utils = require('./utils')
    const config = require('../config')
    const vueLoaderConfig = require('./vue-loader.conf')// 添加这个
    
      module: {
        rules: [
          ...(config.dev.useEslint ? [createLintingRule()] : []),
          {// 添加这项
            test: /\.vue$/,
            loader: 'vue-loader',
            options: vueLoaderConfig
          },
        ]
      },
    }

修改 webpack.dev.conf.js

    'use strict'
    const utils = require('./utils')
    const webpack = require('webpack')
    const config = require('../config')
    const merge = require('webpack-merge')
    const path = require('path')
    const baseWebpackConfig = require('./webpack.base.conf')
    const CopyWebpackPlugin = require('copy-webpack-plugin')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
    const portfinder = require('portfinder')
    const VueLoaderPlugin = require('vue-loader/lib/plugin')// 添加这个
    const HOST = process.env.HOST
    const PORT = process.env.PORT && Number(process.env.PORT)
    
      plugins: [
        new VueLoaderPlugin(),// 添加这个
        new webpack.HotModuleReplacementPlugin(),
        // https://github.com/ampedandwired/html-webpack-plugin
        new HtmlWebpackPlugin({
          filename: 'index.html',
          template: 'index.html',
          inject: true
        }),
	]

修改 webpack.prod.conf.js

'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')// 添加这项
const env = require('../config/prod.env')
  plugins: [
    new VueLoaderPlugin(),// 添加这项
    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].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 OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
        : { safe: true }
    }),
]

针对npm run build出现问题解决

在 webpack.prod.conf.js

error1: 升级extract-text-webpack-plugin插件

作用：抽离出css，将css和js分离开来
Path variable [contenthash] not implemented in this context: static/css/[name].[contenthash].css

// 先解决extract-text-webpack-plugin的版本问题
npm install --save-dev extract-text-webpack-plugin@4.0.0-beta.0

// 在plugin里面找到
new ExtractTextPlugin({
	// 将下面这段替换为filename: utils.assetsPath("css/[name].[hash].css"),
	// filename: utils.assetsPath('css/[name].[contenthash].css'),
	 filename: utils.assetsPath("css/[name].[hash].css"), // 修改后
	 allChunks: true,
}),

注：这里我查的部分帖子会说是filename: [name]_[md5:contenthash:hex:8].css,这个，但是我试过效果不佳，不建议使用。

-|:------------😐 --------😐 -------------😐----------------😐-----------------😐---------------------|:

error2:

UnhandledPromiseRejectionWarning: CssSyntaxError … Unknown word

// 在plugin中找到并注释掉这个
// new OptimizeCSSPlugin({  
//   cssProcessorOptions: config.build.productionSourceMap  
//   ? { safe: true, map: { inline: false } }  
//     : { safe: true }  
// }),

-|:------------😐 --------😐 -------------😐----------------😐-----------------😐---------------------|:

error3: 使用config.optimization.splitChunks来替代commonChunkPlugins解决压缩js

webpack.optimize.CommonsChunkPlugin到config.optimization.splitChunk
解决:webpack 4之前的版本是通过webpack.optimize.CommonsChunkPlugin来压缩js，webpack 4版本之后被移除了，使用config.optimization.splitChunks来代替。

// 在webpack.prob.config.js
//optimization与entry/plugins同级
optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: "commons",
                    chunks: "initial",
                    minChunks: 2
                }
            }
        }
    },

注意：这里要注释掉之前commonChunkPlugins的代码，像这样的在webpack.prob.config.js中都注释掉或删掉

     new webpack.optimize.CommonsChunkPlugin({
       ...
     })

解释部分参数：
cacheGroups is an object where keys are the cache group names. All options from the ones listed above are possible: chunks, minSize, minChunks, maxAsyncRequests, maxInitialRequests, name. 可以自己设置一组一组的cache group来配对应的共享模块
commons里面的name就是生成的共享模块bundle的名字
With the chunks option the selected chunks can be configured.
chunks 有三个可选值，”initial”, “async” 和 “all”. 分别对应优化时只选择初始的chunks，所需要的chunks 还是所有chunks 。
minChunks 是split前，有共享模块的chunks的最小数目 ，默认值是1， 但我看示例里的代码在default里把它重写成2了，从常理上讲，minChunks = 2 应该是一个比较合理的选择吧。
-|:------------😐 --------😐 -------------😐----------------😐-----------------😐---------------------|:

将UglifyJS配置到optimization.minimizer中

作用：压缩js
和上方error3一样在webpack.prob.conf.js中 optimization:中添加如下配置

  optimization: {
    minimizer: [
      new UglifyJsPlugin({
          cache: true,
          parallel: true,
          sourceMap: config.build.productionSourceMap,
          uglifyOptions: {
              warnings: false
          }
      })
    ],
}

-|:------------😐 --------😐 -------------😐----------------😐-----------------😐---------------------|:

warning：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 environment.

webpack官网更新日志有说明：webpack升级4.0新增mode属性
可以直接在webpack.prob.conf.js中添加mode: ‘development’。

注：搜了很多帖子，很多都是还要修改package.json中的"scripts": { “dev”: “webpack --mode development”, // 开发环境 “build”: “webpack --mode production”, // 生产环境 },发现修改了报错，就只修改了。
-|:------------😐 --------😐 -------------😐----------------😐-----------------😐---------------------|:
另：我用extract-text-webpack-plugin抽离css和optimize-css-assets-webpack-plugin压缩css两个插件的配合使用并未成功，但据说这两插件用起来的效果会比extract-text-webpack-plugin好用。
查询资料：
https://www.jianshu.com/p/0a91fd682f66
https://blog.csdn.net/github_36487770/article/details/80228147
https://www.cnblogs.com/zhensg123/p/11412679.html