webpack(4.8.3)总结之二

开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中，我们的目标则转向于关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。由于要遵循逻辑分离，我们通常建议为每个环境编写独立的 webpack 配置，即将原本的webpack.config.js配置文件拆分成三个不同配置文件，同步需修改package.json文件。

一、遵循不重复原则，所以创建三个不同配置文件，公共配置、开发配置、生产配置，为将公共配置与开发配置或生产配置的配置合并，需借助webpack-merge插件，所以需安装改插件，不同配置文件名称、示例的目录结构级package.json文件修改如下：

1、配置文件：

webpack.common.conf.js：公共配置

webpack.dev.conf.js：开发环境配置

webpack.prod.conf.js：生产环境配置

2、示例目录结构

3、package.json修改如下

PS：

1）、- -env 是将环境参数传递给配置文件

2）、- -config 是启用配置文件所在的路径

二、公共配置webpack.common.conf.js配置(ES6语法编写配置文件)如下：

1、引入所需插件及开发和生产环境的配置文件，如下图：

2、声明generateConfig函数，以告诉webpack-merge插件该合并那个环境下的配置

1）、const generateConfig=env=>{}

2）、在generateConfig函数内容如图

PS：

1）、因babel-loader的参数配置通常都会单独创建一个单独json文件配置，文件名为.babelrc，如上方的目录结构图中就有这个文件。其内容如下：

2）、因为环境不同，所使用的loader都会有所差别，所以将loader单独声明变量，如图中的

scriptLoader、cssLoader、styleLoader及fileLoader。

3）、使用return，将配置的结果返回。

3、使用module.exports将配置文件导出，如下图

4、最后webpack.common.conf.js的内容结构如下图

二、开发环境webpack.dev.conf.js

1、开发环境主要是开启模块热更新及代码调试，其内容结构如图

三、生产环境webpack.prod.conf.js

1、生产环境更加注重轻量化的文件，其内容结构如下

小结：webpack(4.8.3)总结文章为本人在学习webpack过程中的一些见解，希望对正在学习的webpack的小伙伴有所帮助。

（完）