chainWebpack 配置 oneOf

Question

请问一下 chainWebpack 的方式应该怎么配置 oneOf 呢

Answer 1

在使用 chainWebpack 配置时，我们可以通过 oneOf 方法来对不同的文件类型应用不同的 loader 和插件。下面是一个简单的例子：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('js')
      .test(/\.js$/)
      .include.add(path.resolve(__dirname, 'src'))
      .end()
      .exclude.add(path.resolve(__dirname, 'node_modules'))
      .end()
      .use('babel-loader')
      .loader('babel-loader')
      .options({
        presets: ['@babel/preset-env'],
      })
      .end()

    config.module
      .rule('vue')
      .test(/\.vue$/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()

    config.module
      .rule('css')
      .oneOf('vue')
      .resourceQuery(/module/)
      .use('vue-style-loader')
      .loader('vue-style-loader')
      .end()
      .use('css-loader')
      .loader('css-loader')
      .options({
        modules: {
          localIdentName: '[local]_[hash:base64:5]',
        },
      })
      .end()
      .end()
      .oneOf('normal')
      .use('vue-style-loader')
      .loader('vue-style-loader')
      .end()
      .use('css-loader')
      .loader('css-loader')
      .end()
      .end()

    // 其他配置...
  },
};

上面的配置中，我们首先配置了一个名为 js 的 loader，用于处理 JavaScript 文件，其余配置省略。然后我们使用 rule() 方法创建一个名为 css 的 loader，用于处理 CSS 文件。

在 rule('css') 后，我们使用 oneOf() 方法来区分两种不同的 CSS 文件类型，即 .vue 文件和普通的 .css 文件。对于 .vue 文件，我们使用 resourceQuery() 方法来匹配 CSS 模块文件，并使用 vue-style-loader 和 css-loader 来加载和处理 CSS 模块。对于普通的 .css 文件，我们同样使用 vue-style-loader 和 css-loader 来加载和处理 CSS 文件，但是没有启用 CSS 模块。

所以，如果你需要在 chainWebpack 中配置 oneOf，你可以参考上面的例子，根据你的需求来定义不同的规则和 loader。