webpack实践（2）-- css file的加载

我们之前一节都是对一些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的输出结果