webpack5区分生产环境打包文件（通过环境变量区分）

webpack5区分生产环境打包文件

package.json

{
  "name": "webpeck",
  "version": "1.0.0",
  "description": "",
  "main": "./index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "autoprefixer": "^10.3.1",
    "babel-loader": "^8.2.2",
    "core-js": "^3.16.2",
    "css-loader": "^6.2.0",
    "file-loader": "^6.2.0",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.2",
    "mini-css-extract-plugin": "^2.2.0",
    "optimize-css-assets-webpack-plugin": "^6.0.1",
    "postcss-loader": "^6.1.1",
    "style-loader": "^3.2.1",
    "url-loader": "^4.1.1",
    "webpack": "^5.50.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  },
  "browserslist": [
    "last 1 version",
    "> 1%"
  ]
}

webpack.config.js

/* 
    webpack.config.js  webpack的配置文件
    作用：当运行webpack的指令时，会加载其中的配置

    所有的构建工具都是基于nodejs运行的，模块化采用的是commenjs
*/
// resolve用来拼接绝对路径
const { resolve } = require('path');
// 引入html-webpack-plugin   作用：复制html文件
const htmlPlugin = require('html-webpack-plugin');
// 引入mini-css-extract-plugin  作用：将css文件从中提取出来
const miniCss = require('mini-css-extract-plugin');
// 引入optimize-css-assets-webpack-plugin  作用：用于压缩css
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = (env,argv)=>{
    const config = {
        // 入口起点
        // entry: "./src/js/index.js",
        // 多入口打包：
        entry: {
            'index':'./src/js/index.js',
            'about':'./src/js/about.js'
        },
        // 输出
        output: {
            // 输出文件名
            filename: "js/[name].[contenthash:8].js",
            // 输出路径  __dirname，nodejs的变量，代表当前的绝对路径
            path: resolve(__dirname, "build")
        },
        // 优化策略：配置提取公共资源
        optimization: {
            splitChunks: {
                chunks:'all'
            }
        },
        // 启用source-map定位问题
        devtool:'source-map',
        // loader配置
        module: {
            // 在rules中配置详细的loader
            rules: [
                // 处理css文件
                {
                    // 匹配文件名，文件名结尾为.css的文件
                    test: /\.css$/,
                    // 使用loader进行处理
                    use: [
                        // use数组中执行顺序，从右到左，从下到上   依次执行
                        // 创建一个style标签，将js中的样式插入到style标签中，再插入到head中
                        // 'style-loader',
                        // 不添加到页面的style中，单独提取css文件
                        miniCss.loader,
                        // 将css文件变成commenjs模块加载进js中，里面内容是样式字符串
                        'css-loader',
                        // 添加css前缀（为了浏览器兼容性）
                        'postcss-loader'
                    ]
                },
                // 处理css中引入的图片资源
                {
    
                    // 问题：处理不了html中的img图片
                    test: /\.(jpg|JPG|png|PNG|gif|GIF)$/,
                    // 使用loader：url-loader, file-loader
                    loader: 'url-loader',
                    options: {
                        // 图片大小如果小于8kb,就会被base64处理
                        // 优点：减轻服务器的压力
                        // 缺点：图片体积会变大，文件请求速度会变慢
                        limit: 8 * 1024,
                        // 问题：因为url-loader默认使用的是es6模块化解析，而html-loader引入图片使用的是commonjs
                        // 解析img引入的图片就会出现问题
                        // 所以用下面这行代码进行解决，关闭es6的模块化解析，使用commomjs解析
                        esModule: false,
                        // 打包后的图片名太长，所以我们可以给图片名重命名
                        // 取hash值的前十位，并使用原来的图片扩展名[ext]
                        name: '[hash:10].[ext]',
                        // 指定打包指向目录
                        outputPath: 'img/'
                    }
                },
                // 处理html中img引入的图片资源
                {
                    test: /\.html$/,
                    // 处理html中的img引入的图片，引入后会被url-loader进行处理
                    // loader: 'html-loader',
                    loader: 'html-loader',
                    options: {
                        esModule: false,
                    }
    
                },
                // 处理其他资源
                {
                    // 排除掉所需资源
                    exclude: /\.(css|html|js|jpg|JPG|png|PNG|gif|GIF)$/,
                    // 使用file-loader
                    loader: 'file-loader',
                    options: {
                        name: '[contenthash:10].[ext]',
                        outputPath: 'media'
                    },
    
                },
                // 配置babel
                {
                    // 匹配
                    test: /\.m?js$/,
                    // 排除配置文件，不用转译
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            // 第二次构建时，会读取之前的缓存
                            cacheDirectory:true,
                            presets: [
                                [
                                    '@babel/preset-env',
                                    {
                                        // 指定按需加载
                                        useBuiltIns:"usage",
                                        // 指定core-js版本
                                        corejs:3,
                                        targets: "defaults"
                                    }
                                ]
                            ]
                        }
                    }
                }
            ]
        },
        // plugins配置
        plugins: [
            // html-webpack-plugin
            // 功能：默认会创建一个空的html文件，并且将打包的资源引入到html中
            // 创建一个html的plugin对象
            new htmlPlugin({
                // 作用：复制目录下的html文件，并引入资源
                template: './src/index.html',
                // 指定要加载的打包js文件
                chunks:['index'],
                minify: {
                    // 清理空格和换行符
                    collapseWhitespace:true,
                    // 保持单行标签的尾部斜杠
                    keepClosingSlash:true,
                    // 去掉html注释
                    removeComments:true,
                    // 当值与默认值匹配时删除属性
                    removeRedundantAttributes:true,
                    // type="text/javascript"从script标签中删除。其他type属性值保持不变
                    removeScriptTypeAttributes:true,
                    // type="text/css"从style和link标记中删除。其他type属性值保持不变
                    removeStyleLinkTypeAttributes:true,
                    // doctype用简短的 (HTML5) doctype替换
                    useShortDoctype:true
                }
            }),
            // 提取css文件的配置
            new miniCss({
                filename: 'css/[name].[contenthash:8].css'
            }),
            // 压缩css配置
            new OptimizeCssAssetsPlugin()
        ],
        // 打包环境
        // mode: 'development',// 开发模式
        mode:'production',  // 生产模式
    
        // 启动devServer指令：npx webpack-dev-server
        devServer: {
            // 打包目标文件目录
            contentBase: resolve(__dirname, 'build'),
            // 启动gzip压缩
            compress: true,
            // 端口号
            port: 3000,
            // 启动成功自动打开浏览器
            open: true
        }
    }
    // 判断是否是开发环境打包
    if(env.development) {
        config.mode = 'development',
        config.plugins = [
            // html-webpack-plugin
            // 功能：默认会创建一个空的html文件，并且将打包的资源引入到html中
            // 创建一个html的plugin对象
            new htmlPlugin({
                // 作用：复制目录下的html文件，并引入资源
                template: './src/index.html',
                // 指定要加载的打包js文件
                chunks:['index']
            }),
            // 提取css文件的配置
            new miniCss({
                filename: 'css/[name].[contenthash:8].css'
            })
        ]
    }
    // 返回配置
    return config;
}

如需生产环境打包(会压缩文件)
webpack

如需开发环境打包(不会压缩文件)
webpack --env development