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

原创已于 2023-04-28 17:32:06 修改 · 487 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #node.js #npm #webpack #前端

于 2023-04-27 16:30:32 首次发布

webpack打包专栏收录该内容

1 篇文章

订阅专栏

文章详细列举了Webpack在不同版本间的若干重大变更，包括vue-loader的引入方式变化，less-loader的选项调整，HashedModuleIdsPlugin的更新，CommonsChunkPlugin的替换，CopyWebpackPlugin配置的改变以及optimization设置的升级。这些变更反映了Webpack向更优化、更简洁的配置方向发展。

①

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