什么是 @easy-webpack/core
@easy-webpack/core 是一个为 webpack 打造的易于使用的工具集，它提供了许多常用的、能力强大的 webpack 插件，让使用 webpack 变得更加轻松。@easy-webpack/core 包含了许多常用的 webpack 插件，例如代码压缩、自动化添加浏览器前缀等等，不仅如此，它还支持使用 TypeScript 编写 webpack 配置。
安装
可以使用 npm 或者 yarn 来安装 @easy-webpack/core：
npm install --save-dev @easy-webpack/core # 或者 yarn add --dev @easy-webpack/core
如何使用
使用 @easy-webpack/core 构建项目需要先创建一个 webpack 配置文件，这个文件可以是纯 JavaScript 或者 TypeScript，对于 TypeScript 配置文件，需要对 ts-node 进行全局安装：
npm install -g ts-node # 或者 yarn global add ts-node
然后在 webpack 配置文件中引入 @easy-webpack/core：
// webpack.config.js const { createConfig } = require('@easy-webpack/core'); const config = createConfig([{ /* Plugins */ }]) module.exports = config;
在 { /* Plugins */ } 处，我们需要传入需要使用的插件数组，例如：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ----------------- - ------------------------------- ----- - ------------ - - ------------------------------ ----- ------ - -------------- - -------- - --- ------------------- --------- -------------------------------- --- -- -- --- -------------- - -------展开代码
在这个例子中，我们使用了 HtmlWebpackPlugin 插件从模板中生成 HTML 文件。
配置文件的文件名
@easy-webpack/core 会从项目根目录寻找 webpack 的配置文件，默认情况下，它会寻找 webpack.config.js，如果我们需要使用其他配置文件名，可以通过 --config 参数指定配置文件路径，例如：
webpack --config other-config.js
配置文件的创建
我们可以手动编写 webpack 配置文件，但是对于一些常用的场景，@easy-webpack/core 提供了预配置方案，可以通过 preset 参数来使用这些预置方案，例如：
const { createConfig } = require('@easy-webpack/core'); const config = createConfig([], { preset: 'typescript' }); module.exports = config;
在这个例子中，我们使用 typescript 预置方案来完成 TypeScript 项目的 webpack 构建。
也可以传入文件路径作为参数，这个文件会被当做预置方案来处理。
const { createConfig } = require('@easy-webpack/core'); const config = createConfig([], { preset: './custom-preset.js' }); module.exports = config;
插件的使用
插件是 @easy-webpack/core 的核心，可以在配置文件中传入插件列表，这些插件具体执行的任务可以参见它们各自的文档。
假设我们需要使用 file-loader 插件来处理资源文件，我们可以这样使用：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- - ------------ - - ------------------------------ ----- ------ - -------------- - ------- - ------ - - ----- ----------------------- ---- - ------- -------------- -------- - ----- --------------- ----------- ---------------- -- -- -- -- -- -- --- -------------- - -------展开代码
在这个例子中，我们将需要处理的资源文件都以 file-loader 作为 loader 使用，并将它们输出到 assets/images 目录。
总结
@easy-webpack/core 是一个极易上手，功能齐全的 webpack 插件集合，它可以极大地简化我们的 webpack 配置，节省我们的时间和精力。在使用过程中，我们需要仔细阅读插件的文档，并学会如何使用它们，这对我们的前端开发工作非常有帮助和指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/101434
