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
- webpack.docschina.org/plugins/css…
- 优化和压缩CSS插件
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.