翻譯作者：飯團(tuán)爸爸

資源管理

如果你已經(jīng)讀過webpack指南初探那么你已經(jīng)有一個(gè)簡單的 'Hello webpack' 的項(xiàng)目?，F(xiàn)在讓我嘗試去添加一些其它的資源,比如說圖片，看看 webpack 是如何處理的。

在有 webpack 之前，前端開發(fā)工程師使用 grunt 或者 gulp 等工具去處理資源文件，然后將它們從src文件夾移動(dòng)到/dist或者/build文件夾中。類似的方法在 JavaScript Module,但是類似 webpack 的工具會(huì)動(dòng)態(tài)綁定所有的依賴（通過創(chuàng)建依賴圖的方式）。這樣的好處在于所有的模塊都顯示聲明它們的依賴，避免綁定我們不需要的模塊。

webpack 中一個(gè)非常酷的功能是可以包含除了 JavaScript 文件之外的任何文件，只需要配置好相應(yīng)的加載器 loader。這意味著以上那些關(guān)于 JavaScript（例如：顯示聲明）的優(yōu)點(diǎn)可以用在構(gòu)建 website 或者 webapp 的各處?，F(xiàn)在我們從 CSS 這個(gè)可能是你最熟悉的部分開始。

譯者注釋 : webpack 將各種資源文件統(tǒng)稱為 asset，這個(gè)詞一般指資產(chǎn)，不過資產(chǎn)這個(gè)詞
過于正式，所以在這里我將統(tǒng)一將 asset 翻譯為資源

步驟

在此之前，我們先對(duì)我們的項(xiàng)目做一點(diǎn)微調(diào)。

dist/index.html

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

加載 CSS

為了import一個(gè) CSS 文件從 JavaScript 模塊，你需要安裝然后添加style-loader和css-loader到你的module配置：

npm install --save-dev style-loader css-loader

webpack.config.js

  var 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 使用正則表達(dá)式去指明需要搜索什么文件，以及如何去加載這些文件。在這里
例子中，所有文件后綴名稱為.css的文件將會(huì)被stlye-loader和css-loader加載。

上述配置將使你可以用import的方式將'./style.css'引入你的文件中?，F(xiàn)在我們讓這個(gè)模塊運(yùn)行起來。一個(gè)<script>標(biāo)簽將會(huì)被被一段在 html 文件頭部的字符串所替代。

現(xiàn)在讓我們添加一個(gè)新的style.css文件到我們的項(xiàng)目中，并且將其添加到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());

現(xiàn)在開始運(yùn)行構(gòu)建命令

npm run build

Hash: 9a3abfc96300ef87880f
Version: webpack 2.6.1
Time: 834ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  560 kB       0  [emitted]  [big]  main
   [0] ./~/lodash/lodash.js 540 kB {0} [built]
   [1] ./src/style.css 1 kB {0} [built]
   [2] ./~/css-loader!./src/style.css 191 bytes {0} [built]
   [3] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
   [4] ./~/style-loader/lib/addStyles.js 8.7 kB {0} [built]
   [5] ./~/style-loader/lib/urls.js 3.01 kB {0} [built]
   [6] (webpack)/buildin/global.js 509 bytes {0} [built]
   [7] (webpack)/buildin/module.js 517 bytes {0} [built]
   [8] ./src/index.js 351 bytes {0} [built]

打開index.html文件在你的瀏覽器，你會(huì)看到Hello webpack現(xiàn)在變成紅色了。為了看 webpack 做了什么，我們可以檢視頁面（不要查看頁面代碼，它不會(huì)給你展示結(jié)果)，然后看頁面的 <head> tag，你會(huì)看見我們的樣式已經(jīng)被包含在內(nèi)了。

你甚至可以拆分你的 CSS 文件，以便能在生產(chǎn)環(huán)節(jié)中更好的決定加載實(shí)際。除此之外你
還可以加載 CSS 的變體包括 postcss,sass 或者 less.

加載圖片

現(xiàn)在我們可以修改 CSS 了，那么我們?nèi)绾翁砑訄D片作為背景或者圖標(biāo)呢？使用file-loader我們可以很容易的將它們納入我們的體系中.首先我們按照 file-loader

npm install --save-dev file-loader

webpack.config.js

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

現(xiàn)在，當(dāng)你從./my-image.png中引入MyImage,這個(gè)圖片將被處理，然后添加到output目錄，并且這個(gè)MyImage變量將包含這個(gè)圖片被處理后的最終 url。當(dāng)使用css-loader，正如所展示的那樣，一個(gè)類似的處理url('./my-image.png')的方法會(huì)被調(diào)用在你的 CSS 中。這個(gè)加載器將會(huì)識(shí)別出這個(gè)本地文件，然后替換'./my-image.png'路徑為最終output文件夾中的目錄。html-loader 處理![](./my-image.png)使用同樣的方法。

現(xiàn)在我們添加圖片到我們的項(xiàng)目中，看看它是如何工作的，你可以使用任意一張你自己的圖片。

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

讓我們重新構(gòu)建項(xiàng)目，然后打開 index.html 文件。

npm run build

