欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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。