Webpack 是一个常用的前端自动化构建工具，能够将多个文件通过不同的 loader 和 plugin 转换为 web 应用可以直接使用的静态资源，提高 web 应用开发效率和代码可维护性。Webpack Encore 是在原生 Webpack 基础上进行了一定的封装和配置，旨在让前端开发者更快速地搭建基于 Webpack 的前端自动化构建环境。
本文将介绍 Webpack 和 Webpack Encore 之间的异同，以及使用 Webpack Encore 可以带来怎样的优势，同时也会分享一些在实践中学到的技巧和经验。
Webpack 和 Webpack Encore 的异同
Webpack Encore 是在原生 Webpack 基础上进行了一定的封装和配置，使用起来更加方便和简洁。下面列出了 Webpack 和 Webpack Encore 在功能和使用上的异同点。
主要功能
- Webpack： 能够将多个模块打包成一个或多个 bundle，支持各种模块类型和资源类型的处理（如 JS、CSS、图片等），支持各种 loader 和 plugin 的扩展和配置，能够对项目进行代码分割、性能优化和支持多语言和全局变量等功能的处理。
- Webpack Encore： 是 Webpack 的一个高级封装库，提供了易用的方法和配置来构建基于 Webpack 的前端应用。可以直接使用各种现成的 loader 和 plugin，支持开发环境和生产环境的差异处理，能够自动化构建、优化、测试、打包和部署项目。
使用方式
- Webpack： 通过配置文件来对 Webpack 进行配置，可以使用各种形式的配置，包括对象、函数和命令行等，但需要一定的 Webpack 基础知识和相关的 loader 和 plugin 等的使用经验。
- Webpack Encore： 通过链式调用的 API 来对 Webpack 进行配置，可以简单而直接地配置各种常用的功能，不需要太多的 Webpack 知识和相关的 loader 和 plugin 经验，同时能够使用 Symfony 风格的编程模式。
构建环境
- Webpack： 支持开发环境、生产环境和测试环境的配置和使用。
- Webpack Encore： 提供了易用的的方法和配置来处理开发环境、生产环境甚至是非 Node.js 环境下的构建需求，能够快速启动开发服务器、实现热重载、支持代码分离和性能优化等功能。
优势
- Webpack： 自由灵活，能够根据项目需要配置各种 loader 和 plugin 等来完成相应的任务，在配置上可以灵活选择配置方式。
- Webpack Encore： 提供了一整套的解决方案，以进一步简化和更快速的构建过程，提供了一些服务或工具来帮助页面或应用。同时，其可以非常适用于 Symfony 应用的构建。
Webpack Encore 的使用
接下来我们将通过一个实际案例来演示 Webpack Encore 的使用和相关知识点，该示例为一个简单的 Webpack Encore 初始化项目，包含以下内容：
- 使用 Webpack Encore 初始化项目；
- 添加 CSS 和 JavaScript 文件，并在应用中使用；
- 添加图像等静态资源；
- 安装和使用第三方库。
初始化项目
首先，我们需要安装 Node.js 和 Yarn，这两个工具都是必须的，如果你还没有安装，可以通过以下命令安装：
# 安装 Node.js sudo apt-get install nodejs # 安装 Yarn sudo apt-get install yarn
安装完成后，我们可以在终端中输入以下命令来创建一个 Webpack Encore 项目：
-- -------------------- ---- ------- - ----- ---------- ------- ------- -- ----- ---------- -- ---------- ---- ---- -- - -- ------- - ----------- ---- --- ------- ----------- ----- - -- --------------------- ---- --- ----------------------- ----- - --- ----------------- ---- ------ ----
这样初始化后，你将得到 Webpack 和 Webpack Encore 配置文件（webpack.config.js），默认的入口是 app.js 文件，输出目录为 public/build 文件夹。
此时，我们可以在 package.json 文件中添加以下一行命令：
{
"scripts": {
"build": "encore production --progress"
}
}在终端中使用 yarn build 命令就可以构建出生产环境包了。
添加 CSS 和 JavaScript 文件
接下来，我们可以添加一些 CSS 和 JavaScript 文件，并在应用中使用它们。例如，我们可以在 assets/css 文件夹中添加一个 style.css 文件和在 assets/js 文件夹中添加一个 index.js 文件，然后在 app.js 文件中引用它们：
// assets/js/app.js // import CSS import '../css/style.css'; // import JS import './index.js';
这样 Webpack 将自动将这些文件处理和转换，同时，也可以在 Webpack Encore 配置文件中进行相关的 loader 和 plugin 配置。
添加图像等静态资源
除了 CSS 和 JavaScript 文件之外，我们还可能需要使用一些图像等静态资源，Webpack Encore 也可以很方便地处理这些资源：
-- -------------------- ---- -------
-- ------- ---- ----
---- --- ----------- -----
-- -----------------
------
-- ---
------------
----- --------------------------------
------- --------------
-------- -
----- ---------------------
--
--
-- ---这里，我们使用了 file-loader，它可以将图像等静态资源通过 name 属性指定的路径和文件名进行重命名和输出。
安装和使用第三方库
接下来，我们可以安装一些第三方库，并在应用中使用它们。例如，可以使用 Vue.js 来构建我们的前端应用：
# Install Vue.js & vue-loader yarn add vue vue-loader vue-template-compiler --dev
然后在 app.js 文件中引用 Vue.js：
-- -------------------- ---- -------
-- ----------------
-- ------ ---
------ -------------------
-- ------ --
------ -------------
-- ------ ------
------ --- ---- ------
--- -----
--- -------
----- -
-------- ------- ---------
--
---这里，我们使用了 vue-loader，它可以将 Vue 的 SFC（单文件组件）转换为 JavaScript 模块，具体使用方式可以参考Vue.js 官方文档。
总结
本文简要介绍了 Webpack 和 Webpack Encore 的异同，以及展示了一些 Webpack Encore 的使用示例，希望能够对读者在日常前端开发中理解和使用 Webpack 和 Webpack Encore 有所帮助。同时，也建议大家多尝试 Webpack 和 Webpack Encore 相关功能和库的使用，加深对前端和构建打包的理解和熟练度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6502baf395b1f8cacdff3cb3