Hash: 854865050ea3c1c7f237
Version: webpack 2.6.1
Time: 895ms
                               Asset     Size  Chunks                    Chunk Names
5c999da72346a995e7e2718865d019c8.png  11.3 kB          [emitted]
                           bundle.js   561 kB       0  [emitted]  [big]  main
   [0] ./src/icon.png 82 bytes {0} [built]
   [1] ./~/lodash/lodash.js 540 kB {0} [built]
   [2] ./src/style.css 1 kB {0} [built]
   [3] ./~/css-loader!./src/style.css 242 bytes {0} [built]
   [4] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
   [5] ./~/style-loader/lib/addStyles.js 8.7 kB {0} [built]
   [6] ./~/style-loader/lib/urls.js 3.01 kB {0} [built]
   [7] (webpack)/buildin/global.js 509 bytes {0} [built]
   [8] (webpack)/buildin/module.js 517 bytes {0} [built]
   [9] ./src/index.js 503 bytes {0} [built]

如果一切正常的話，你可以看到你的 icon 會(huì)作為背景反復(fù)出現(xiàn)，與此同時(shí)一個(gè)img元素將會(huì)出現(xiàn)在Hello webpack文本后面。如果你審查這些元素，你會(huì)看到實(shí)際的文件名稱已經(jīng)被該為類似5c999da72346a995e7e2718865d019c8.png的結(jié)構(gòu)，這意味著 webpack 在src中找到了我們的文件，并且處理過他們。

一個(gè)合理的步驟是壓縮和優(yōu)化你的圖片，查看 image-webpack-loader 和 url-loader 的介紹獲取更多關(guān)于如何優(yōu)化你的圖片處理過程的內(nèi)容。

加載字體

好！現(xiàn)在我們來看看如何加載字體資源。文件和 url 加載器可以加載任何文件，并且輸出到你的構(gòu)建目錄中，任何文件意味著包括字體文件。現(xiàn)在我們更新配置文件去處理字體文件。

webpack.config.js

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

添加一些字體文件到你的項(xiàng)目中

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

使用以上的加載器配置和字體文件，你可以將字體納入你的項(xiàng)目，使用引用本地文件的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');
  }

現(xiàn)在我們?cè)俅螛?gòu)建

npm run build

Hash: b4aef94169088c79ed1c
Version: webpack 2.6.1
Time: 775ms
                                Asset     Size  Chunks                    Chunk Names
 5c999da72346a995e7e2718865d019c8.png  11.3 kB          [emitted]
11aebbbd407bcc3ab1e914ca0238d24d.woff   221 kB          [emitted]
                            bundle.js   561 kB       0  [emitted]  [big]  main
   [0] ./src/icon.png 82 bytes {0} [built]
   [1] ./~/lodash/lodash.js 540 kB {0} [built]
   [2] ./src/style.css 1 kB {0} [built]
   [3] ./~/css-loader!./src/style.css 420 bytes {0} [built]
   [4] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
   [5] ./src/MyFont.woff 83 bytes {0} [built]
   [6] ./~/style-loader/lib/addStyles.js 8.7 kB {0} [built]
   [7] ./~/style-loader/lib/urls.js 3.01 kB {0} [built]
   [8] (webpack)/buildin/global.js 509 bytes {0} [built]
   [9] (webpack)/buildin/module.js 517 bytes {0} [built]
  [10] ./src/index.js 503 bytes {0} [built]

打開index.html文件，我們可以看到Hello webpack的字體已經(jīng)改變?yōu)樾碌淖煮w，如果一切正常，你會(huì)看到這些變化的。

加載數(shù)據(jù)

另一種常用的被加載的是數(shù)據(jù)，類似 JSON 文件，CSVs,TSVs 和 XML。NodeJS 原生支持對(duì) JSON 文件的支持，這意味著你只需要使用 import Data from './data.json'命令就可以直接使用了。但是引入 CSVs,TSVs 和 XML 你需要使用csv-loader和xml-loader,現(xiàn)在讓我們同時(shí)加載它們。

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

webpack.config.js

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

添加數(shù)據(jù)文件到項(xiàng)目中

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

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

現(xiàn)在我們可以通過import使用者四種數(shù)據(jù)(JSON,CSV,TSV,XML)并且數(shù)據(jù)將被直接解析為 JSON 結(jié)構(gòu)易于我們使用。

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

當(dāng)你打開index.html文件,你可以在瀏覽器的開發(fā)工具控制臺(tái)中看到被引入的文件的日志。

（譯者注：使用這個(gè)加載數(shù)據(jù)文件的特性，非常有利于測(cè)試，可以用這個(gè)特性模擬 ajax 請(qǐng)求的數(shù)據(jù)，有助于前后端同時(shí)開始。而不相互等待)

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

webpack指南 - 資源管理

webpack指南 - 資源管理

資源管理

步驟

dist/index.html

加載 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

src/style.css

加載數(shù)據(jù)

webpack.config.js

project

src/data.xml

src/index.js

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

webpack指南 - 資源管理

資源管理

步驟

dist/index.html

加載 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

src/style.css

加載數(shù)據(jù)

webpack.config.js

project

src/data.xml

src/index.js

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av