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

这个模式我们做两件事情：
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