如何区分开发环境
目前我们所有的webpack配置信息都是放到一个配置文件中的：webpack.config.js
-
当配置越来越多时，这个文件会变得越来越不容易维护；
-
并且某些配置是在开发环境需要使用的，某些配置是在生成环境需要使用的，当然某些配置是在开发和生成环境都会使用的；
-
所以，我们最好对配置进行划分，方便我们维护和管理；
那么，在启动时如何可以区分不同的配置呢？
-
方案一：编写两个不同的配置文件，开发和生成时，分别加载不同的配置文件即可；
-
方案二：使用相同的一个入口配置文件，通过设置参数来区分它们；
方案一:
1.创建三个文件夹
-config
-- webpack.comm.config.js 公共环境的配置文件
-- webpack.dev.config.js 开发环境下的配置文件
-- webpack.prod.config.js 生产环境下的配置文件
2.配置 package.json
3.分离代码
-
- 首先将 webpack.config.js 里面的代码 复制到 webpack.comm.config.js(公共环境的配置文件)
-
- 然后拆分 webpack.comm.config.js(公共环境的配置文件)
-
- 把开发依赖的 放在 webpack.dev.config.js 里
-
- 把生产依赖的 放在 webpack.prod.config.js 里
4. 代码合并
npm install webpack-merge -D
-
因为 开发环境的代码 和 生产环境的代码都被分割出去了
-
剩下的就是 webpack.comm.config.js(公共环境的配置文件), 生产和开发都需要的代码
-
所以 要把公共的代码 合并到 开发环境 和 生产环境, 这样就都有公共代码了!!
5.代码
webpack.dev.config.js(开发环境配置文件)
/* 开发环境
* @Date: 2021-09-18 20:58:43
*/
const {merge} = require('webpack-merge') //导入合并的包
const commonConfig = require('./webpack.comm.config')// 导入公共代码
module.exports = merge(commonConfig,{
// development 开发阶段, 会设置development
mode: "development",
// 设置source-map, 建立js映射文件,方便调试
devtool: "source-map",
devServer:{
// contentBase:"./public" // 项目构建后路径
hot:true,// 开启HMR功能
host:"0.0.0.0", // 同一局域网下通过ip可以访问此服务
port:7777,// 端口号
open:true,// 自动打开浏览器
compress:true, // 自动gzip压缩
proxy:{// 服务器代理, 解决开发环境跨域问题
'/api':{ // 当以api开头请求, 就会把请求转发到另外一个服务器(8888)
target:'http:localhost:8888',
pathRewrite:{
'^/api':''// 请求路径重写; 将/api 替换成 ""空, 防止接口上多一个api字符
}
}
}
},
})
webpack.prod.config.js(生产环境配置文件)
/* 生产环境
* @Date: 2021-09-18 20:58:53
*/
const { CleanWebpackPlugin } = require("clean-webpack-plugin") // 自动删除
const CopyWebpackPlugin = require("copy-webpack-plugin") // 用来拷贝
const {merge} = require('webpack-merge') //导入合并的包
const commonConfig = require('./webpack.comm.config')// 导入公共代码
module.exports = merge(commonConfig,{
// production 准备打包上线的时候， 会设置production
mode: "production",
plugins:[
new CleanWebpackPlugin(),
new CopyWebpackPlugin({
patterns: [ // 匹配文件夹 可多个
{
from: "./public", // 从哪里开始复制 (从public里复制)
to: "./",// 复制到哪里 (复制到打包后的build根目录)
globOptions: {
ignore: [ // 忽略的文件 (所有index.html文件)
"**/index.html"
]
}
}
]
}),
]
})
webpack.comm.config.js(公共环境的配置文件)
此处省略...