1.拆分开发环境和生产环境配置

很多配置在开发环境和生产环境存在不一致的情况，比如开发环境没有必要设置缓存，生产环境需要设置公共路径等等。

2.公共路径

使用publicPath配置项，可以通过它指定应用程序中所有资源的基础路径。

webpack.config.js中output增加publicPath：

打开app.html发现每个路径前多了一个域名，这个域名可以指定为前端域名或cdn服务器域名都可以：

3.环境变量

环境变量可以帮我们消除webpack.config.js配置文件中的开发环境和生产环境的差异。

调整webpack.config.js为函数形式，并且将mode修改为通过env进行传参；

当需要使用生产环境时：npx webpack --env production

使用terser-webpack-plugin 对script文件进行压缩；

安装：npm install terser-webpack-plugin -D

配置一下：

执行npx webpack --env production后代码会被打包压缩生成LICIENCE文件；

执行npx webpack --env development后没有被压缩；

4.拆分配置文件

如果都用判断的方法来区分生产和开发环境，很麻烦，所以将配置文件拆分为两个，专门应对两个环境。

创建一个config文件夹，分别存放两个js文件对应两个环境：

在开发环境将mode设置为‘development’，去除不需要的一些插件例如压缩、公共域名等；

在生产环境将mode设置为‘production’，去除不需要的一些插件例如dev-server等；

运行时指定配置文件 npx webpack -c ./config/webpack.config.prod.js或 npx webpack -c ./config/webpack.config.dev.js即可。

5.npm脚本

每次打包或者启动服务时，要在命令行输入很长的命令，如何优化？

在package.json中配置script：

这样就可以直接执行npm run start和npm run build.

如果想要隐藏一些性能提示信息，可以在performance中配置：

6.提取公共配置

生产环境和开发环境分开配置后发现，会有大量重复的代码，可否抽离到一个配置文件，作为公共配置？

创建一个config文件夹下分别放三个js文件：公共、开发、生产

在webpack.config.common.js中存放二者共有的代码；其余两个环境js文件保留自己特有的代码。

简化后的webpack-config-dev.js：

简化后的webpack-config-prod.js：

然后在config文件夹下的webpack.config.js中合并环境配置，使用webpack-merge：

通过env携带参数指定环境配置，所以package.json脚本中也要修改：

tips：

开发环境：

• 目标是快速开发和调试，配置注重灵活性和调试能力。
• 使用未优化的代码和资源，支持本地开发工具和代理。

构建工具配置

• 使用 webpack-dev-server 或类似工具，提供实时重新加载和热更新。
• 使用 Source Maps 来帮助调试（如 devtool: 'eval-source-map'）。
• 不进行代码压缩和优化，保留原始代码结构以便调试。

静态资源处理

• 直接提供未优化的静态资源（如图片、字体），不进行压缩或其他处理。
• 使用 publicPath: '/' 或自定义路径来提供静态文件。

API 请求

• 使用代理（如 webpack-dev-server 的 proxy 配置）将请求转发到本地或远程开发服务器。
• 可能使用 Mock API 来模拟数据。

日志与调试

• 启用详细的日志输出（如 console.log 和调试信息）。
• 使用开发工具（如 Chrome DevTools）来调试代码。

依赖管理

• 安装所有依赖（包括开发依赖和生产依赖）。
• 可能使用未发布的库或本地构建的工具。

生产环境：

• 目标是高性能、稳定性和安全性，配置注重优化和保护。
• 使用压缩、混淆、缓存和 CDN 等技术提升用户体验。

构建工具配置

• 使用 Webpack 或其他构建工具进行代码压缩（如 TerserPlugin）、混淆和优化。
• 禁用 Source Maps（或生成生产环境专用的 Minified Source Maps）。
• 使用 Tree Shaking 和 Code Splitting 来减少代码体积和加载时间。
• 对静态资源进行优化（如图片压缩、字体转 WebP）并上传到 CDN。

静态资源处理

• 使用缓存控制（如 Cache-Control 头部）来提升资源加载速度。
• 配置 publicPath: '/static/' 或 CDN 路径。

API 请求

• 直接请求真实的 API 服务器，可能需要配置 HTTPS 和 CORS。
• 优化 API 请求（如使用 GraphQL 或合并请求）以减少延迟。

日志与调试

• 移除或禁用所有调试代码（如删除 console.log）。
• 使用错误日志记录工具（如 Sentry、ELK）来监控和分析生产环境的问题。

依赖管理

• 只安装生产依赖（如 npm install --production）。
• 使用经过测试和稳定的依赖库。