我们之前一节都是对一些js的资源进行打包，但是如果我们的项目中还有一些其他的资源呢？比如说：images。
在webpack中除了可以引入JavaScript，还可以通过loader引入其他类型的文件。主要的实现是使用loader来实现的。
加载各类资源用到的module
- 加载
css文件需要style-loader css-loader - 字体和图片需要
file-loader -
CSV、TSV和XML需要csv-loader和xml-loader
安装
文件目录
现在对代码进行修改后
webpack.config.js
index.js
加载CSS
为了在JavaScript模块中的import一个CSS文件，需要安装 style-loader 和 css-loader这两个插件，在module的配置中添加这些loader
npm install --save-dev style-loader css-loader
并在webpack.config.js的文件中的module进行相关的修改：
webpack.config.js
添加一个css文件，用来使用样式
文件目录
index.css
对index的文档也进行相对应的修改
index.js
加载images图像
在加载css的时候，我们也可能需要background会让icon这样的图片，但是我们要要如何处理呢？在这个部分我们使用的是file-loader，我们就可以将这些内容混合到css里面了。
npm install --save-dev file-loader
对webpack的配置如下：
webpack.config.js
我们尝试向项目中添加一个图像，看看它具体是如何工作的，现在项目中添加一个图片：
项目目录
index.js
index.less
然后执行打包的命令，打包成功后可以在网页中看到该界面。
加载数据
有的时候我们请求的资源或是数据是内置，如JSON文件，CSV，TSV和XML。我们有一个例子比如说我们要本地的json文件，因为加载CSV、TSV和XML需要用到CSV-loader和xml-loader，让我们来加载这三类文件。
npm install --save-dev csv-loader xml-loader
webpack.config.js
现在在项目目录添加一个data.xml文档：
新的项目目录
data.xml
可以 import 这四种类型的数据(JSON, CSV, TSV, XML)中的任何一种，所导入的 Data 变量，将包含可直接使用的已解析 JSON：
index.js
执行npm run build然后打开index.html,在控制台看一下打出控制台，我们可以看到导入的结果。
Data的输出结果
网友评论