收集：关于升级到webpack5以及module、plugins的变动

①

const VueLoaderPlugin = require('vue-loader/lib/plugin');

Cannot find module 'vue-loader/lib/plugin'

从16.0.0版本开始引用这种方法会报错，因为已经放弃了上述的引入方式，改以解构引入方式引入VueLoaderPlugin

const { VueLoaderPlugin } = require('vue-loader')

②

less-loader的版本不同，配置不同。

V6.0.0之前
options: {
javascriptEnabled: true
}
V6.0.0之后
options: {
lessOptions: {
javascriptEnabled: true
}
}

③

const webpack = require('webpack')

new webpack.HashedModuleIdsPlugin() 变为new webpack.ids.HashedModuleIdsPlugin()

④

CommonsChunkPlugin已在4的时候去除，改用optimization.splitChunks 和 optimization.runtimeChunk

⑤

const CopyWebpackPlugin = require("copy-webpack-plugin")

CopyWebpackPlugin的选项配置改变了

举例：从

new CopyWebpackPlugin([
      {
        from: "./doc",//源路径
        to: "./doc",//目标路径
        ignore: ['.*']
      }
    ])

变为

    new CopyWebpackPlugin({
      patterns: [
        {
            from: "./doc",//源路径
            to: "./doc",//目标路径
        },
            globOptions: {
                 ignore: ['.*']
            }
        ]
    })

⑥

官网提供：从 v4 升级到 v5 | webpack 中文文档

以下的配置项，请升级至最新的版本：

• optimization.hashedModuleIds: true → optimization.moduleIds: 'hashed'
• optimization.namedChunks: true → optimization.chunkIds: 'named'
• optimization.namedModules: true → optimization.moduleIds: 'named'
• NamedModulesPlugin → optimization.moduleIds: 'named'
• NamedChunksPlugin → optimization.chunkIds: 'named'
• HashedModuleIdsPlugin → optimization.moduleIds: 'hashed'
• optimization.noEmitOnErrors: false → optimization.emitOnErrors: true
• optimization.occurrenceOrder: true → optimization: { chunkIds: 'total-size', moduleIds: 'size' }
• optimization.splitChunks.cacheGroups.vendors → optimization.splitChunks.cacheGroups.defaultVendors
• optimization.splitChunks.cacheGroups.test(module, chunks) → optimization.splitChunks.cacheGroups.test(module, { chunkGraph, moduleGraph })
• Compilation.entries → Compilation.entryDependencies
• serve → serve 已被移除，推荐使用 DevServer
• Rule.query (从 v3 开始被移除) → Rule.options/UseEntry.options
• Rule.loaders → Rule.use

例子：

optimization: {

    moduleIds: 'named' // webpack5 采用此方式代替 NamedModulesPlugin

  },