对于前端工程师来说，webpack 是一个非常重要的工具，它可以将各种资源进行打包和优化，使得我们的网站加载速度更快、体验更好。而对于复杂的前端项目来说，webpack 的配置也变得相当复杂。因此，有很多开发者为了避免重复造轮子，将自己的 webpack 配置封装成了 npm 包，供其他开发者使用。其中，webpack-everflow-config 是一个比较常用的 npm 包，它的主要作用是提供了一套自用的 webpack 配置，以及一些预设的工具链和工作流程。
安装和使用
要使用 webpack-everflow-config，首先我们需要在项目的根目录下使用 npm 安装这个包：
npm install webpack-everflow-config --save-dev
接下来，在你的项目的根目录下创建一个名为 webpack.config.js 的文件，并输入如下代码：
const { getConfig } = require("webpack-everflow-config");
const config = getConfig();
module.exports = config;这里，我们通过调用 getConfig() 方法，获得了一个可用的、优化的 webpack 配置。需要注意的是，getConfig 方法支持传入一个对象参数，这个参数将传递给 webpack-merge，用于合并自定义配置。
预设的一些工具链
webpack-everflow-config 内置了一些常用的工具链，可以帮助我们更方便地开发和调试代码。这些工具链包括：
- eslint-loader，用于检查代码是否符合规范。
- stylelint-loader，用于检查 CSS 代码是否符合规范。
- babel-loader，用于将 ES6+的代码转换成 ES5 代码。
- less-loader，用于编译 Less 文件。
- postcss-loader，用于自动添加 CSS 前缀和压缩 CSS 代码。
- file-loader 和 url-loader，用于处理静态资源。
由于这些工具链都是预设的，因此我们只需要在项目中按照规范书写代码，就可以享受这些工具链的好处。
常用的配置参数
webpack-everflow-config 还提供了一些常用的配置参数，下面是一些常用的参数。
devServer
devServer 是 webpack 内置的一个开发服务器，它可以让我们在开发过程中实时刷新页面，并且可以通过配置 proxy，来代理 API 请求。在 webpack-everflow-config 中，我们可以通过简单地配置 devServer，就可以启动一个本地服务器：
-- -------------------- ---- -------
----- - --------- - - -----------------------------------
----- ------ - ------------
-------------- - ----------------- ------- -
---------- -
----- -----
------ -
------- -
------- ------------------------
------------ - -------- ------ --
------------- -----
--
--
--
---externals
externals 配置项可以告诉 webpack 哪些模块不需要打包到最终的输出文件中，而是通过外部引用的方式加载。这个参数可以用于优化打包的体积。比如，我们可以将 React 和 React-DOM 从打包文件中剔除掉，让用户通过 CDN 引用：
-- -------------------- ---- -------
----- - --------- - - -----------------------------------
----- ------ - ------------
-------------- - ----------------- ------- -
---------- -
------ --------
------------ -----------
--
---optimization
optimization 配置项可以帮助我们更好地优化打包结果，比如压缩代码、分离公共模块等。下面是一个例子，开启了代码压缩和分离公共模块的优化：
-- -------------------- ---- -------
----- - --------- - - -----------------------------------
----- ------ - ------------
-------------- - ----------------- ------- -
------------- -
--------- -----
------------ -
------- ------
--
--
---resolve.alias
resolve.alias 配置项可以告诉 webpack 如何解析模块的路径。比如，我们可以将 src 目录的绝对路径定义为一个别名，这样在代码中就可以直接引用：
-- -------------------- ---- -------
----- - --------- - - -----------------------------------
----- ------ - ------------
-------------- - ----------------- ------- -
-------- -
------ -
---- ----------------------- -------
--
--
---结论
虽然 webpack-everflow-config 的主要目的是简化 webpack 的配置，但是这并不代表它失去了灵活性。通过使用 webpack-everflow-config 提供的配置参数和自定义配置，我们可以实现一些高级的功能，比如多页应用和多环境打包等。通过深入学习和使用 webpack-everflow-config，我们可以提高我们的前端开发效率，减少错误和减轻开发的负担。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671048dd3466f61ffdca1