webpack配置学习⼆-开发环境和打包环境执⾏不同打包
分开配置的原因
前端项⽬的开发在开发过程中和上线时需要的依赖是不同的，所以要求使⽤webpack打包的时候要能够在两种情况下执⾏不同的配置。带来的好处是上线的项⽬不依赖开发下的包，减少⽣产环境中所需要请求的依赖从⽽提升页⾯的性能。
常见的做法
使⽤不同的配置⽂件
在项⽬的中创建两个配置⽂件，分别对应的开发环境和⽣产环境。因为两个配置⽂件有很多共通的基础配置，可以通过引⼊公共配置的⽅法减少重复的配置代码。例如，创建名为fig.js的⽂件，该⽂件中写⼊共通的基础配置代码。分别创建名为
fig.js和fig.js，分别对应开发时和上线时的配置⽂件。在这两个⽂件头部引⼊
fig.js，根据需求在基本配置的基础上添加各⾃个性化的配置需求。
在package.json中的scripts属性中配置开发打包命令和上线打包命令，指定不同的配置⽂件。例如{"scripts":{"build":"webpack --config fig.js","dev":"webpack --config fig.js"}}。这样就可以实现了不同的配置⽂件对开发和⽣产两种环境下个性化打包需求。
完成这些⼯作之后就可以在命令⾏中通过npm run build和npm run dev来执⾏package中配置的脚本了。
使⽤环境变量参数
当开发环境和⽣产环境依赖的包差别不太⼤的时候，为了简单还可以将所有的配置写在⼀个配置⽂件之中，通过读取参数的⽅式输出不同的配置对象。
⽅法是⾸先配置基本的配置项，然后判断当前是否处于开发状态下，如果是开发状态往配置项⾥⾯添加配置。例如配置对象是config，如果当前是开发状态，需要添加plugin。则config.plugin.push(new webpackHtmlPlugin())。
webpack打包流程 面试
传参的⽅式
判断的⽅式是在package.json中脚本加上环境变量NODE_ENV，例如
{"scripts":{"build":"NODE_ENV=production webpack --fig.js","dev":"NODE_ENV=deveploment webpack --fig.js"}}
读参的⽅式
const isDev = v.NODE_ENV === 'development'

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。