Vue 3 - 如何将 Polyfills 添加到 ChainWebpack
Vue 3 - How to add Polyfills to ChainWebpack
使用 Vue 3,如何将 path-browserify
添加到 vue.config.js?
module.exports = {
chainWebpack: config => {}
}
我在编译时收到以下错误:
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
Webpack 5 删除了 Webpack 4 包含在捆绑包中的一些东西。
要将其全部恢复到 vue3 应用程序中,您可以使用 polyfill 插件。
来自带有 babel 的香草 create-vue-app:
> npm i node-polyfill-webpack-plugin
babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
vue.config.js
const { defineConfig } = require("@vue/cli-service");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
plugins: [new NodePolyfillPlugin()],
optimization: {
splitChunks: {
chunks: "all",
},
},
},
});
在@Zack 的帮助下:
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
module.exports = {
chainWebpack: config => {
config.plugin('polyfills').use(NodePolyfillPlugin)
},
}
使用 Vue 3,如何将 path-browserify
添加到 vue.config.js?
module.exports = {
chainWebpack: config => {}
}
我在编译时收到以下错误:
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
Webpack 5 删除了 Webpack 4 包含在捆绑包中的一些东西。
要将其全部恢复到 vue3 应用程序中,您可以使用 polyfill 插件。 来自带有 babel 的香草 create-vue-app:
> npm i node-polyfill-webpack-plugin
babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
vue.config.js
const { defineConfig } = require("@vue/cli-service");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
plugins: [new NodePolyfillPlugin()],
optimization: {
splitChunks: {
chunks: "all",
},
},
},
});
在@Zack 的帮助下:
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
module.exports = {
chainWebpack: config => {
config.plugin('polyfills').use(NodePolyfillPlugin)
},
}