前言
随着前端技术的不断发展，前端工程化成为前端开发一个必备的能力，而构建工具是前端工程化的核心工具之一。Webpack 是当今前端开发领域最流行的构建工具之一，同时，React 也是当前应用最广泛的前端框架之一。为了更好的支持 React 应用的构建工作，网上出现了一款名为 easywebpack-react-build-script 的 NPM 包，本文将为大家讲解 easywebpack-react-build-script 的使用教程。
安装
要使用 easywebpack-react-build-script，需要先进行安装。将 easywebpack-react-build-script 添加到项目中，运行如下命令：
$ npm install easywebpack-react-build-script --save-dev
同时还需要安装好 easywebpack-cli 和 easywebpack-react，以及相关的 Webpack Loader 和 Plugin。
基本用法
安装好 easywebpack-react-build-script 后，可以通过简单的配置构建 React 应用项目。假设我们的项目结构如下：
-- -------------------- ---- ------- --- ------ - --- ---------- --- --- - --- -------- - --- --------- - --- ------- - --- --------- - --- --- - --- --------- - --- --------- --- ------------ --- ----------------- --- ---------
可以通过 webpack.config.js 文件来配置 easywebpack-react-build-script：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------- - ------------------------------------------
----- ------------- - -------------
------ -
------ -------------------- ---------------
--
------- -
----- -------------------- --------
--------- -----------
--
------- -
------ -
-
----- ----------
---- ---------------
-------- --------------
--
-
----- ----------------
---- ---------------- ------------- ---------------
-------- --------------
-
-
--
-------- ---
---
-------------- - --------------Webpack 的配置项可以直接作为参数传入 easywebpack 的函数中，这里我们传入了入口文件、输出路径、文件名、Loader 和 Plugin。同时，Webpack 的配置文件也可以在 easywebpack 的配置中直接进行指定。
高级用法
easywebpack-react-build-script 还支持更加高级的应用场景，比如多页面应用、服务器渲染、多语言支持。以下为几个使用示例：
多页面应用
对于多页面应用，只需要在配置文件中将 entry 进行如下更改：
-- -------------------- ---- -------
----- ------------- - -------------
------ -
------ -------------------- ----------------
------ -------------------- ----------------
-------- -------------------- ------------------
--
------- -
----- -------------------- --------
--------- -----------
--
------- -
------ -
-
----- ----------
---- ---------------
-------- --------------
--
-
----- ----------------
---- ---------------- ------------- ---------------
-------- --------------
-
-
--
-------- ---
---服务器渲染
对于服务器端渲染，直接在配置文件中引入 easywebpack-react 之后进行配置即可：
-- -------------------- ---- -------
----- ---------------- - -----------------------------
----- ------------- - -------------
------ -
------ -------------------- ---------------
--
------- -
----- -------------------- --------
--------- -----------
--
------- -
------ -
-
----- ----------
---- ---------------
-------- --------------
--
-
----- ----------------
---- ---------------- ------------- ---------------
-------- --------------
-
-
--
-------- ---
---------- --------
---
-------------- - ---------------------------------------多语言支持
针对需要多语言支持的应用，可以使用 easywebpack 的多语言插件：
-- -------------------- ---- -------
----- ---------- - -----------------------------------
----- ------------- - -------------
------ -
------ -------------------- ---------------
--
------- -
----- -------------------- --------
--------- -----------
--
------- -
------ -
-
----- ----------
---- ---------------
-------- --------------
--
-
----- ----------------
---- ---------------- ------------- ---------------
-------- --------------
-
-
--
-------- -
--- ------------
---------- ------ ---------
---------------- --------
------------- -
------ ------- -
--- ------ -------
-------- -------
-
-
--
--
---
-------------- - --------------总结
easywebpack-react-build-script 是一个非常方便的用于构建 React 应用的 NPM 包，通过灵活的配置，可以支持前端应用的多种场景。本文主要介绍了 easywebpack-react-build-script 的安装和基本用法，以及一些高级用法的示例和详细的配置说明。希望本文对大家学习 easywebpack-react-build-script 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb181e8991b448dc532