webpack4 升级webpack5

982 阅读2分钟

webpack5不再自动引入Polyfills

webpack4以前附带了许多node.js核心模块的polyfill,在构建时给bundle附加了庞大的polyfills,在大部分情况下,polyfills并不是必须的。

现在V5停止这一切,在模块的应用中不再自动引入Polyfills,明显的减少了打包体积。

升级http-proxy-middleware

  • 升级前版本为 ^0.18.0
  • 升级后版本为

webpack多入口,插件HtmlWebpackPlugin配置chunks

当我们的webpack的配置多文件入口时, 插件HtmlWebpackPlugin配置chunks

 const config = {
        entry: {
            bundle1: './a.js',
            bundle2: './b.js',
        },
        output: {
            filename: '[name].js'
        },
        pugins: [
            new HtmlWebpackPlugin({ filename: '[name].html' })
        ]
 };

当如上面这样配置时,a.js 和 b.js 都会加入到a.html文件中、也会都加入到b.html中。 所以要修改配置如下:

 const config = {
        entry: {
            bundle1: './a.js',
            bundle2: './b.js',
        },
        output: {
            filename: '[name].js'
        },
        pugins: [
            
        ]
 };
 
 const entrys = ['a', 'b']
 entrys.foreach((item) => {
    const htmlPlugin =  new HtmlWebpackPlugin({ filename: item + '.html' })
    config.plugins.push(htmlPlugin)
 })

修改optimize-css-assets-webpack-plugin

    npm remove  optimize-css-assets-webpack-plugin
    npm install css-minimizer-webpack-plugin --save-dev

升级mini-css-extract-plugin

  • webpack.docschina.org/plugins/min…
  • CSS 提取到单独的文件中,为每个包含 CSS 的 JS 文件创建一个 CSS 文件,并且支持 CSS 和 SourceMaps 的按需加载。
  npm remove mini-css-extract-plugin
  npm install mini-css-extract-plugin -D

Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'

  • 将vue-loader的版本从 ^16.1.1 改为 ^16.5.0,

ReferenceError: document is not defined

at addStyle
ERROR in ../../raw/assets/style/base.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ReferenceError: document is not defined
    at addStyle (D:\code\erp\Public\Erp\node_modules\vue-style-loader\index.js!D:\code\erp\Public\Erp\node_modules\css-loader\dist\cjs.js??clonedRuleSet-41.use[2]!D:\code\erp\Public\Erp\node_modules\postcss-loader\dist\cjs.js??clonedRuleSet-41.use[3]!D:\code\erp\raw\assets\style\base.css:272:22)
   

mini-css-extract-plugin和vue-style-loader冲突,删除vue-style-loader

style-loader 和 vue-style-loader

devtool: "cheap-eval-source-map"修改为"eval-cheap-source-map"

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$".
   BREAKING CHANGE since webpack 5: The devtool option is more strict.
   Please strictly follow the order of the keywords in the pattern.