【WEBPACK v4.29.6 随缘翻译】4.资源管理

作者: 钟志弘 | 来源:发表于2019-03-12 00:00 被阅读0次

资源管理

如果你从一开始就跟着教程做，你现在已经有一个叫做"Hello webpack"的小项目了，现在让我们尝试处理其他的资源，像是 images，看看他们是如何被处理的。

在webpack之前，前端开发者会使用grunt 、gulp之类的工具去处理这些资源文件，并且把他们从/src 目录移动到 /dist 甚至是 /build 目录。当然这个想法也同样用于处理Javascript模块，但是像是webpack这类工具会动态构建所有依赖项目（创建之前说过的依赖图像），这简直棒极了，因为所有模块现在显式地声明它地依赖项，这样我们就可以避免把不必要地依赖项构建到当前项目中去。

webpack最棒的一个特性是，只要有loader，你可以包含任何类型的文件到当前模块，而不仅仅Javascript 。这就意味着对于任何用于JavaScript的好东西（像是显式声明依赖项）可以同样接受所有东西，去构建你的网站或者app，让我们先从css开始吧，你可以已经对此步骤非常熟悉了。

构建

首先对我们之前使用的项目做一些微小的更改：

  <!doctype html>
  <html>
    <head>
-    <title>Getting Started</title>
+    <title>Asset Management</title>
    </head>
    <body>
-     <script src="./main.js"></script>
+     <script src="./bundle.js"></script>
    </body>
  </html>

webpack.config.js

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
-     filename: 'main.js',
+     filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

加载 CSS

为了将一个css 引入到JavaScript模块中，你需要将 style-loader 以及 css-loader 安装并且添加到你的 module configuration 中：

npm install --save-dev style-loader css-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'
+         ]
+       }
+     ]
+   }
  };

 webpack 使用常规的表达式去检测那个文件应该被查找，并且将它推送给指定的loader去处理。这样的话任何以.css 结尾的文件都会被分配给 style-loader 和 css-loader 。

这可以让你成功引入 style.css( import './style.css') 文件到需要该样式的模块中。现在一旦模块运行，一个包含字符化css的<style>会插入到html文件的 <header> 标签中。

让我们添加一个 style.css 文件到项目中并把它引入到index.js 中：

project

  webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
+   |- style.css
    |- index.js
  |- /node_modules

src/style.css

.hello {
  color: red;
}

src/index.js

 import _ from 'lodash';
+ import './style.css';

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

    // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+   element.classList.add('hello');

    return element;
  }

  document.body.appendChild(component());

然后使用你的构建命令：

npm run build

...
    Asset      Size  Chunks             Chunk Names
bundle.js  76.4 KiB       0  [emitted]  main
Entrypoint main = bundle.js
...

在浏览器中再次打开 index.html，你应该会看到 Hello webpack 已经被格式化为红色。想看webpack究竟对我们的项目做了什么，检查页面(不要看页面源文件，因为它不会给你看的(✿◡‿◡))，只需要看页面的head标签。它一般会包含我们之前给index.js 引入的style块。

记住你可以，并且大多数情况下需要，最小化css , 为了更短时间加载完毕。在最上面，有许多不同风格的CSS loader 供你挑选。例如 postcss, sass, less ，这里仅仅举几个例子。

加载图片

现在我们可以在项目里引入css ，但是如果我们的图片，像是背景图片或者是图标也想搞进去该怎么办呢？ ——使用file-loader 我们可以同样很轻松地将他们插入到项目中：

npm install --save-dev file-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'
+         ]
+       }
      ]
    }
  };

现在，当你引入图片(import MyImage from './my-image.png')，这个图片会被处理，并添加到你的输出目录中，处理完毕的图片最终会生成一个url。当像上面那样使用css-loader 的时候，类似的处理过程会把url('./my-image.png')添加入你的CSS中。loader会把图片识别问本地文件，并且将'./my-image.png'路劲替换为最终在你输出目录下的图片路径。 html-loader 以同样的方式处理<img src="./my-image.png" />。
现在添加一个图片到我们项目中，然后看看它是怎么工作的，你可以引用任何你喜欢的图片(意味着教程不提供图片...)：

project

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

src/index.js

 import _ from 'lodash';
  import './style.css';
+ import Icon from './icon.png';

  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());

src/style.css

  .hello {
    color: red;
+   background: url('./icon.png');
  }

生成一个新的构建并再次打开index.html

npm run build

...
                               Asset      Size  Chunks                    Chunk Names
