webpack生产环境基本配置

痛定思痛。 2022-09-12 10:48 246阅读 0赞

webpack.config.js:

const { resolve }=require("path")
    //提取css代码为单独文件
    const MiniCssExtractPlugin=require("mini-css-extract-plugin")
    
    const HttpWebpackPlugin=require("html-webpack-plugin")
    
    //决定使用browserslist的开发环境配置
    process.env.NODE_ENV="development"
    
    //复用cssloader
    const commonCssLoader=[
        MiniCssExtractPlugin.loader,
        "css-loader",
        {   
            //浏览器兼容性处理
            //还需要在packge.json中定义browserslist
            loader : 'postcss-loader',
            options : {
                postcssOptions : {
                    plugins : [require("postcss-preset-env")()]
                }
            }
        }
    ]
    
    //压缩css
    //旧版本 let OptimizeCssAssetsWebpackPlugin=require("optimize-css-assets-webpack-plugin")      
    const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
    
    module.exports={
        entry : './src/js/index.js',
        output : {
            filename : "js/built.js",
            path : resolve(__dirname,"build")
        },
        module : {
            rules : [
                {
                    test : /\.css$/,
                    use : [...commonCssLoader]
                },
                {
                    test : /\.less$/,
                    use : [ ...commonCssLoader,"less-loader" ]
                },
                /*
                *   正常情况一个文件只能被一个loader处理；
                *   当一个文件被多个loader处理，一定要指定loader执行的先后顺序
                *   先执行eslint，再执行babel    
                */
                {
                    //js语法规范检查,还需要在packge.json中配置eslintConfig,选择airbnb语法规范
                    test : /\.js$/,
                    exclude : /node_modules/,
                    loader :"eslint-loader",     
                    enforce : "pre",    //优先执行
                    options : {
                        //自动修复语法不规范
                        fix : true
                    }
                },
                {
                    //es6新语法兼容性处理
                    test : /\.js$/,
                    exclude : /node_modules/,
                    loader : 'babel-loader',
                    options : {
                        presets : [
                            [
                                //兼容简单的es6改进语法
                                "@babel/preset-env",
                                {
                                    //按需加载promise,await等新语法
                                    useBuiltIns : 'usage',
                                    corejs : { version : 3 },
                                    targets : {
                                        chrome : "60",
                                        firefox : "50",
                                        ie : "9",
                                        safari : "10",
                                        edge : "17"
                                    }
                                }
                            ]
                        ]
                    }
                },
                {
                    //解析css内的图片
                    test : /\.(jpg|png|gif)$/,
                    generator : {
                        filename : 'imgs/[hash][ext]'
                    }
                },
                {
                    //解析html内的图片
                    test : /\.html$/,
                    use : ["html-loader"]
                },
                {
                    //解析其他文件
                    exclude : /\.(js|css|less|sass|html|jpg|png|gif)$/,
                    generator : {
                        filename : "media/[hash][ext]"
                    }
                }
            ]
        },
        optimization: {
            //CSS压缩
            minimizer: [
                new CssMinimizerPlugin(),
            ],
            minimize: true,
        },
        plugins : [
            //打包后的index.html将以src/index.html文件为html模板文件
            new HttpWebpackPlugin({
                template : "./src/index.html",
                minify : {
                    collapseWhitespace : true,  //压缩html内空格,
                    removeComments : true   //去除html注释
                }
            }),
            new MiniCssExtractPlugin({
                filename : "css/built.css"
            }),
        ],
        mode : 'production',     //生产环境js自动压缩
        devServer : {
            static : {
                directory : resolve(__dirname,"build"),
            },
            compress : true,
            open : true,
            port : 9999
        }
    }

packge.json:

{
      "name": "webpack_test",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "@babel/polyfill": "^7.12.1",
        "@babel/preset-env": "^7.15.6",
        "babel-loader": "^8.2.2",
        "core-js": "^3.18.0",
        "css-loader": "^6.3.0",
        "css-minimizer-webpack-plugin": "^3.0.2",
        "eslint": "^7.32.0",
        "eslint-config-airbnb": "^18.2.1",
        "eslint-plugin-import": "^2.24.2",
        "html-loader": "^2.1.2",
        "html-webpack-plugin": "^5.3.2",
        "less": "^4.1.1",
        "less-loader": "^10.0.1",
        "mini-css-extract-plugin": "^2.3.0",
        "style-loader": "^3.2.1",
        "webpack": "^5.53.0",
        "webpack-cli": "^4.8.0",
        "webpack-dev-server": "^4.2.1"
      },
      "browserslist": {
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ],
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ]
      },
      "dependencies": {
        "@babel/core": "^7.15.5",
        "eslint-loader": "^4.0.2",
        "optimize-css-assets-webpack-plugin": "^6.0.1",
        "postcss-loader": "^6.1.1",
        "postcss-preset-env": "^6.7.0"
      },
      "eslintConfig": {
        "extends": "airbnb-base"
      }
    }

文件目录:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeV93X3hfaw_size_13_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeV93X3hfaw_size_13_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/28d4f3804de246ec974dd5712d827558.png