webpack5开发环境、生产环境配置 (三)

***开发环境：***就是我们开发代码时使用的模式。

这个模式我们做两件事情：

1、编译代码，使浏览器能识别运行

2、代码质量检查，树立代码规范

***生产环境：***开发完成代码后，我们需要得到代码将来部署上线。

这个模式我们做两件事情：

1. 优化代码运行性能
2. 优化代码打包速度

准备工作

首先我们准备上面写的配置文件两份，分别命名：webpack.dev.js、webpack.prod.js放在config文件夹下，目录结构如下：

├── webpack-test (项目根目录)
    ├── config (Webpack配置文件目录)
    │    ├── webpack.dev.js(开发模式配置文件)
    │    └── webpack.prod.js(生产模式配置文件)
    ├── node_modules (下载包存放目录)
    ├── src (项目源码目录，除了html其他都在src里面)
    │    └── 略
    ├── public (项目html文件)
    │    └── index.html
    ├── .eslintrc.js(Eslint配置文件)
    ├── babel.config.js(Babel配置文件)
    └── package.json (包的依赖管理配置文件)

2. 修改 webpack.dev.js 配置文件

修改的3处：

1、因为原来的webpack.config.js文件中位置发生了变化，所以配置中绝对的路径都要往上退回一层；

2、开发环境启用devserver开发服务器，会自动编译内容到内存环境，所以这里output的配置可以取消

3、注意mode设置为：development

const path = require('path');
const ESLintWebpackPlugin = require("eslint-webpack-plugin");

module.exports = {
    //入口文件
    entry: {
        index: './src/main.js',
        admin: './src/main2.js',
    },
    //出口文件
    output: {
        path: undefined, // 开发模式没有输出，不需要指定输出目录
        filename: "static/js/[name]main.js", // 将 js 文件输出到 static/js 目录中，注意这个是多入口文件，记得带上变量[name]
        //clean: true, // 开发模式没有输出，不需要清空输出结果
    },
    module: {
        rules: [{
                // 用来匹配 .css 结尾的文件
                test: /\.css$/,
                // use 数组里面 Loader 执行顺序是从右到左
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"],
            },
            {
                test: /\.sass$/,
                use: ["style-loader", "css-loader", "sass-loader"],
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
                    }
                },
                //设置图片打包后的路径
                generator: {
                    filename: 'dist/images/[hash:10][ext][query]'
                }
            },
        ],
    },
    plugins: [
        new ESLintWebpackPlugin({
            // 指定检查文件的根目录
            context: path.resolve(__dirname, "src"),
        }),
    ],
   devServer: {
     host: "localhost", // 启动服务器域名
     port: "3000", // 启动服务器端口号
     open: true, // 是否自动打开浏览器
   },
    //模式
    mode: 'development',
}

运行开发模式的指令：

npx webpack serve --config ./config/webpack.dev.js

3. 修改 webpack.prod.js 配置文件

配置文件需要修改的有4处：

1、因为原来的webpack.config.js文件中位置发生了变化，所以绝对路径要要回退上一级目录。相对路径相对命令运行目录不需要改变。；

2、生产环境要配置文件编译输出目录，和文件清空上一次的配置。

3、mode设置为：development

4、生产环境中没有devServer配置

const path = require('path');
const ESLintWebpackPlugin = require("eslint-webpack-plugin");

module.exports = {
    //入口文件
    entry: {
        index: './src/main.js',
    },
    //出口文件
    output: {
        path: path.resolve(__dirname, "../dist"),
        // 输出文件名
        filename: "main.js",
        clean: true,  // 生产环境下需要清除内容
    },
    module: {
        rules: [{
                // 用来匹配 .css 结尾的文件
                test: /\.css$/,
                // use 数组里面 Loader 执行顺序是从右到左
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"],
            },
            {
                test: /\.sass$/,
                use: ["style-loader", "css-loader", "sass-loader"],
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
                    }
                },
                //设置图片打包后的路径
                generator: {
                    filename: 'dist/images/[hash:10][ext][query]'
                }
            },
        ],
    },
    plugins: [
        new ESLintWebpackPlugin({
            // 指定检查文件的根目录
            context: path.resolve(__dirname, "src"),
        }),
    ],
    // 开发服务器
    // devServer: {
    //     host: "localhost", // 启动服务器域名
    //     port: "3000", // 启动服务器端口号
    //     open: true, // 是否自动打开浏览器
    // },

    //模式
    mode: 'development',
}

运行生产模式的指令：

npx webpack --config ./config/webpack.prod.js

4. 配置运行指令

为了方便运行不同模式的指令，我们将指令定义在 package.json 中 scripts 里面

// package.json
{
  // 其他省略
  "scripts": {
      "start": "npm run dev",
      "dev": "npx webpack serve --config ./config/webpack.dev.js",
      "build": "npx webpack --config ./config/webpack.prod.js"
  }
}

以后启动指令：

• 开发模式：npm start 或 npm run dev
• 生产模式：npm run build