da4574bb234ddc4bb47cbe1ca4b20303.png  3.01 MiB          [emitted]  [big]
                           bundle.js  76.7 KiB       0  [emitted]         main
Entrypoint main = bundle.js
...

如果一切顺利，你应该会看到你的你的icon变成了一个叠加的背景图片，就像是要给img 标签在我们的Hello webpack 下面一样(笑). 如果你观察这个元素，你会看到它真正的面目（文件名）已经变成像下面这个样子：
5c999da72346a995e7e2718865d019c8.png。这意味着webpack在我们的src文件夹找到了图片并且成功的处理掉了它。
一个合理的不走是最小化并且优化你的图片。浏览 image-webpack-loader以及url-loader以查看更多关于如何加强图片加载处理的技能！

加载字体

如果要加载其他资源，像是字体呢？文件、url loader 会处理任何你载入的文件并且输出到你的build 目录。这就意味着我们使用它去处理任何类型的文件，包括fonts。首先，更改一下 webpack.config.js 使得webpack具有加载字体的能力。

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 声明去写作处理。本地的 url(...) 指令会被webpack处理，就像处理image那样：

+ @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');
  }

现在运行build命令，看看wbepack是否处理了字体文件：

npm run build

...
                                 Asset      Size  Chunks                    Chunk Names
5439466351d432b73fdb518c6ae9654a.woff2  19.5 KiB          [emitted]
 387c65cc923ad19790469cfb5b7cb583.woff  23.4 KiB          [emitted]
  da4574bb234ddc4bb47cbe1ca4b20303.png  3.01 MiB          [emitted]  [big]
                             bundle.js    77 KiB       0  [emitted]         main
Entrypoint main = bundle.js

打开index.html ，看看我们的Hello Webpack 文本是否已经被改变为新的字体。如果一切顺利，应该是会看到这些变化的。

加载数据

另外一个很有用的可被加载资源是data，像是JSON files , CSVs, TSVS ,以及XML。对于JSON的支持实际上已经被内部支持，像是NodeJS一样，意味着 import Data from './data.json' 可以直接被运行。但是如果要加载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'
+         ]
+       }
      ]
    }
  };

添加一些数据文件到你的项目中：

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

<?xml version="1.0" encoding="UTF-8"?>
<note>
  <to>Mary</to>
  <from>John</from>
  <heading>Reminder</heading>
  <body>Call Cindy on Tuesday</body>
</note>

现在你可以加载任何JSON, CSV,TSV,XML。你引入的Data变量会被解析为JSON。

  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;
  }

再次运行npm run build 命令，并且打开Index.html。如果你看了控制台（浏览器或者NODE），你应该可以看到你载入的data 被打印到控制台上。

  这个在实现一些数据可视化工具，例如D3 会变得非常有用。 比起在运行时请求ajax请求并且转换data， 你可以在构建的时候就将它载入你的模块， 而转换过后的数据可以在模块载入到浏览器的时候马上被使用。

全局资源

上面提到的最酷的一部分是，使用这个方式加载模块允许你给模块和资源分组到一起，使其变得更加直观。比起依赖于包含所有资源的全局的/assets 目录，你可以将对应的资源文件于代码分到同一个目录下。例如，下面这个目录结构会变得非常有用：

- |- /assets
+ |– /components
+ |  |– /my-component
+ |  |  |– index.jsx
+ |  |  |– index.css
+ |  |  |– icon.svg
+ |  |  |– img.png

这个步骤让你的代码变得更“便携“ 当所有组件即将对接的时候。加入你想把 /my-component 用于其他项目，直接简单的复制或者移动这个目录到目标项目的/components 下。一旦你安装了所需要的外部依赖项，以及你的配置文件中对应的loaders被定义，你的组件应该能跑起来。

然而，加入你已经被你那根深蒂固的观念束缚，或者你有一些资源是多个组件共享的（views, templates, modules, 等到）。 webpack依然可以将这些资源保存在根目录下，你甚至可以使用 aliasing 让项目变得更加容易加载。

包装

下一节教程，我们不需要使用本章用到的，这些乱七八糟的资源文件。所以我们需要对其做一些清理以便我们进入下一章节。

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

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'
-         ]
-       }
-     ]
-   }
  };

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;
  }

【WEBPACK v4.29.6 随缘翻译】4.资源管理

资源管理

构建

webpack.config.js

加载 CSS

webpack.config.js

project

src/style.css

src/index.js

加载图片

webpack.config.js

project

src/index.js

src/style.css

加载字体

webpack.config.js

project

加载数据

webpack.config.js

全局资源

包装

project

webpack.config.js

src/index.js

本节完

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读