简介
react-webpack-cookbook 是一个针对 React 开发者的开箱即用的 Webpack 配置合集，包含了众多实用的配置和优化，能够大幅度提高前端开发效率和项目的性能。
本篇文章将会介绍如何使用 react-webpack-cookbook 包，包括安装、使用和配置。
安装
react-webpack-cookbook 可以通过 NPM 或者 Yarn 进行安装，推荐使用 NPM。
通过 NPM 安装：
$ npm install --save-dev react-webpack-cookbook
通过 Yarn 安装：
$ yarn add --dev react-webpack-cookbook
使用
react-webpack-cookbook 的使用非常简单，只需要在项目的 Webpack 配置文件中添加以下代码即可：
const reactWebpackConfig = require("react-webpack-cookbook");
module.exports = reactWebpackConfig({
// 你的自定义 Webpack 配置
});在上面的代码中，我们首先引入了 react-webpack-cookbook 包，并将其传递给了 reactWebpackConfig 函数。该函数的返回值即为合并后的 Webpack 配置，你可以将其传递给 Webpack 进行编译。
配置
react-webpack-cookbook 包含了大量的 Webpack 配置选项，能够满足大部分 React 项目的需求。下面我们将介绍其中一些常用的设置。
设置入口文件
入口文件是 Webpack 进行编译的起点，每个项目只能有一个入口文件。在 react-webpack-cookbook 中，你可以通过传递 entry 参数来设置入口文件的地址，例如：
const reactWebpackConfig = require("react-webpack-cookbook");
module.exports = reactWebpackConfig({
entry: "./src/index.js",
// 你的自定义 Webpack 配置
});设置输出目录
输出目录是 Webpack 编译后生成的文件所存放的位置。在 react-webpack-config 中，你可以通过传递 output 参数来设置输出目录的地址和名称，例如：
-- -------------------- ---- -------
----- ------------------ - ----------------------------------
-------------- - --------------------
------- -
----- --------- - --------
--------- ------------
----------- ---
--
-- ----- ------- --
---在上面的代码中，我们设置了输出目录为当前目录下的 dist 文件夹，文件名为 bundle.js。其中 publicPath 参数用于设置浏览器访问静态资源时的 URL 前缀。
配置样式加载器
在 React 项目中，通常需要使用 CSS、Sass 等样式预处理器来编写样式。在 react-webpack-cookbook 中，你可以使用 style-loader 和 css-loader 加载器来处理样式文件。例如，我们可以将 css 文件打包进入 JS 文件中，使其可被 JS 文件引用。
-- -------------------- ---- -------
----- ------------------ - ----------------------------------
-------------- - --------------------
------- -
------ -
-
----- --------
---- -
---------------
-------------
--
--
--
--
-- ----- ------- --
--在上面的代码中，我们使用了 style-loader 和 css-loader 两个加载器来处理 .css 文件的加载。具体请参考 Webpack 官方文档。
示例代码
最后，给出一份完整的示例代码供参考：
-- -------------------- ---- -------
----- ------------------ - ----------------------------------
-------------- - --------------------
------ -----------------
------- -
----- --------- - --------
--------- ------------
----------- ---
--
------- -
------ -
-
----- --------
---- -
---------------
-------------
--
--
--
--
-- ----- ------- --
--以上代码设置了一个入口文件为 src/index.js，输出目录为 dist/bundle.js，样式表使用 style-loader 和 css-loader 进行加载。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005587981e8991b448d5b9c