离开设置的缘由

前端项目的开辟在开辟历程中和上线时须要的依靠是差异的，所以要求运用webpack打包的时刻要能够在两种情况下实行差异的设置。带来的优点是上线的项目不依靠开辟下的包，削减临盆环境中所须要要求的依靠从而提拔页面的机能。

罕见的做法

运用差异的设置文件

在项目的中建立两个设置文件，离别对应的开辟环境和临盆环境。由于两个设置文件有许多共通的基础设置，能够经由过程引入大众设置的要领削减反复的设置代码。比方，建立名为webpack.base.config.js的文件，该文件中写入共通的基础设置代码。离别建立名为webpack.dev.config.js和webpack.prod.config.js，离别对应开辟时和上线时的设置文件。在这两个文件头部引入webpack.base.config.js，依据需求在基础设置的基础上增加各自个性化的设置需求。

在package.json中的scripts属性中设置开辟打包敕令和上线打包敕令，指定差异的设置文件。比方{"scripts":{"build":"webpack --config webpack.prod.config.js","dev":"webpack --config webpack.dev.config.js"}}。如许就能够完成了差异的设置文件对开辟和临盆两种环境下个性化打包需求。

完成这些事情以后就能够在敕令行中经由过程npm run build和npm run dev来实行package中设置的剧本了。

运用环境变量参数

当开辟环境和临盆环境依靠的包差异不太大的时刻，为了简朴还能够将一切的设置写在一个设置文件当中，经由过程读取参数的体式格局输出差异的设置对象。
要领是起首设置基础的设置项，然后推断当前是不是处于开辟状况下，假如是开辟状况往设置项内里增加设置。比方设置对象是config，假如当前是开辟状况，须要增加plugin。则config.plugin.push(new webpackHtmlPlugin())。

传参的体式格局

推断的体式格局是在package.json中剧本加上环境变量NODE_ENV，比方
{"scripts":{"build":"NODE_ENV=production webpack --config webpack.config.js","dev":"NODE_ENV=deveploment webpack --config webpack.config.js"}}

读参的体式格局

const isDev = process.env.NODE_ENV === 'development'