摘要：webpack构建项目的时候各个依赖模块都称之为资产，如图片，样式，脚本等等。本章节主要学习webpack不能直接处理的资产，webpack能直接处理的是js文件，其他的需要对应的loader来处理。
Prior to webpack, front-end developers would use tools like grunt and gulp to process these assets and move them from their /src folder into their /dist or /build directory. The same idea was used for JavaScript modules, but tools like webpack will dynamically bundle all dependencies (creating what's known as a dependency graph). This is great because every module now explicitly states its dependencies and we'll avoid bundling modules that aren't in use.
这段话摘自官方文档，大概意思是说在webpack之前，前端开发人员都是用grunt,gulp等来处理资产的，并且会将资产从一个src目录打包到一个dist目录或者build目录，他们也能实现js的模块化，但是webpack不同于他们的是能动态的打包依赖，这是因为他内部构建的依赖图能够明确的知道依赖的当前状态，从而可以避免打包用不到的文件。有种按需打包的意思。
One of the coolest webpack features is that you can also include any other type of file, besides JavaScript, for which there is a loader. This means that the same benefits listed above for JavaScript (e.g. explicit dependencies) can be applied to everything used in building a website or web app. Let's start with CSS, as you may already be familiar with that setup.这段话的意思是webpack最酷的特性之一是可以包含任何类型的文件，除了JavaScript外还有一个加载器，这就意外着webpack对js按依赖构建的这种特性能够应用在任何文件上面。接下来就看看对应各类型文件的加载器。
ps: 以下的loader都是输出到当前目录，因为这里看基本的loader的效果，如果输出到其他地方，可能打包的图片等的路径引用会不对。
(一)css-loader
首先现在安装对应的加载器，命令如下：
npm install --save-dev style-loader css-loader
然后修改webpack.config.js内容，增加对应的处理器增加的内容为：module: { rules: [ { test: /\.css$/, // 正则，意思是只匹配以.css结尾的文件 use: [ // 表示对匹配到的文件用那种处理器来处理 'style-loader', 'css-loader' ] } ] }在src下新建style.css,内容如下：
.hello { color: red; }修改index.js,内容如下：
import _ from 'lodash'; import './style.css'; // js里面导入了css，我们知道js里面是不能有css的，但是有了webpack，一切就变的简单了 function component() { var element = document.createElement('div'); // Lodash, now imported by this script element.innerHTML = _.join(['Hello', 'webpack'], ' '); element.classList.add('hello'); // 动态的添加class return element; } document.body.appendChild(component());此时运行npm run build，就会出现一个红色的hello webpack字样 ，很明显css生效了，这就是对应style-loader css-loader的作用。处理样式文件这两个loader必须同时在，缺一不可。
(二)loading image
So now we're pulling in our CSS, but what about our images like backgrounds and icons? Using the file-loader we can easily incorporate those in our system as well:
这句话的意思是上面已经处理过css了，这里使用file-loader来处理图片和字体图标。
首先现在安装对应的加载器，命令如下：
npm install --save-dev file-loader修改webpack.config.js,在rules里面增加一条规则(每一条规则对应一种类型文件的处理，包括正则匹配部分和处理器部分，用test和use来标识)，内容如下：
{ test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader' ] }接下来在src下新加一个图片icon.png，并且修改index.js,内容如下：
import _ from 'lodash'; import './style.css'; import Icon from './icon.png'; // 在js中新增加了图片，js中不能直接引入图片但是通过对应的file-loader就可以了 function component() { var element = document.createElement('div'); // Lodash, now imported by this script element.innerHTML = _.join(['Hello', 'webpack'], ' '); element.classList.add('hello'); // Add the image to our existing div. var myIcon = new Image(); myIcon.src =Icon; element.appendChild(myIcon); return element; } document.body.appendChild(component());修改style.css为如下部分：
.hello { color: red; background: url('./icon.png'); }运行npm run build ,在浏览器打开index.html,就会有图片出现在浏览器中。
载入字体图标也一样，用file-loader,在webpack.config.js中增加一条规则{ test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ 'file-loader' ] }将style.css改为如下：
@font-face { font-family: 'FontAwesome'; src: url('./font-awesome-4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0'); src: url('./font-awesome-4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('./font-awesome-4.7.0/fonts/fontawesome-ebfont.woff2?v=4.7.0') format('woff2'), url('./font-awesome-4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('./font-awesome-4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('./font-awesome-4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } .hello { color: red; background: url('./icon.png'); font-family: 'FontAwesome' }
(三)loading data(载入数据)
Another useful asset that can be loaded is data, like JSON files, CSVs, TSVs, and XML. Support for JSON is actually built-in, similar to NodeJS, meaning import Data from './data.json' will work by default. To import CSVs, TSVs, and XML you could use the csv-loader and xml-loader. Let's handle loading all three:
这句话是说载入数据类型的资产，如像json文件，SCVs,XML文件等等，对于数据资产的支持，webpack默认支持的是JSON，这就意味着如果导入类似import Data from './data.json'的json文件，是没有任何问题的，不需要对应的处理器，但是导入的是其他类型的如CSVs,XML等的，则需要对应的loader来处理。如下：加载一个xml文件。
首先现在安装对应的加载器，命令如下：
npm install --save-dev csv-loader xml-loader在webpack.config.js中增加两个loader:
{ test: /\.(csv|tsv)$/, use: [ 'csv-loader' ] }, { test: /\.xml$/, use: [ 'xml-loader' ] }在src下新建一个data.xml,内容如下：
<?xml version="1.0" encoding="UTF-8"?> <note> <to>Mary</to> <from>John</from> <heading>Reminder</heading> <body>Call Cindy on Tuesday</body> </note>修改index.js为下面内容：
import _ from 'lodash'; import './style.css'; import Icon from './icon.png'; // 在js中新增加了图片，js中不能直接引入图片但是通过对应的file-loader就可以了 import Data from './data.xml'; // 载入data.xml文件 function component() { var element = document.createElement('div'); // Lodash, now imported by this script element.innerHTML = _.join(['Hello', 'webpack'], ' '); element.classList.add('hello'); // Add the image to our existing div. var myIcon = new Image(); myIcon.src =Icon; element.appendChild(myIcon); console.log(Data); return element; } document.body.appendChild(component());官方文档有这样一句话：This can be especially helpful when implementing some sort of data visualization using a tool like d3. Instead of making an ajax request and parsing the data at runtime you can load it into your module during the build process so that the parsed data is ready to go as soon as the module hits the browser大致意思就是对于网站中的一些形象化的数据（模拟数据），可以不用发请求，通过这样的方式载入一个xml，或者json之类的假数据，能更快的完成渲染。这也就是这些loader存在的意义吧。充当假数据或者一些配置信息。
总结：以上就是常用loader的基本用法，用法都一样，但必须注意要加载对应的loader,否则你懂得。跟多的loader可以上webpack官网查看https://webpack.js.org/loaders/
