前言
在前端开发中，使用 webpack 对代码进行打包是一项必要的技能。然而，配置 webpack 也是一项非常繁琐的工作。为了简化 webpack 配置的过程，一些优秀的 npm 包被开发出来，如 nwb。但是，即使是使用 nwb，当默认配置无法满足需求时，依然需要手动修改 webpack 配置。这就是我们需要的 create-nwb-webpack-config 这个 npm 包。
什么是 create-nwb-webpack-config？
create-nwb-webpack-config 是一个 npm 包，它可以让你生成一个基于 nwb 的自定义的 webpack 配置文件及相关配置。你可以在这个配置文件中增加你自己的需求，无需手动修改 webpack 配置，即可让它们生效。
如何使用 create-nwb-webpack-config？
首先，你需要使用 npm 安装 create-nwb-webpack-config：
npm install create-nwb-webpack-config
接下来，你可以在命令行中执行以下命令：
create-nwb-webpack-config
执行上述命令后，你会看到如下所示的提示信息：
? Would you like to configure an additional Babel preset or plugin? No ? Which nwb command would you like to run? build ? Which additional webpack loaders would you like to install? (Press <space> to select, <a> to toggle all, <i> to invert selection)
第一个问题询问你是否需要增加 Babel 的 preset 或 plugin。如果你需要，则输入 ‘y’，再根据提示输入你需要增加的 preset 或 plugin。如果你不需要，则直接输入 ‘n’。
第二个问题询问你想要运行哪个 nwb 命令。由于我们需要自定义 webpack 配置文件，所以我们选择 ‘build’ 命令。
第三个问题询问你想要增加哪些额外的 webpack loader。这里我们可以选择 ‘css-loader’ 和 ‘sass-loader’ 以体现 create-nwb-webpack-config 的使用。
最后，输入选项后，按回车键，create-nwb-webpack-config 将会根据你的选择自动生成一个自定义的 webpack 配置文件和相应的 nwb 配置文件。
自定义 webpack 配置文件
你可以在生成的 webpack 配置文件中自由地添加你所需的配置项，例如：
-- -------------------- ---- -------
-- -----------------
-------------- - --------------- -------- -- -
-- ----------- ------- ---
---------------------------------
----- ---------
---- ------------
---
------ --------------
--示例代码
在此，我们将演示如何使用生成的自定义 webpack 配置文件。
对于这个示例，我们使用 create-react-app 来创建一个新项目：
npx create-react-app my-app cd my-app
接下来，我们使用 create-nwb-webpack-config 来自定义 webpack 配置文件：
npm install create-nwb-webpack-config npx create-nwb-webpack-config
我们选择增加 ‘sass-loader’ 和 ‘css-loader’，并且选择了 ‘build’ 命令。
然后我们会在根目录中增加一个名为 ‘webpack.config.js’ 的文件，它的内容大致如下：
-- -------------------- ---- -------
-------------- - --------------- -------- -- -
----- -------- - --------------------------------
- -- ----------------- --- -----------
--
---------------- - -----------------
---------------------------------
----- -------------
---- -
---------------
-
------- -------------
-------- -
-------------- --
-------- -
--------------- ------------------------------------
--
--
--
-----------------
--------------
--
---
------ --------------
--接着，我们需要在 ‘package.json’ 文件的 ‘scripts’ 字段中增加一个 ‘build’ 脚本，如下：
"scripts": {
"start": "react-scripts start",
"build": "nwb build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},最后，在命令行中执行以下命令：
npm run build
这个命令将会以自定义的 webpack 配置文件为基础，构建出一个包含了 sass 样式的 React 应用。你可以通过观察构建日志，或者直接运行这个应用来确认效果。
结语
在这篇文章中，我们介绍了 create-nwb-webpack-config 这个 npm 包，并演示了如何使用它来自定义 React 应用的 webpack 配置文件。使用 create-nwb-webpack-config 可以让你轻松地增加任何你需要的 webpack loader 和 plugin，而无需手动修改 webpack 配置文件。当然，这也仅仅是 create-nwb-webpack-config 的一个小小功能而已。相信在未来，我们还会发现更多 create-nwb-webpack-config 的强大之处。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaa32b5cbfe1ea06103ad