摘要：加載不同的資源本文內容如下加載單一文件加載個或多個引入文件加載字體加載數據加載文件介紹實際操作多帶帶打包，插件預處理器加載在中使用公用當第三方庫，不支持或時。將獲取本地指令，就像使用圖像一樣加載數據可以加載的有用資源還有數據，如和。

本文內容如下：

1 加載單一JS文件

2 加載2個或多個js

3 引入JSON文件

4 加載字體

5 加載數據CSV/TSV/XML

6 加載CSS文件介紹

7 實際操作：

8 多帶帶打包CSS，ExtractTextWebpackPlugin插件

9 CSS modules

10 CSS預處理器

11 加載Sass

12 在 Webpack 中使用公用 CDN

13 當第三方庫，不支持CommonJS或AMD時。或者需要前置庫時。

13.1 使用webpack.ProvidePlugin

13.2 使用imports-loader

以lodash.js為例子

安裝lodash

npm i lodash --save-dev

//index.js

import _ from "lodash";
function component () {
  var element = document.createElement("div");
  /* 需要引入 lodash，下一行才能正常工作 */
  element.innerHTML = _.join(["Hello","webpack"], " ");
  return element;
}
document.body.appendChild(component());

然后運行webpack。即可。

如果是自己寫的代碼，通過require("./book.js");引入即可。

如果是第三方庫，先安裝，再通過require()或import引入即可。

zyx456：JSON文件可以直接用require(filename）引入使用。

var config = require("./test.json");

import Data from "./data.json"

類似于 NodeJS，JSON 支持實際上是內置的，也就是說將正常運行。

項目目錄：

JS/

config.json

entry.js

//test.json文件

{
  "greetText": "Hi there and greetings from JSON!"
}

entry.js

var config = require("./test.json");
module.exports = function() {
  var greet = document.createElement("div");
  greet.textContent = config.greetText;
  return greet;
};

file-loader 和 url-loader 可以接收并加載任何文件，然后將其輸出到構建目錄。

這就是說，我們可以將它們用于任何類型的文件，包括字體。

webpack.config.js

const path = require("path");
  module.exports = {
    entry: "./src/index.js",
    output: {
      filename: "bundle.js",
      path: path.resolve(__dirname, "dist")
    },
    module: {
      rules: [
        {
          test: /.css$/,
          use: [
            "style-loader",
            "css-loader"
          ]
        },
        {
          test: /.(png|svg|jpg|gif)$/,
          use: [
            "file-loader"
          ]
        },
       {
         test: /.(woff|woff2|eot|ttf|otf)$/,
         use: [           "file-loader"         ]
       }
      ]
    }
  };

在項目中添加一些字體文件：

project

webpack-demo  |- package.json  |- webpack.config.js  |- /dist    |- bundle.js    |- index.html  |- /src+   |- my-font.woff+   |- my-font.woff2
    |- icon.png
    |- style.css
    |- index.js
  |- /node_modules

配置加載器并使用字體后，可以使用@font-face聲明來合并它們。

webpack將獲取本地url(...)指令，就像使用圖像一樣：

src/style.css

+ @font-face {
+   font-family: "MyFont";
+   src:  url("./my-font.woff2") format("woff2"),
+         url("./my-font.woff") format("woff");
+   font-weight: 600;
+   font-style: normal;
  }
  .hello {
    color: red;
   font-family: "MyFont";
    background: url("./icon.png");
  }

可以加載的有用資源還有數據，如 CSV、TSV 和 XML。

可以使用 csv-loader 和 xml-loader。

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

webpack.config.js

const path = require("path");
  module.exports = {
    entry: "./src/index.js",
    output: {
      filename: "bundle.js",
      path: path.resolve(__dirname, "dist")
    },
    module: {
      rules: [
        {
          test: /.css$/,
          use: [
            "style-loader",
            "css-loader"
          ]
        },
        {
          test: /.(png|svg|jpg|gif)$/,
          use: [
            "file-loader"
          ]
        },
        {
          test: /.(woff|woff2|eot|ttf|otf)$/,
          use: [
            "file-loader"
          ]
        },
+       {
+         test: /.(csv|tsv)$/,
+         use: [
+           "csv-loader"
+         ]
+       },
+       {
+         test: /.xml$/,
+         use: [
+           "xml-loader"
+         ]
+       }
      ]
    }
  };

project

webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
+   |- data.xml
    |- my-font.woff
    |- my-font.woff2
    |- icon.png
    |- style.css
    |- index.js
  |- /node_modules

src/data.xml

  Mary
  John
  Reminder
  Call Cindy on Tuesday

現在，你可以 import 這四種類型的數據(JSON, CSV, TSV, XML)中的任何一種，所導入的 Data 變量將包含可直接使用的已解析 JSON：

src/index.js

import _ from "lodash";
  import "./style.css";
  import Icon from "./icon.png";
+ import Data from "./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());

【07】添加CSS文件

【】如果直接在index.js文件里引入 CSS：

import styles from "./assets/stylesheets/application.css";

會遇到以下的錯誤：You may need an appropriate loader to handle this file type。

在應用中添加 css 文件，就需要使用到 css-loader 和 style-loader。

css-loader 會遍歷 CSS 文件，然后找到 url() 表達式然后處理他們。能夠使用類似@import 和 url(...)的方法實現 require()的功能。
style-loader 會把原來的 CSS 代碼插入頁面中的一個 style 標簽中。

【】在編譯時，css-loader會讀取CSS文件，并處理其中的import，返回CSS代碼；

而style-loader會將返回的CSS代碼作為DOM的style。

【】在生產構建下，CSS 是會被打包到 JavaScript 里的，style-loader 會把你的樣式寫在 Style 標簽里。

css-loader用來返回有@import和url()的css文件style-loader用來將css文件插入頁面。

【02】可以根據需求將一些圖片自動轉成base64編碼的，減輕很多的網絡請求。

【01】安裝 css-loader 和 style-loader(全局安裝需要參數 -g)。

cnpm install css-loader style-loader

安裝url-loader

?

npm install url-loader --save-dev

【02】然后給 webpack.config.js 添加一條規則：

Loaders會根據數組的逆序運行，也就是說 css-loader會跑在 style-loader 前面。

module.exports = {
  // …
  module: {
    rules: [
      {
        test: /.css$/,
        use: ["style-loader", "css-loader"],
      },
      // …
    ],
  },
};

webpack 根據正則表達式，來確定應該查找哪些文件，并將其提供給指定的 loader。在這種情況下，以 .css 結尾的全部文件，都將被提供給 style-loader 和 css-loader。

【03】添加css文件，注意文件的路徑。

js/style.css

body {background: yellow; }

【04】在JS文件引入CSS文件。

import "./style.css"

如何css文件根目錄/css/a.css

那么

import "../css/a.css";

css會和js打包到同一個文件中。

實際網頁中，含有 CSS 字符串的