升级vue-loader依赖包后造成require()方法返回是
2020-02-26 本文已影响0人
hao102
vue-loader在13.x以后通过require导入的包默认esModule是true;造成直接通过require方法引入的静态资源无法使用;需要手动添加default属性;
解决方法就是重置vue-loader中的url-loader配置;解决步骤如下:
- 安装url-loader
npm i url-loader
- 更改vue.config.js,替换规则里的loader参考替换规则里的loader;在链式操作里重新配置url-loader;配置如下;
chainWebpack (config) {
config.plugins.delete("preload"); // TODO: need test
config.plugins.delete("prefetch"); // TODO: need test
// reset url-loader
const urlRule = config.module.rule('images')
// 清除已有的所有 loader。
// 如果你不这样做,接下来的 loader 会附加在该规则现有的 loader 之后。
urlRule.uses.clear()
// 添加要替换的 loader
urlRule
.use("url-loader")
.loader("url-loader")
.options({
limit: 8192,
esModule: false
})
// set svg-sprite-loader
config.module
.rule("svg")
.exclude.add(resolve("src/icons"))
.end();
config.module
.rule("icons")
.test(/\.svg$/)
.include.add(resolve("src/icons"))
.end()
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.options({
symbolId: "icon-[name]"
})
.end();
// set preserveWhitespace
config.module
.rule("vue")
.use("vue-loader")
.loader("vue-loader")
.tap(options => {
options.compilerOptions.preserveWhitespace = true;
return options;
})
.end();
config
// https://webpack.js.org/configuration/devtool/#development
.when(process.env.NODE_ENV === "development", config =>
config.devtool("cheap-source-map")
);
config.when(process.env.NODE_ENV !== "development", config => {
config
.plugin("ScriptExtHtmlWebpackPlugin")
.after("html")
.use("script-ext-html-webpack-plugin", [
{
// `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/
}
])
.end();
config.optimization.splitChunks({
chunks: "all",
cacheGroups: {
libs: {
name: "chunk-libs",
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: "initial" // only package third parties that are initially dependent
},
elementUI: {
name: "chunk-elementUI", // split elementUI into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
},
commons: {
name: "chunk-commons",
test: resolve("src/components"), // can customize your rules
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true
}
}
});
config.optimization.runtimeChunk("single");
});
}
配置完成后重新
npm run dev
思路参考