webpack配置不同打包配置

Posted 2022-03-10 zheoneandonly

• 生成环境与开发环境打包配置
• 使用package.json配置npm run开启不同的打包配置

 。。。webpack基本使用最后一篇博客

在上一篇博客中详细的演示了webpack开启本地服务和热更新，这个超级爽的技能你有没有发现问题呢？反正我是发现了，那就是只适合开发环境下使用，生成环境打包显然不合适，在前面的博客中也有提到过关于针对不同环境的打包，但没有具体演示怎么做，其实很简单，就是配置两套打包配置，至于要怎么执行具体的环境打包配置不必要在这里说明，毕竟每个项目和环境还有开发配置都不同，大家针对自己的需求配置就是了，这里只告诉你怎么开启不同打包配置命令：

配置两个打包配置文件：

1 //生成环境配置--配置文件名各位自己定义（我的配置名是：webpack-dev.config.js）
2 module.exports = 
3     mode:‘development‘
4 
5 
6 //生成环境配置--配置文件名各位自己定义（我的配置名是：webpack-prod.config.js）
7 module.exports = 
8     mode:‘production‘
9 

然后通过npm指令开启不同打包配置：

webpack --config webpack-dev.config.js//开启生成环境下的打包
webpack --config webpack-prod.config.js//开启生成环境下的打包

是不是觉得这样的指令敲起来很麻烦，这时候我们当然后必要将他变得简单一点：

1 //在package.json文件中配置scripts
2   "scripts": 
3     ...
4     "dev":"webpack --config webpack-dev.config.js --color",
5     "prod":"webpack --config webpack-prod.config.js --color"
6   ,

然后执行npm run ...就可以将原本很常的一条指令用简练的方式调用触发了：

npm run dev//启动开发环境打包
npm run prod//启动生产环境打包

终于，webpack第一阶段的应用博客写完，后期慢慢研究一些关于webpack的底层实现和实际生产过程中遇到一些问题再来码一波。