Webpack中模式(Mode)
提供 mode 配置选项，告知 webpack 使用相应模式的内置优化。
'none'| 'development' | 'production'
| 选项 | 描述 |
| development | 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development . 为模块 |
production |
会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production 。为模块和 FlagDependencyUsagePlugin ， FlagIncludedChunksPlugin ， ModuleConcatenati TerserPlugin 。 |
| none | 不使用任何默认优化选项 |
实现模式(Mode)有两种方式：
第一种：只需在配置对象中提供 mode 选项
module.exports = { mode: 'development', };
第二种：从 CLI 参数中传递
webpack --mode=development
Webpack中使用DevServer
到目前为止 webpack 基本上可以正常使用了，但在实际开发中你可能会需要：
1、提供 HTTP 服务而不是使用本地文件预览；
2、监听文件的变化并自动刷新网页，做到实时预览；
3、支持 Source Map，以方便调试。
对于这些， Webpack 都为你考虑好了。Webpack 原生支持上述第2、3点内容，结合官方提供的开发工具 DevServer 也可以很方便地做到第1点。 DevServer 会启动一个 HTTP 服务器用于服务网页请求，同时会帮助启动 Webpack ，并接收 Webpack 发出的文件更变信号，通过 WebSocket 协议自动刷新网页做到实时预览
安装服务器依赖
npm install -g webpack-dev-server@4.9.2 npm install --save-dev webpack-dev-server@4.9.2
修改配置文件
const path = require('path'); module.exports = { devServer: { // 服务器打开目录 static: path.join(__dirname,'public'), // 开启压缩 compress: true, // 设置端口 port: 9000, // 热更新 hot: true, // 自动打开浏览器 open: true, //使用 History 路由模式时，若404错误时被替代为 index.html historyApiFallback: true } };
服务器运行方式
1、webpack serve
2、webpack-dev-server
温馨提示
修改配置文件的情况下，是无法热更新的，需要重启服务器，热更新只对代码剩下 src
配置快捷运行方案
配置快捷运行方案可以方便我们统一运行方式，不然我们需要记忆更多关键词例如： webpack 、 webpack serve 、 webpack-dev-server 等等
修改方案
在 package.json 中， scripts 中进行配置
"scripts": { "start": "webpack", "dev":"webpack serve" }
温馨提示
如果在 package.json 文件中，并没有找到 scripts ,可以通过执行 npm init 重新生成 package.json 文件
运行方式
npm start // 相当于运行webpack npm run dev // 相当于运行webpack serve
开发模式与生产模式分离
在开发的过程中，我们一般会将开发环境进行区分：
1、开发环境
2、测试环境
3、生产环境
4、...
开发模式
开发模式是为开发者更方便开发而存在的，在开发模式下，一般是为了更方便的调试，所以错误信息会提示很全面，并且存在热更新状态等
生产模式
生产模式是为了项目打包上线而存在的，在生产模式下，会去掉更多的错误提示，让想打包尽可能变小等
webpack 配置开发模式和生产模式
在 webpack 中，我们可以区分开发模式和生产模式，例如 mode 就有 development 和 production 的区别
安装依赖：
webpack-merge 可以用来合并多个配置文件：
npm install --save-dev webpack-merge@5.8.0
创建开发和生产模式文件
在项目根目录下创建 webpack.dev.config.js 和 webpack.prod.config.js 文件
// webpack.dev.config.js const commonConfig = require("./webpack.config"); const path = require('path'); const { merge } = require("webpack-merge"); const devConfig = { mode: 'development', devServer: { // 服务器打开目录 static: path.join(__dirname,'public'), // 开启压缩 compress: true, // 设置端口 port: 9000, // 热更新 hot: true, // 自动打开浏览器 open: true, //使用 History 路由模式时，若404错误时被替代为 index.html historyApiFallback: true } } module.exports = merge(commonConfig,devConfig)
/ webpack.prod.config.js const commonConfig = require("./webpack.config"); const { merge } = require("webpack-merge"); const prodConfig = { mode: 'production' } module.exports = merge(commonConfig,prodConfig)
重新配置运行方式
"scripts": { "start": "webpack --config webpack.prod.config.js", "dev": "webpack-dev-server --config webpack.dev.config.js" }
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解（学习总结---从入门到深化）（下）：https://developer.aliyun.com/article/1420345
