webpack区分developement和production打包

文章介绍了webpack在developement模式和production模式下的打包区别，并用2种方式实现了分模式打包。

developement和production打包区别

开发环境使用的是development模式：

需要devServer开启一个服务器，里面还集成了一些HMR，（HMR的作用：只要更改了代码就会重新打包，内容会实时展现在页面），方面开发。

需要非常全面的SourceMap信息，方便调试。

不需要进行压缩。

线上环境使用的是production模式：

不需要开启服务器。

不需要非常全面的sourceMap信息，可以生成一个.map文件进行存储。

需要对代码进行压缩。

那么如何解决在开发和打包的切换中常常修改webpack.config.js文件内容的问题?接下来介绍2种常用的方式。

2种方式实现分模式打包

首先，我们先在根目录下新建3个配置文件：

webpack-dev.js：做developement模式下独有的配置。

webpack-prod.js：做production模式下独有的配置。

webpack-common.js：做2种模式共有的配置。

方式一：直接用不同配置文件打包。developement模式用webpack-dev.js配置文件打包，production模式用webpack-prod.js配置文件打包。

方式二：用不同的环境变量打包。2种模式都用webpack-common.js配置文件打包,不同模式打包时，传不同的环境变量。

不论哪种方式，我们都需要把根据环境分开的webpack-dev.js、webpack-prod.js和webpack-common.js里的配置合并使用，所以我们就需要用到webapck-merge插件，我们在控制台执行：

npm i webpack-merge -D

1

直接用不同配置文件打包

1.webpack-common.js做2种模式共有的配置

webpack-common.js做2种模式共有的配置，