webpack生产环境优化：oneOf 配置

转载请注明 来源:http://www.eword.name/
Author：eword
Email:eword@eword.name

webpack生产环境优化：oneOf 配置

• 放在oneOf代码块中的 loader 只会匹配一个,避免每一个文件在打包时每个loader都要过一遍。
• 注意：不能有两项配置处理同一种类型的文件
  • 例如：js文件的语法检查和兼容性处理，不能放在同一个oneOf中。

一、核心配置

/*
    webpack.config.js webpack的配置文件
    路径： ./webpack.config.js
*/
 
// resolve用来拼接绝对路径的方法
const { resolve } = require('path');
// 引入打包 html 文件的插件 html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 引入压缩 css 的插件 optimize-css-assets-webpack-plugin
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
 
// 设置 nodejs 环境变量,决定使用‘browserslist‘的哪个环境
// process.env.NODE_ENV = 'development';
 
// 复用 loader
const commonCssLoader = [
    // use数组中loader执行顺序:从右到左,从下到上依次执行
    // 创建style标签,将js中的样式资源插入进行,添加到head中生效
    // 'style-loader',
    // 这个loader取代style-loader。作用:提取js中的css成单独文件            
    {
        loader: MiniCssExtractPlugin.loader,
        options: {
            // 这里可以指定一个 publicPath
            // 默认使用 webpackOptions.output中的publicPath
            publicPath: '../'
        },
    },
    // 将css文件变成commonjs模块加载js中,里面内容是样式字符串
    'css-loader',
    /*
        css兼容性处理: postcss --> postcss-loader postcss-preset-env
        postcss-preset-env的作用是帮postcss找到package.json中browserslist里面的配置,
        通过配置加载指定的css兼容性样式，可以在 github上找到 browserslist 的更多配置。
        以下举例应该在package.json 配置的内容。
        ========package.json  文件 begin=========
                        "browserslist":{
                            //开发环境-->设置node环境变量: process.env.NODE_ENV = development
                            "development":[
                                "last 1 chrome version",
                                "last 1 firefox version",
                                "last 1 safari version",
                                "ie 9-12"
                            ],
                            //生产环境：默认是生产环境
                            "production":[
                                ">0.2%",
                                "not dead",
                                "not op_mini all"
                            ]
                        },
            ========package.json  文件 end=========
    */
    //使用loader的默认配置
    //'postcss-loader"
    //修改loader的配置
    {
        loader: 'postcss-loader',
        options: {
            ident: 'postcss',
            plugins: () => [
                // postcss的插件
                require('postcss-preset-env')()
            ]
 
        }
    }
]
module.exports = {
    // webpack配置
    // 入口起点文件
    entry: './src/js/index.js',
    // 输出
    output: {
        // 输出文件名
        filename: 'js/built.js',
        // 输出路径
        // __dirname nodejs的变量,代表当前文件的目录绝对路径
        path: resolve(__dirname, 'build'),
    },
    // loader的配置
    module: {
        rules: [
 
            // 详细loader配置
            //不同文件必须配置不同loader处理
 
 
            /*
                语法检查: eslint-loader eslint
                注意:只检查自己写的源代码,第三方的库是不用检查的
                设置检查规则:
                    airbnb-->eslint-config-airbnb-base eslint-plugin-import eslint
            
                    在package.json中eslintConfig中设置
                        "eslintConfig": {
                            "extends": "airbnb-base"
                        }
           */
            {
                test: /\.js$/,
                // 指定检查的目录，或者配置排除某些文件夹
                // include: [path.resolve(__dirname, 'src')], 
                // 注意:只检查自己写的源代码,第三方的库是不用检查的,这里排除node_modules文件夹
                exclude: /node_modules/,
                loader: 'eslint-loader',
                /*
                1. pre 优先处理
                2. normal 正常处理（默认）
                3. inline 其次处理
                4. post 最后处理
                */
                enforce: 'pre',
                options: {
                    // 这里的配置项参数将会被传递到 eslint 的 CLIEngine
                    // 自动修复eslint的错误
                    fix: true,
                },
            },//语法检查loader 配置 end
 
            {
                // 以下 loader 只会匹配一个
                // 注意：不能有两项配置处理同一种类型的文件
                // 例如：js文件的语法检查和兼容性处理，不能放在同一个oneOf中。
                oneOf: [ 
 
                    // 打包 css 文件的详细loader配置
                    {
                        // 匹配哪些文件
                        test: /\.css$/,
                        // 使用哪些loader进行处理
                        use: [...commonCssLoader],
                    },
 
                    //打包less 文件的详细loader配置
                    {
                        //匹配哪些文件
                        test: /\.less$/,
                        //使用哪些loader进行处理
                        use: [
                            ...commonCssLoader,
                            //将less文件编译成css文件
                            //需要下载less-loader和less
                            'less-loader'
                        ]
                    },
 
                    /*
                         js兼容性处理:babel-loader @babel/core @babel/preset-env
                         1.基本js兼容性处理 @babel/preset-env
                         问题：只能转换基本语法，如promise不能转换 
                         2．全部js兼容性处理 --> @babel/polvfill
                         问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~ 
                         3. 需要做兼容性处理的就做：按需加载 --> core-js
                         */
                    {
                        test: /\.(?:js|mjs|cjs)$/,
                        // 指定检查的目录，或者配置排除某些文件夹
                        // include: [path.resolve(__dirname, 'src')], 
                        // 注意:只检查自己写的源代码,第三方的库是不用检查的,这里排除node_modules文件夹
                        loader: "babel-loader",
                        exclude: /node_modules/,
                        options: {
                            // 预设：指示 babel 做怎么样的兼容性处理
                            "presets": [
                                [
                                    "@babel/preset-env",
                                    {
                                        // 按需加载
                                        useBuiltIns: 'usage',
                                        // 制定 core-js 版本
                                        corejs: {
                                            version: 3
                                        },
                                        //指定兼容性做到哪个版本的浏览器
                                        targets: {
                                            chrome: '60',
                                            firefox: '60',
                                            ie: '9',
                                            safari: '10',
                                            edge: '17'
                                        }
                                    }
                                ]
                            ]
                        }
                    },
                    {
                        // 问题：默认处理不了 html 中的 img 图片
                        // 处理图片资源
                        test: /\.(jpg|png|gif)$/,
                        // 使用一个loader
                        // 下载url-loader file-loader
                        loader: 'url-loader',
                        options: {
                            // 图片大小小于8kb,就会被base64处理
                            // 优点:减少请求数量(减轻服务器压力)
                            // 缺点:图片体积会更大(文件请求速度更慢)
                            limit: 8 * 1024,
                            // 问题:因为url-loader默认使用es6模块化解析, 而html-loader默认引入图片是commonjs
                            // 解析时会出问题: [object Module]
                            // 解决:关闭url-loader的es6模块化,使用commonjs解析
                            esModule: false,
                            // 给图片进行重命名
                            // [hash:10]取图片的hash的前10位
                            // [ext]取文件原来扩展名
                            name: '[hash:10].[ext]',
                            // 设置输出目录，将打包的图片资源放到imgs文件夹
                            outputPath: './imgs',
                        },
                    },
                    {
                        test: /\.html$/,
                        // 处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
                        loader: 'html-loader',
                        options:
                        {
                            // 默认情况下,生成使用ES块语法的Js模块
                            // 问题:生成的图片显示错误
                            // 解决: esModule改为false
                            esModule: false,
                        },
                    },
                    {
                        // 打包其他资源(除了html/js/css资源以外的资源)
                        // 排除css/is/html资源
                        exclude: /\.(css|js|html|less|jpg|png|gif)$/,
                        loader: 'file-loader',
                        options:
                        {
                            // 给资源进行重命名
                            // [hash:10]取资源的hash的前10位
                            // [ext]取文件原来扩展名
                            name: '[hash:10]. [ext]',
                            // 设置输出目录，将打包的其他资源放到media 文件夹
                            outputPath: './media',
                        },
                    },
                ]// oneOf  [] end
            }// oneOf end
        ],
    },
    // plugins的配置
    plugins: [
        // 详细的plugins配置
        // html-webpack-plugin
        // 功能:默认会创建一个空的HTML, 自动引入打包输出的所有资源(JS/CSS)
        // 需求:需要有结构的HTML文件
        new HtmlWebpackPlugin({
            // 复制../src/index.html'文件,并自动引入打包输出的所有资源(JS/CS5)
            template: './src/index.html',
            //压缩 html 代码
            minify: {
                //移除空格
                collapseWhitespace: true,
                //移除注释
                removeComments: true
            }
        }),
        new MiniCssExtractPlugin({
            //对输出的css文件进行重命名，这里单独为生成的 css 创建一个 css 文件夹。
            filename: './css/[name].css',
            chunkFilename: "./css/[id].css",
            ignoreOrder: false,
            linkType: "text/css",
        }),
        // 压缩 css
        new OptimizeCssAssetsWebpackPlugin(),
    ],
    // 模式  development  开发环境，production 生产环境
    // mode: 'development',
    // 生产环境下会自动压缩js代码
    mode: 'production',
 
    // 开发服务器devServer:用来自动化(自动编译, 自动打开浏览器, 自动刷新浏览器)
    // 特点:只会在内存中编译打包,不会有任何输出
    // 启动devServer指令为: npx webpack-dev-server
    devServer: {
        // 项目构建后路径
        contentBase: resolve(__dirname, 'build'),
        // 启动gzip压缩
        compress: true,
        // 端口号
        port: 3000,
        // 自动打开浏览器
        open: true,
    },
};
 

