Vue Cli 中 webpack 配置的3种写法
程序员文章站
2022-04-05 11:12:24
...
很多时候,vue-cli
默认的webpack配置并不能满足项目需求,比如需要解析markdown文件为页面。这时,便可以在vue.config.js
中设置webpack。
参考vue-cli的官方教程,我们可以看到有2种方式可以对webpack进行修改:
- configureWebpack 简单配置
- chainWebpack 链式操作
以使用自定义loader解析markdown文件并修改@别名目录为例
configureWebpack 简单配置
有2中写法,一种是直接按照webpack基本配置设置一个JSON
对象;另一种是设置一个函数
,在函数内,你可以直接修改配置,或者返回一个将会被合并的对象。
写法一:
configureWebpack: {
resolve: {
alias: {
'@': path.resolve(__dirname, 'examples'),
}
},
module: {
rules: [
{
test: /\.md$/,
use: [
'vue-loader',
path.resolve(__dirname, "./webpack/markdown-loader.js"),
],
}
]
}
},
写法二:
configureWebpack: config => {
config.resolve.alias['@'] = path.resolve(__dirname, 'examples');
config.module.rules.push({
test: /\.md$/,
use: [
'vue-loader',
path.resolve(__dirname, "./webpack/markdown-loader.js"),
],
});
},
chainWebpack 链式操作
链式操作可以更细粒度的控制其内部配置。
chainWebpack: config => {
config.resolve.alias
.set('@', path.resolve(__dirname, 'examples'))
config.module
.rule("md")
.test(/\.md/)
.use("vue")
.loader("vue-loader")
.end()
.use("markdown")
.loader(path.resolve(__dirname, "./webpack/markdown-loader.js"))
.end();
},
以上两种写法达到的效果完全相同,其中链式操作里的use可以理解为在基本配置中的use数组中,给对应的数据项命名,可以任意描述,而不是代表使用的loader。