Vue Cli 中 Webpack 配置的3种写法

很多时候，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。