摘要：webpack構(gòu)建項(xiàng)目的時(shí)候各個(gè)依賴模塊都稱之為資產(chǎn)蝌数，如圖片，樣式贷祈，腳本等等趋急。本章節(jié)主要學(xué)習(xí)webpack不能直接處理的資產(chǎn)，webpack能直接處理的是js文件势誊，其他的需要對(duì)應(yīng)的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之前粟耻，前端開發(fā)人員都是用grunt,gulp等來處理資產(chǎn)的查近，并且會(huì)將資產(chǎn)從一個(gè)src目錄打包到一個(gè)dist目錄或者build目錄，他們也能實(shí)現(xiàn)js的模塊化挤忙，但是webpack不同于他們的是能動(dòng)態(tài)的打包依賴霜威，這是因?yàn)樗麅?nèi)部構(gòu)建的依賴圖能夠明確的知道依賴的當(dāng)前狀態(tài)，從而可以避免打包用不到的文件册烈。有種按需打包的意思戈泼。
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外還有一個(gè)加載器赏僧，這就意外著webpack對(duì)js按依賴構(gòu)建的這種特性能夠應(yīng)用在任何文件上面大猛。接下來就看看對(duì)應(yīng)各類型文件的加載器。

ps: 以下的loader都是輸出到當(dāng)前目錄淀零，因?yàn)檫@里看基本的loader的效果挽绩，如果輸出到其他地方，可能打包的圖片等的路徑引用會(huì)不對(duì)窑滞。

(一)css-loader

首先現(xiàn)在安裝對(duì)應(yīng)的加載器琼牧，命令如下：
npm install --save-dev style-loader css-loader
然后修改webpack.config.js內(nèi)容，增加對(duì)應(yīng)的處理器增加的內(nèi)容為：

 module: {
  rules: [
      {
          test: /\.css$/, // 正則哀卫，意思是只匹配以.css結(jié)尾的文件
          use: [ // 表示對(duì)匹配到的文件用那種處理器來處理
              'style-loader',
              'css-loader'
         ]
     }
  ]
 }

在src下新建style.css,內(nèi)容如下：

.hello {
 color: red;
}

修改index.js,內(nèi)容如下：

import _ from 'lodash';
import './style.css'; // js里面導(dǎo)入了css，我們知道js里面是不能有css的撬槽，但是有了webpack此改，一切就變的簡(jiǎn)單了

 function component() {
   var element = document.createElement('div');

   // Lodash, now imported by this script
   element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  element.classList.add('hello'); // 動(dòng)態(tài)的添加class

   return element;
 }

 document.body.appendChild(component());

此時(shí)運(yùn)行npm run build，就會(huì)出現(xiàn)一個(gè)紅色的hello webpack字樣 侄柔，很明顯css生效了共啃，這就是對(duì)應(yīng)style-loader css-loader的作用。處理樣式文件這兩個(gè)loader必須同時(shí)在暂题，缺一不可移剪。

(二)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:
這句話的意思是上面已經(jīng)處理過css了，這里使用file-loader來處理圖片和字體圖標(biāo)薪者。

首先現(xiàn)在安裝對(duì)應(yīng)的加載器纵苛，命令如下：

npm install --save-dev file-loader

修改webpack.config.js,在rules里面增加一條規(guī)則(每一條規(guī)則對(duì)應(yīng)一種類型文件的處理，包括正則匹配部分和處理器部分，用test和use來標(biāo)識(shí))攻人，內(nèi)容如下：

 {
   test: /\.(png|svg|jpg|gif)$/,
      use: [
       'file-loader'
     ]
  }

接下來在src下新加一個(gè)圖片icon.png取试，并且修改index.js,內(nèi)容如下：

 import _ from 'lodash';
 import './style.css';
 import Icon from './icon.png'; // 在js中新增加了圖片，js中不能直接引入圖片但是通過對(duì)應(yīng)的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');
 }

運(yùn)行npm run build ,在瀏覽器打開index.html,就會(huì)有圖片出現(xiàn)在瀏覽器中怀吻。
載入字體圖標(biāo)也一樣瞬浓，用file-loader,在webpack.config.js中增加一條規(guī)則

   {
        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(載入數(shù)據(jù))

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:
這句話是說載入數(shù)據(jù)類型的資產(chǎn)，如像json文件蓬坡，SCVs,XML文件等等猿棉，對(duì)于數(shù)據(jù)資產(chǎn)的支持，webpack默認(rèn)支持的是JSON屑咳，這就意味著如果導(dǎo)入類似import Data from './data.json'的json文件萨赁，是沒有任何問題的，不需要對(duì)應(yīng)的處理器乔宿，但是導(dǎo)入的是其他類型的如CSVs,XML等的位迂，則需要對(duì)應(yīng)的loader來處理。如下：加載一個(gè)xml文件详瑞。

首先現(xiàn)在安裝對(duì)應(yīng)的加載器掂林，命令如下：

npm install --save-dev csv-loader xml-loader

在webpack.config.js中增加兩個(gè)loader:

{
        test: /\.(csv|tsv)$/,
        use: [
          'csv-loader'
        ]
      },
      {
        test: /\.xml$/,
        use: [
          'xml-loader'
        ]
      }

在src下新建一個(gè)data.xml,內(nèi)容如下：

<?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為下面內(nèi)容：

 import _ from 'lodash';
 import './style.css';
 import Icon from './icon.png'; // 在js中新增加了圖片，js中不能直接引入圖片但是通過對(duì)應(yīng)的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大致意思就是對(duì)于網(wǎng)站中的一些形象化的數(shù)據(jù)（模擬數(shù)據(jù)）坝橡，可以不用發(fā)請(qǐng)求泻帮，通過這樣的方式載入一個(gè)xml，或者json之類的假數(shù)據(jù)计寇，能更快的完成渲染锣杂。這也就是這些loader存在的意義吧。充當(dāng)假數(shù)據(jù)或者一些配置信息番宁。

總結(jié)：以上就是常用loader的基本用法元莫，用法都一樣，但必須注意要加載對(duì)應(yīng)的loader,否則你懂得蝶押。跟多的loader可以上webpack官網(wǎng)查看https://webpack.js.org/loaders/