webpack加载不同的资源

摘要：加载不同的资源本文内容如下加载单一文件加载个或多个引入文件加载字体加载数据加载文件介绍实际操作多带带打包，插件预处理器加载在中使用公用当第三方库，不支持或时。将获取本地指令，就像使用图像一样加载数据可以加载的有用资源还有数据，如和。

webpack加载不同的资源

本文内容如下：

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

加载单一JS文件

以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。即可。

加载2个或多个js

如果是自己写的代码，通过require("./book.js");引入即可。

如果是第三方库，先安装，再通过require()或import引入即可。

引入JSON文件

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、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文件

加载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 字符串的