14.webpack的oneOf

转载：https://segmentfault.com/a/1190000022413668

每个不同类型的文件在loader转换时，会遍历module中rules中所有loader，而oneOf则是当有一个loader能够进行转换时，就不再遍历。

注意：

• 使用oneOf 根据文件类型加载对应的loader，只要能匹配一个即可退出，
• 对于同一类型文件，比如处理js，如果需要多个loader，可以单独抽离js处理，确保oneOf里面一个文件类型对应一个loader
• 可以配置 enforce: ‘pre’,指定优先执行

const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');


// 定义nodejs环境变量：决定使用browserslist的哪个环境
process.env.NODE_ENV = 'production';




// 复用loader
const commonCssLoader = [
MiniCssExtractPlugin.loader,
'css-loader',
{
// 还需要在package.json中定义browserslist
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [require('postcss-preset-env')()]
}
}
];




module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
// 在package.json中eslintConfig --> airbnb
test: /.js/</span><span class="token punctuation">,</span>
      exclude<span class="token punctuation">:</span> <span class="token regex">/node_modules/</span><span class="token punctuation">,</span>
      <span class="token comment">// 优先执行</span>
      enforce<span class="token punctuation">:</span> <span class="token string">'pre'</span><span class="token punctuation">,</span>
      loader<span class="token punctuation">:</span> <span class="token string">'eslint-loader'</span><span class="token punctuation">,</span>
      options<span class="token punctuation">:</span> <span class="token punctuation">{<!-- --></span>
        fix<span class="token punctuation">:</span> <span class="token boolean">true</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{<!-- --></span>
      <span class="token comment">// 以下loader只会匹配一个</span>
      <span class="token comment">// 注意：不能有两个配置处理同一种类型文件</span>
      oneOf<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{<!-- --></span>
          test<span class="token punctuation">:</span> <span class="token regex">/\.css/,
use: [...commonCssLoader]
},
{
test: /.less/</span><span class="token punctuation">,</span>
          use<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span>commonCssLoader<span class="token punctuation">,</span> <span class="token string">'less-loader'</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">/*
          正常来讲，一个文件只能被一个loader处理。
          当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
            先执行eslint 在执行babel
        */</span>
        <span class="token punctuation">{<!-- --></span>
          test<span class="token punctuation">:</span> <span class="token regex">/\.js/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: {version: 3},
targets: {
chrome: '60',
firefox: '50'
}
}
]
]
}
},
{
test: /.(jpg|png|gif)/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
outputPath: 'imgs',
esModule: false
}
},
{
test: /.html$/,
loader: 'html-loader'
},
{
exclude: /.(js|css|less|html|jpg|png|gif)/,
loader: 'file-loader',
options: {
outputPath: 'media'
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/built.css'
}),
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
})
],
mode: 'production'
};