前言
前端开发的工程化需求愈发凸显，使用 webpack 去构建前端项目已经成为常态。然而，对于初学者而言，webpack 的庞大配置和细节让很多人望而却步。于是，一系列的 webpack 配置工具应运而生。本文介绍了 easy-webpack-config 这个 npm 包，它可以让我们在快速搭建 webpack 环境的同时，更加深入地了解 webpack 的配置细节。
什么是 easy-webpack-config
easy-webpack-config 旨在提供一种简单的方式来创建 webpack 配置文件，同时还支持构建用于开发、生产、测试环境的 webpack 配置，使得我们能快速地针对不同场景去构建应用程序。
easy-webpack-config 提供了定义 webpack 配置文件的所有工具组件，例如：webpack 的基本配置、热加载配置，样式和图片处理等等。同时，它还对每个组件做了深入详细的解释和示例，有助于我们进一步理解和学习 webpack 的配置细节。
使用 easy-webpack-config
首先，我们需要新建一个项目并安装 easy-webpack-config：
$ mkdir my-project $ cd my-project $ npm init -y $ npm install --save-dev easy-webpack-config
然后，我们来简单设置一下 webpack 配置文件：
-- -------------------- ---- -------
----- ---- - ------------------------------------
----- ----- - -------------------------
----- ------ - -
------ -----------------
------- -
----- ---------
--------- -----------
-
--
-------------- - ------------------- ----这里的 base(config) 将会在默认情况下使用的常用配置和我们传入的配置进行合并。例如：base(config) 中规定了 webpack 的入口文件为 ./src/index.js，输出文件为 ./dist/bundle.js。
现在，使用 webpack 去构建该项目：
$ webpack
Hash: 1d3189ac9ecbbedcf67e
Version: webpack 2.7.0
...
[88] ./src/index.js 0 bytes {0} [built]
+ 87 hidden modules这时候，我们已经成功构建了一个简单的 webpack 应用程序。
easy-webpack-config 的配置组件
除了上文提到过的 base，easy-webpack-config 提供了许多其他的配置组件，例如：
- development
- production
- dll
- styles
- images
- fonts
- analyze
development
development 配置组件可以在开发环境下使用。它为我们提供了自动刷新、热加载、sourcemap 等等功能，通过以下方法进行配置：
const dev = require('easy-webpack-config').development;
module.exports = merge(dev(config), {});production
production 配置组件可以在生产环境下使用，用于优化我们的代码并压缩它们。生产配置需要一个额外的 webpack 插件 easy-webpack-config 中提供了对于这部分的配置样例。
const prod = require('easy-webpack-config').production;
module.exports = merge(prod(config), {});dll
dll 配置组件可以为我们在工程文件变动较少的情况下提高构建性能。它可以将少量的、相对耗费性能的部分单独打包，并生成对应的索引信息以提高构建速度。使用该配置组件时，设置文件如下所示：
const dll = require('easy-webpack-config').dll;
const baseConfig = require('./webpack.base.config.js');
module.exports = dll(baseConfig);styles
styles 配置组件用于打包处理我们现有的样式。例如 css、scss、less 等文件，可以通过该配置组件得以处理：
const styles = require('easy-webpack-config').styles;
const base = require('./webpack.base.config.js');
module.exports = merge(styles(base), {});images
images 配置组件用于处理图片文件，提供了许多图片文件处理相关工具，如：图片轮廓进行裁剪，不同类型图片的压缩等等功能：
const images = require('easy-webpack-config').images;
const base = require('./webpack.base.config.js');
module.exports = merge(images(base), {});fonts
fonts 配置组件用于处理字体文件，支持 iconfont 字体等：
const fonts = require('easy-webpack-config').fonts;
const base = require('./webpack.base.config.js');
module.exports = merge(fonts(base), {});analyze
最后，analyze 配置组件用于可视化我们 webpack 打包所生成的代码，方便我们查看各部分占比和性能瓶颈。使用以下方式进行配置：
const analyze = require('easy-webpack-config').analyze;
const base = require('./webpack.base.config.js');
module.exports = analyze(base);结束语
以上为使用 easy-webpack-config 进行 webpack 配置的基本方法和各种配置组件，通过这些简便工具，我们可以更加灵活、高效地进行前端项目的开发和构建。在实际项目中也可以对这些配置组件进行更加复杂的定制和拓展。如果您想深入了解更多关于 easy-webpack-config 的使用方法和诸多细节，建议参考该 npm 包的官方文档进行深入学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066dac7108f76aa73eca69