什么是 mdb-webpack
mdb-webpack 是一个基于 webpack 的前端工具包，它将包括 Bootstrap、Material Design for Bootstrap、Font Awesome 和 jQuery 等常用库在内的一系列前端资源集合在了一起，可以简化前端开发中的构建配置，同时提供了许多实用的工具和组件。
如何安装与使用
首先，需要确保本地已经安装了 Node.js 和 npm。然后在项目根目录执行以下命令：
npm install mdb-webpack --save-dev
如果你使用的是 yarn，可以这样安装：
yarn add mdb-webpack --dev
安装完成后，在项目的 webpack 配置文件中引入 mdb-webpack：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---------- - -----------------------
-------------- - -
-- ------------
-- ---
-------- -
--- ------------
-- ---
------------------ -------------------- ---------------------
-- ---
---
-- ----
-- ---
--
-- ----
-- ---
-这里的 webpackConfigPath 是必需的参数，表示项目中的 webpack 配置文件所在路径，其他配置项详见 官方文档。
mdb-webpack 常用功能
引入全局样式
mdb-webpack 自带了许多实用的样式库，你可以直接在项目中引入它们：
-- -------------------- ---- ------- -- ------ ------ -------------------------------- ------ -------------------------- ------ ---------------------------- ------ ------------------------------------------ -- -- ---- ---- ------ -------------------------------------- ------ -------------------------------------- ------ --------------------------------------- ------ ---------------------------------------- ------ --------------------------------------- ------ --------------------------------------- ------ ---------------------------------------- ------ ----------------------------------------- ------ ------------------------------------- ------ ------------------------------------- ------ -------------------------------------- ------ ---------------------------------------
引入组件
mdb-webpack 中内置了许多实用的组件，你可以直接在代码中引入它们：
-- -------------------- ---- -------
------ - ------- ---- -------- ----------- ------ ------- -- - ---- --------------
-- ---
-------- -
------ -
------- -------------- ---- ------------
---- ------------------- -------
-------- -------
----
----------
---------
--------
----------
---------
-------
----------
---------
-----
----------
------
----------- ------------------ ------- ---- ---------
------ ----------------------- -------- ----------- -------------------- ------------------- --
------- --------------- ------- --------- ------------- --------------------
------
--- ------------- ---------------- --
---------
-------------
---------
--
-引入 jQuery 插件
mdb-webpack 中也包含了许多实用的 jQuery 插件，你可以在 JavaScript 文件中直接使用它们：
import 'mdb-webpack/js/jquery-3.3.1.min.js';
// ...
$('.some-element').datepicker({
format: 'yyyy-mm-dd'
});引入 Font Awesome 图标
mdb-webpack 中包含了 Font Awesome 图标库，你可以在项目中直接使用它：
import { Fa } from 'mdb-webpack';
// ...
<Fa icon="check-square" />示例代码
最后，附上一个完整的示例代码，使用 mdb-webpack 快速构建一个基于 React 的单页面应用：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -------- ---- ------------
------ - ------- ---- -------- ----------- ------ ------- -- - ---- --------------
----- --- ------- --------- -
-------- -
------ -
-----
------- -------------- ---- ------------
---- ------------------- -------
-------- -------
----
----------
---------
--------
----------
---------
-------
----------
---------
-----
----------
------
----------- ------------------ ------- ---- ---------
------ ----------------------- -------- ----------- -------------------- ------------------- --
------- --------------- ------- --------- ------------- --------------------
------
--- ------------- ---------------- --
---------
-------------
---------
---- -------------------- ------
--- ------------------------------ -----------------
------
------
--
-
-
-------------------- --- ---------------------------------通过 mdb-webpack，你可以轻松地使用 React 和许多实用的前端工具和组件构建出美观、实用的单页面应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c1a81e8991b448ebb58