开发环境(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的小伙伴有所帮助。
(完)