介绍
在前端开发中，使用模块化的思想来组织代码是非常常见的。Webpack是一个强大的模块打包工具，可以将所有的模块打包成静态资源，使得前端开发更加高效、灵活。而Material Design Lite（MDL）是谷歌为web设计推出的一套材料设计风格的前端框架，可以帮助我们快速构建美观，易用的Web应用程序界面。
webpack-mdl就是一个将MDL框架集成到Webpack中的npm包。本文将为大家介绍如何使用npm包webpack-mdl来构建出一个简单的MDL应用，并详细讲述其具体使用方法。
安装
首先，我们需要为我们的项目安装webpack-mdl：
--- ------- ----------- ----------
此外，我们还需要安装以下依赖：
--- ------- ------- ------------------ ---------- ------------ ----------------------- ------------------- --
其中，webpack和webpack-dev-server是Webpack自带的依赖。而css-loader和style-loader可以用来解析和加载CSS文件，mini-css-extract-plugin可以将CSS提取为独立的文件，html-webpack-plugin用来自动生成HTML文件并注入打包生成的JS和CSS文件到HTML文件中。
配置webpack
在安装完以上的npm包之后，我们需要为Webpack配置文件做以下修改：
----- ---- - ---------------
----- ----------------- - ------------------------------
- ----- ----------------- - --------------------------------------
- ----- - -------------------- - - ----------------------------------
-------------- - -
------ -----------------
------- -
--------- -------------------
----- ----------------------- -------
--
------- -
------ -
-
----- ---------
- ---- ---------------------------
- --------- ---------------
- ---- ------------
- --
- ---- -
- -
- ------- ----------------------------
- -------- -
- ---- -------------------- --- --------------
- --
- --
- -------------
- --
--
-
----- --------
---- --------------- ------------------
--
-
--
-------- -
- --- ---------------------------------------
- --- ----------------------
- --------- --------------------
- -------------- ------------------
- ---
--- -------------------
--------- ---------------
------- -
------------------- -----
--------------- -----
---------------------- ----
--
---
--
- ---------- -
- ------------ -------------------- -------
- ----- -----
- ----- -----
- -
-由于Webpack4中已经停止了ExtractTextPlugin的支持，官方推荐使用MiniCssExtractPlugin来替代。因此，我们对webpack.config.js文件进行了如下修改：
----- - -------------------- - - ----------------------------------
添加了MiniCssExtractPlugin这个npm包。在之后的配置中，用它来替代了ExtractTextPlugin。
而我们也解释了为什么他们要停止对于ExtractTextPlugin的支持，因为ExtractTextPlugin很容易导致css变异抖动，同时也不好实现HMR（热模块替换）这个优化。
当我们在写配置文件时，时常会遇到这样的问题：某些参数如果写死了，可能在后期开发的时候还要再加，这时候就使用了这种方式，提供手动修改通道，方便后期维护。
-------- -
---- -------------------- --- --------------
--我们在使用webpack-dev-server服务的时候，加上port和contentBase参数，这样就可以直接打开服务查看网页效果了。
最后，我们在plugins中加入MiniCssExtractPlugin，并将早先使用的ExtractTextPlugin的原位置删除即可。
撰写代码
现在已经为项目添加了webpack-mdl和相关依赖，可以开始编写代码了。这里，我们需要在src文件夹下新建一个index.md文件。在文件中填写以下内容：
------------------------ --------------------------------
然后在src文件夹中新建一个index.css文件，添加以下CSS代码：
------- -----------------------------------------------------------------
---- -
------- -----
-
--- - -
------------ --------- -----------
------ --------
-src文件夹下的index.js文件中则需要写入以下代码：
------ ------------- ------ ----- ---- ------------ ----------------------- - -----
这些代码将CSS和markdown文件引入并插入到index.html中展示。简单来说就是动态插入的方式，从而完成了整个应用的构建。
运行
在终端进入项目根目录，输入以下命令即可运行webpack-server：
--- --- -----
运行之后，我们可以在浏览器中输入http://localhost:9000 来访问页面。
总结
本文提供了一个webpack-mdl使用教程，重点介绍了如何使用npm包webpack-mdl来构建出一个简单的MDL应用以及详细讲述了其具体使用方法。希望这篇文章对大家学习和使用webpack-mdl有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671058dd3466f61ffdd98