webpack生产环境基本配置

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"
  }
}

文件目录: