webpack学习---优化--oneOf(oneOf 以下loader只会匹配一个,不会一个文件被多个loader解析,加快编译速度)

                const { resolve } = require('path');
                const MiniCssExtractPlugin = require('mini-css-extract-plugin');
                const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-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$/,
                        exclude: /node_modules/,
                        // 优先执行
                        enforce: 'pre',
                        loader: 'eslint-loader',
                        options: {
                        fix: true
                        }
                    },
                    {
                        // 以下loader只会匹配一个
                        // 注意：不能有两个配置处理同一种类型文件
                        oneOf: [
                        {
                            test: /\.css$/,
                            use: [...commonCssLoader]
                        },
                        {
                            test: /\.less$/,
                            use: [...commonCssLoader, 'less-loader']
                        },
                        /*
                            正常来讲，一个文件只能被一个loader处理。
                            当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
                            先执行eslint 在执行babel
                        */
                        {
                            test: /\.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 OptimizeCssAssetsWebpackPlugin(),
                    new HtmlWebpackPlugin({
                    template: './src/index.html',
                    minify: {
                        collapseWhitespace: true,
                        removeComments: true
                    }
                    })
                ],
                mode: 'production'
                };

标签：oneOf,const,js,---,test,loader,options,css
来源： https://www.cnblogs.com/leiyanting/p/15456790.html