Webpack学习笔记（5）

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 等技术提升用户体验。