webpack5生产环境基本配置

webpack.config.js

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const htmlWebpackPlugin = require('html-webpack-plugin')

const commonCssLoader = [
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
        loader: "postcss-loader",
        options:{
            //css兼容性配置
            postcssOptions: {
                plugins: [
                    [ 
                        require('postcss-preset-env')()
                    ]
                ]
            }
        }
    }
];
module.exports = {
    entry:'./src/index.js',
    output:{
        publicPath: '/',
        filename:'index.js',
        path:path.resolve(__dirname,'dist')
    },
    mode:'production',
    devServer: {
        contentBase: path.resolve(__dirname, "dist"),
        compress: true,
        port: 9000,
        open:true
    },
    module:{
        rules:[
        	{
                test:/\.js$/,
                exclude:/node_modules/,
                loader:'eslint-loader',
                enforce:'pre',//优先执行
                options:{
                    fix:true
                }
            },
        	{
        		//以下loader只执行一次，不能有两个配置处理一个文件
        		oneOf:[
                    {
                        test:/\.css$/,
                        // exclude:/iconfont.css/,
                        use:[...commonCssLoader]
                    },
                    {
                        test:/\.less$/,
                        use:[...commonCssLoader,'less-loader']
                    },
                    {
                        test:/\.scss$/,
                        use:[...commonCssLoader,'sass-loader']
                    },
                    {
                        test:/\.js$/,
                        exclude:/node_modules/,
                        loader:'babel-loader',
                        options:{
                            presets:[
                                ['@babel/preset-env',
                                    {
                                        //按需加载
                                        useBuiltIns:'usage',
                                        //指定corejs版本
                                        corejs:{
                                            version:3
                                        },
                                        //指定兼容性版本
                                        targets:{
                                            chrome:'60',
                                            firefox:'60',
                                            ie:'9',
                                            safari:'10',
                                            edge:'17'
                                        }
                                    }
                                ]
                            ]
                        }
                    },
                    {
                        test:/\.(jpg|png|gif)$/,
                        loader:'url-loader',
                        options:{
                            limit:8*1024,
                            esModule:false,//关闭es6模块化
                            outputPath:'assets/image/',  //输出路径	
                            name:'[hash:10].[ext]'//[hash:10]对文件重命名，取hash前10位 [ext]取文件原来的扩展名
                        }
                    },
                    {
                        test:/\.html$/,
                        loader:'html-loader'
                    },
                    {
                        exclude:/\.(css|js|html|less|scss|jpg|png|gif)$/,
                        loader:'file-loader',
                        options:{
                            outputPath:'./assets/base/',
                        }
                    }
                ]
        	},
           
        ]
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename:'css/style.css'
        }),
        new OptimizeCssAssetsWebpackPlugin(),
        new htmlWebpackPlugin({
            filename:'index.html',
            template:'./public/index.html',
            minify:{//压缩html
                collapseWhitespace:true,
                removeComments:true
            }
        })
    ]
}

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  "author": "yanliting",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.12.7",
    "babel-loader": "^8.2.2",
    "core-js": "^3.8.0",
    "corejs": "^1.0.0",
    "css-loader": "^5.0.1",
    "eslint": "^7.14.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.22.1",
    "file-loader": "^6.2.0",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.0",
    "image-webpack-loader": "^7.0.1",
    "less": "^3.12.2",
    "less-loader": "^7.1.0",
    "mini-css-extract-plugin": "^1.3.1",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "postcss-loader": "^4.1.0",
    "postcss-preset-env": "^6.7.0",
    "sass": "^1.30.0",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.10.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "nop op_mini all"
    ]
  },
  "eslintConfig": {
    "extends": "airbnb-base"
  },
  "dependencies": {}
}