在前端开发中，我们经常需要使用 Webpack 进行项目构建和打包，同时为了提高开发效率和代码可维护性，我们也会选择一些流行的前端框架和状态管理库，例如 React 和 MobX。在本文中，我们将探讨如何手动零配置地搭建一个 Webpack4 + React + MobX 的脚手架，为我们日后的项目开发提供方便。
为什么手动零配置？
在市面上已经有很多现成的脚手架工具，例如 create-react-app 和 vue-cli，它们提供了很多默认配置和插件，可以快速地搭建起一个前端项目。然而，这些工具的缺点也很明显：它们往往会对我们的项目加入一些不明确的依赖和代码结构，导致我们对项目的迁移和维护难度加大。因此，手动零配置搭建脚手架是一个更干净、更透明的方式，可以让我们更好地控制项目的代码结构和开发流程。
步骤
1. 初始化项目
首先，我们需要新建一个空的项目，在终端中执行以下命令：
mkdir my-app cd my-app npm init -y
这将会创建一个空的 Node.js 项目，并为我们自动生成一个 package.json 文件，其中包含了一些默认的配置信息。
2. 添加依赖
接着，我们需要安装一些必要的依赖，包括：
- webpack：项目构建工具
- webpack-cli：Webpack 的命令行界面
- webpack-dev-server：一个开发服务器，可以在本地启动一个 Web 服务
- babel-loader：将 ES6+ 代码转换为兼容性更好的 ES5 代码
- @babel/core：Babel 的核心库
- @babel/preset-env：Babel 的预设，用于将 ES6+ 代码转换为 ES5
- @babel/preset-react：Babel 的预设，用于将 JSX 语法转换为正常的 JavaScript 代码
- react：React 库
- react-dom：React 的渲染引擎
- mobx：状态管理库
- mobx-react：在 React 中使用 MobX 的库
执行以下命令进行安装：
npm install webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react react react-dom mobx mobx-react --save-dev
3. 配置 Webpack
在项目根目录下，新建一个 webpack.config.js 文件，并添加以下内容：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
----- -------------- -- ------
------ ----------------- -- ------
------- - -- ----
--------- ------------ -- -----
----- ----------------------- -------- -- -------
--
------- - -- ------
------ -
-
----- -------- -- -- ---------- --
-------- --------------- -- -- ------------ --
---- -
------- --------------- -- -- ------------ ----
-------- -
-------- --------------------- ----------------------- -- ---- ---- - --- -------- ---------- --
--
--
--
--
--
---------- - -- -------
------------ ----------------------- -------- -- --- ------
--------- ----- -- ----
----- ----- -- --- -----
--
--这个配置文件指定了项目的入口文件和输出位置，并指定了如何处理 JavaScript 代码。同时，我们也配置了一个开发服务器，可以在本地启动一个 Web 服务，以方便我们的开发和调试。
4. 编写代码
现在，我们可以开始编写我们的前端代码了。在项目根目录下，新建一个 src 文件夹，并在其中新建一个 index.js 文件，添加以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- -------------
------ - ---------- - ---- -------
----- --- - ----------- -- -
----- ------- --------- - ------------------
----- --------- - -- -- -------------- - ---
----- --------- - -- -- -------------- - ---
------ -
-----
---------- ------------
------- -------------------------------
------- -------------------------------
------
--
---
-------------------- --- ---------------------------------这个代码展示了如何在 React 中使用 MobX，实现一个简单的计数器应用。当我们通过点击按钮来增加或减少计数器的值时，组件会重新渲染，以显示最新的值。
5. 运行项目
最后，我们可以在终端中执行以下命令来启动开发服务器：
npx webpack-dev-server --open --config webpack.config.js
这将会在本地启动一个 Web 服务，并自动打开浏览器，展示我们的应用程序。
总结
在本文中，我们学习了如何手动零配置地搭建一个 Webpack4 + React + MobX 的脚手架，并编写了一个简单的计数器应用程序。通过了解和实践这些技术，我们可以更好地掌握前端开发，提高代码效率和可维护性。希望这篇文章能够对你有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ec42248841e9894e72e44