核心配置

/*
    webpack.config.js webpack的配置文件
    路径： ./webpack.config.js
*/
 
……
 
module.exports = {
……
 
    // loader的配置
    module: {
        rules: [
 
            // 详细loader配置
            //不同文件必须配置不同loader处理
 
            //……这里放一个 js 处理 loader，例如放  eslint js 语法检查……
            {
                test: /\.js$/,
                ……
            },//语法检查loader 配置 end
 
            //  ***********这里的配置**********
            {
                //  oneOf: [ ]  代码块放在  {}中当做一个 loader,其他需要放进去的 loader 直接嵌套进去[]即可。
                // 以下 loader 只会匹配一个
                // 注意：不能有两项配置处理同一种类型的文件
                // 例如：js文件的语法检查和兼容性处理，不能放在同一个oneOf中。
                //  ***********这里的配置**********
                oneOf: [ 
 
                    // 打包 css 文件的详细loader配置
                    {
                        // 匹配哪些文件
                        test: /\.css$/,
                         ……
                    },
 
                    //打包less 文件的详细loader配置
                    {
                        //匹配哪些文件
                        test: /\.less$/,
                         ……
                    },
                    {
                        test: /\.(?:js|mjs|cjs)$/,
                         ……
                    },
                    {
                        // 问题：默认处理不了 html 中的 img 图片
                        // 处理图片资源
                        test: /\.(jpg|png|gif)$/,
                         ……
                    },
                    {
                        test: /\.html$/,
                         ……
                    },
                    {
                        // 打包其他资源(除了html/js/css资源以外的资源)
                        // 排除css/is/html资源
                        exclude: /\.(css|js|html|less|jpg|png|gif)$/,
                         ……
                    },
                ]// oneOf  [] end
            }// oneOf {} end
        ],
    },
    // plugins的配置
    plugins: [
        // 详细的plugins配置
                         ……
    ],
    // 模式  development  开发环境，production 生产环境
    // mode: 'development',
    // 生产环境下会自动压缩js代码
    mode: 'production',
};