webpack配置不同打包配置

概述生成环境与开发环境打包配置 使用package.json配置npm run开启不同的打包配置  。。。webpack基本使用最后一篇博客 在上一篇博客中详细的演示了webpack开启本地服务和热更新，这个超级爽的技能你有没有发现问题呢？反正我是发现了，那就是只适合开发环境下使用，生成环境打包显然不合适，在前面的博客中也有提到过关于针对不同环境的打包，但没有具体演示怎么做，其实很简单，就是配置两套打 生成环境与开发环境打包配置 使用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文件中配置scripts2   "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的底层实现和实际生产过程中遇到一些问题再来码一波。

总结

以上是内存溢出为你收集整理的webpack配置不同打包配置全部内容，希望文章能够帮你解决webpack配置不同打包配置所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。