webpack5最新搭建配置——>1

package.json

<text>
{
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.0",
    "babel-loader": "^8.2.3",
    "core-js": "^3.19.1",
    "css-loader": "^6.5.1",
   "css-minimizer-webpack-plugin": "^3.1.3",
    "eslint": "^7.32.0",
   "eslint-config-airbnb-base": "^15.0.0",
    "eslint-loader": "^4.0.2",
   "eslint-plugin-import": "^2.25.3",
    "file-loader": "^6.2.0",
    "html-loader": "^3.0.1",
   "html-webpack-plugin": "^5.5.0",
  "less-loader": "^10.2.0",
   "mini-css-extract-plugin": "^2.4.4",
   "postcss-loader": "^6.2.0",
   "postcss-preset-env": "^6.7.0",
    "style-loader": "^3.3.1",
    "url-loader": "^4.1.1",
    "webpack": "^5.63.0",
   "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.4.0"
  },
  "browserslist": {
    "development": [
     "last 1 chrome version",
     "last 1 firefox version",
     "last 1 safari version"
   ],
  "production": [
    ">0.2%",
   "not dead",
    "not op_mini all"
    ]
  },
 "eslintConfig": {
   "extends": "airbnb-base"
	 }
}
</text>

webpack.config.js

---

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const  CssMinimizerPlugin  =  require ( "css-minimizer-webpack-plugin" ) 	;//压缩css
// process.env.NODE_ENV='development';
const commonCssLoader = [
    MiniCssExtractPlugin.loader,//取代style-loader。作用：提取js中的css成单独文件
    'css-loader',
    'postcss-loader'
        /*
                 css兼容性处理： postcss --> postcss-loader postcss-preset-env
                 帮postcss找到package.json中browserslist里面的配置，通过加载指定的css兼容性样式
                 "browserslist": {
                    //  开发环境---》设置node环境变量process.env.NODE_ENV='development'
                        "development": [
                          "alst 1 chrome version",
                          "alst 1 firefox version",
                          "alst 1 safari version"
                        ],
                        // 默认是看生产环境
                        "production": [
                          ">0.2%",
                          "not dead",
                          "not op_mini all"
                        ]
                      }
                */        
]
module.exports={
entry:'./src/js/index.js',
output:{
    filename:'js/built.js',     //打包输出的文件
    path: path.resolve(__dirname,'build') //打包输出地址文件夹
},
performance: {//关闭资产过大警告
    hints: false,
  },
module:{
    rules:[
        // loader的配置
        {
            test: /\.js$/,
            include: path.resolve(__dirname, 'src'),
            enforce: 'pre',
            loader:'eslint-loader',//配置eslint语法规范
            options:{
                fix:true
                }
        },
        {
                // babel-loader基本js兼容性处理，只能转换基本语法如promise不能转换
            test: /\.js$/,
            include: path.resolve(__dirname, 'src'),
            loader:'babel-loader',
            options:{
            presets:[
                [
                    '@babel/preset-env',
                    {
                        // 按需加载
                        useBuiltIns: 'usage',
                        // 指定core-js版本
                        corejs:{
                            version: 3.19
                        },
                        targets:{
                            chrome: '60',
                            firefox: '60',
                            ie: '9',
                            safari: '10',
                            edge: '17'
                        }
                    }
                ]
            ]
            }
        },
        {
            // 处理css
            test:/\.css$/,
            use:[
                ...commonCssLoader
            ],
        },
        {
            test:/\.less$/,
            use:[
                ...commonCssLoader,
                'less-loader'
            ]
        },
        {
            // 处理图片
            test:/\.(jpg|png|svg|webp|gif)$/,
            loader:'url-loader',
            options:{
                limit: 8 * 1024,
                name:'[hash:7].[ext]',
                // 关闭es6模块化
                esModule:false,
                outputPath:'imgs'
            }
        },
        {
            // 处理html中img资源
            test:/\.html$/,
            loader:'html-loader'
        },
        {
            // 处理其它资源
            exclude:/\.(html|js|css|less|jpg|png|gif)/,
            loader:'file-loader',
            options:{
                name:'[hash:7].[ext]',
                outputPath:'media'
            }
        }
    ]
},
optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  },
plugins:[
   new HtmlWebpackPlugin({
       template:'./src/index.html',
       minify:{//html最小化
           collapseWhitespace:true,//移除空格
           removeComments:true//移除注释
       }
   }),
   new MiniCssExtractPlugin({
       filename:'css/built.css'
   }),
],
mode:'production',
devServer:{
    // contentBase:resolve(__dirname,'build'), //webpack4以下用法
    static: { // static: ['assets']
        directory: path.join(__dirname, 'build'),
    },
    compress:true,
    port:3000,
    open:true,
}

}

---

注意：postcss版本兼容性问题，因此不能直接在webpack.config.js中使用，需要在根目录创建postcss.config.js文件引入

module.exports={
plugins:[
    require('postcss-preset-env')
]

}