前言
在前端工程化中，Webpack 是一款重要的工具。Webpack 的强大之处在于其高度可配置化，但是要想搭建一个高度可定制化的 Webpack 构建环境却需要学习大量的配置技巧，这对于一些初学者来说可能是门槛比较高的存在。不过，有了 npm 包 webpack-easy-config，这一切都变得简单了很多。
webpack-easy-config 是一款简单易用，基于 Webpack 的配置小工具，它可以让你快速搭建 Webpack 环境，同时为你提供了很多便捷的特性，例如：自动化加载 HTML，CSS 和 JS 等资源，优化构建速度等。本文将为大家详细介绍如何使用 webpack-easy-config。
安装
npm install webpack-easy-config --save-dev
或者
yarn add webpack-easy-config --dev
配置
webpack-easy-config 的配置文件位于项目根目录的 easywebpack.js 中，这个文件会被项目根目录的 node_modules/.bin/easywebpack 脚本所加载，所以你只需要做到对 easywebpack.js 接口的实现，webpack-easy-config 就可以为你自动化加载相应的配置。
下面让我们简单看一下 easywebpack.js 的配置参数：
- entry: Webpack 打包入口，可以是 String、Object、Function、Array 等类型。
- output: Webpack 打包出口，设置输出文件夹、文件名等。
- js: 指定 JavaScript 模块的配置，可以是 CommonJS、ES6、TypeScript 等。
- css: 指定 CSS 模块的配置，包含是否启用 css modules 等。
- image: 指定处理图片的 loader，支持 JPG、PNG、GIF、SVG 等。
- font: 指定处理字体的 loader，支持 TTF、OTF、WOFF 等。
- gzip: 指定是否使用 GZIP 压缩，启用后会大幅提升访问速度。
- alias: 配置模块别名，方便模块的引用。
- externals: 指定外部模块，可以是全局变量或者模块 ID，避免打包过程中将外部模块也打包进去。
- plugins: Webpack 插件列表。
示例配置：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------- - -
----- -------------
------ -
------ -----------------
--
------- -
----- -------------------- --------
--------- ------------
--
--- -
----- ----------
-------- ---------------
---- -----------------
--
---- -
-
----- -----------
---- ---------------- --------------
--
-
----- ------------
---- ---------------- ------------- ---------------
--
--
------ -
----- -------------------
---- ----------------
--
-------- ---
--
-------------- - --------------使用
webpack-easy-config 内置了开箱即用的命令行工具，你可以通过命令行的方式快速执行构建、运行等操作。
构建
easy webpack --config easywebpack.js --entry index.js --output ./dist
--config：指定 easywebpack.js 的路径。--entry：覆盖 easywebpack.js 中的 entry。--output：覆盖 easywebpack.js 中的 output。
开发环境
easy webpack-dev-server --config easywebpack.js --host 0.0.0.0 --port 8080
--config：指定 easywebpack.js 的路径。--host：指定服务的主机地址，默认为 localhost。--port：指定服务的端口号，默认为 8080。
生产环境
easy build --config easywebpack.js
--config：指定 easywebpack.js 的路径。
总结
webpack-easy-config 是一款非常实用的工具，可以帮助初学者与快速搭建 Webpack 构建环境，同时也十分方便。本文详细介绍了 webpack-easy-config 的安装、配置与使用。相信通过对 webpack-easy-config 的学习，读者可以更快速的搭建出一套可靠的项目工程，并为后续的开发工作提供更高效、简洁的支撑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671048dd3466f61ffdc70