webpack5下打包配置，包含css,less,sass,图片,js,其他文件

webpack.config.js

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const EslintPlugin = require('eslint-webpack-plugin')
const WorkboxWebpackPlugin = require('workbox-webpack-plugin')

const config = process.env.NODE_ENV === 'production'

// 复用loader
const commonCssLoader = [
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
        loader: "postcss-loader",
        options: {
            postcssOptions: {
                plugins: ['postcss-preset-env']
            }
        }
    }
]

module.exports = {
    // 但入口写法
    entry: ['./src/index.js', './src/index.html'],
    // 多入口写法
    // entry: {
    //     main: './src/index.js',
    //     test: './src/index1.js'
    // },
    output: {
        filename: "js/[name].[contenthash:10].js",
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                oneOf: [
                    {
                        test: /\.css$/,
                        use: [...commonCssLoader]
                    },
                    {
                        test: /\.less$/,
                        use: [
                            ...commonCssLoader,
                            'less-loader'
                        ]
                    },
                    {
                        test: /\.scss$/,
                        use: [
                            ...commonCssLoader,
                            "sass-loader"
                        ]
                    },
                    {
                        test: /\.(png|jpg|gif)$/,
                        type: "asset",
                        parser: {
                            dataUrlCondition: {
                                maxSize: 2 * 1024
                            }
                        },
                        generator: {
                            filename: 'img/[name].[hash:10][ext]',
                        }
                    },
                    {
                        test: /\.html$/,
                        loader: "html-loader"
                    },
                    {
                        test: /\.js$/,
                        exclude: /node_modules/,
                        use: [
                            {
                                loader: "thread-loader",
                                options: {
                                    workers: 2  //限制进程
                                }
                            },
                            {
                                loader: "babel-loader",
                                options: {
                                    presets: [
                                        [
                                            '@babel/preset-env',
                                            {
                                                useBuiltIns: 'usage',
                                                corejs: {
                                                    version: 3
                                                },
                                                targets: {
                                                    chrome: '60',
                                                    firefox: '60',
                                                    ie: '9',
                                                    safari: '10',
                                                    edge: '17'
                                                }
                                            }
                                        ]
                                    ],
                                    cacheDirectory: true
                                }
                            }
                        ],
                    },
                    {
                        exclude: /\.(css|js|html|less|scss|jpg|png|gif|ttf|woff2?|eot)$/,
                        loader: "file-loader",
                        options: {
                            name: '[hash:10].[ext]',
                            outputPath: 'media'
                        },
                        type: 'javascript/auto'
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            minify: {
                collapseWhitespace: true,
                removeComments: true,
            }
        }),
        new OptimizeCssAssetsWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: 'css/built.[contenthash:10].css'
        }),
        new EslintPlugin({
            fix: true,
        }),
        new WorkboxWebpackPlugin.GenerateSW({
            clientsClaim: true,
            skipWaiting: true,
        })
    ],
    optimization: {
        splitChunks: {
            chunks: "all"
        }
    },
    mode: "development",
    devServer: {
        static: {
            directory: resolve(__dirname,'build')
        },
        open: true,
        port: 3000,
        // watchFiles: ['./src/index.html'],
        hot: true, //模块热替换
    },
    devtool: config ? 'source-map' : 'eval-source-map'
}

对应的package.json

//package.json

"devDependencies": {
    "@babel/core": "^7.17.5",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.16.11",
    "babel-loader": "^8.2.3",
    "core-js": "^3.21.1",
    "css-loader": "^6.6.0",
    "eslint": "^8.9.0",
    "eslint-config-standard": "^16.0.3",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-webpack-plugin": "^3.1.1",
    "file-loader": "^6.2.0",
    "html-loader": "^3.1.0",
    "less": "^4.1.2",
    "less-loader": "^10.2.0",
    "mini-css-extract-plugin": "^2.5.3",
    "optimize-css-assets-webpack-plugin": "^6.0.1",
    "postcss-loader": "^6.2.1",
    "postcss-preset-env": "^7.4.1",
    "sass": "^1.49.7",
    "sass-loader": "^12.6.0",
    "scss": "^0.2.4",
    "scss-loader": "0.0.1",
    "style-loader": "^3.3.1",
    "thread-loader": "^3.0.4",
    "url-loader": "^4.1.1",
    "webpack": "^5.69.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4",
    "workbox-webpack-plugin": "^6.4.2"
  },
  "dependencies": {
    "html-webpack-plugin": "^5.5.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": "standard",
    "env": {
      "browser": true
    }
  }

1)分五大模块：entry,output,module,plugins,mode
*      2)html文件的打包和压缩
*          npm i html-webpack-plugin -S  使用html-webpack-plugin插件进行解析打包压缩编译，相关参数在实例化该插件时配置，如下：
*          new HtmlWebpackPlugin({
*              collapseWhitespace: true,
*              removeComments: true,
*          })
*      3)css文件的打包，兼容及压缩
*          npm i mini-css-extract-plugin css-loader -S
*          1)使用mini-css-extract-plugin将css提取为一个单独的文件；
*
*          npm i postcss-loader postcss-preset-env -S
*          2)使用postcss-loader配合postcss-preset-env实现css的兼容，同时需要配置package.json中的browsersList: 如下：
*          browserList: {
*              development: {
*                  "last 1 chrome version",
*                  "last 1 firefox version",
*                  "last 1 safari version"
*              }
*          }
*
*          npm i optimize-css-assets-webpack-plugin -S
*          3)使用optimize-css-assets-webpack-plugin对css文件进行压缩
*
*      4)js文件的语法检查及兼容处理
*
*          npm i eslint-webpack-plugin eslint -S
*          1)使用eslint-webpack-plugin对js文件进行语法检查，只需要在plugin中写如下配置即可实现语法的校验和校正:(v5)使用eslint-config-standard库，需要安装eslint-plugin-import   eslint-plugin-node   eslint-plugin-promise；再在package.json中esLintConfig中设置extends: standard
*              new EslintWebpackPlugin({
*                  fix: true
*              })
*          然而在v4版本中使用eslint-loader,npm i eslint-loader -D,
*          
*          2)使用babel-loader进行简单语法的兼容处理 （ npm install -D babel-loader @babel/core @babel/preset-env ）
*
*          3)js文件兼容性全面处理，npm i core.js -S,配置如下：
*          presets: [
                        [
                            '@babel/preset-env',
                            {
                               useBuiltIns: 'usage',
                               corejs: {
                                   version: 3
                               },
                               targets: {
                                   chrome: 60,
                                   firefox: '60',
                                   ie: '9',
                                   safari: '10',
                                   edge: '17'
                               }
                            }
                       ]
                   ]
*
*     5)图片文件打包：
*          在v5版本中url-loader已经废弃了，需要使用assets-module模块对图片进行打包，具体配置见webpack.config.json
*     6)对html和css中引入的图片做处理
*          使用html-loader,(npm i html-css -D) 配置见webpack.config.json