Webpack 資源管理

資源管理

📌 提示：

1. 版本問題

   本文基於 webpack 2.x 版本。webpack 2.x 相比 webpack 1.x 有重大改變。因此，若是你的項目中已使用了 webpack 1.x ，本教程的示例將不適用，請慎重。

   若是鐵了心要升級 webpack ，請參考 webpack 官方文檔 - 從 v1 遷移到 v2

2. 閱讀建議

   閱讀本文前，建議先閱讀 Webpack 概念 。

webpack 的優點

webpack 最重要的功能就是資源管理。

JavaScript 世界已有好幾個有名的資源管理工具，webpack 有什麼獨到之處呢？

在 webpack 出現以前，前端開發人員會使用 grunt 和 gulp 等工具來處理這些 web 資源，如樣式文件（例如 .css, .less, .sass），圖片（例如 .png, .jpg, .svg），字體（例如 .woff, .woff2, .eot）和數據（例如 .json, .xml, .csv）等，並將它們從 /src 文件夾移動到 /dist 或 /build 目錄中。

而 webpack 從 entry(入口) 開始，訪問應用程序，並動態打包(dynamically bundle)全部依賴項。這是極好的創舉，由於如今每一個模塊均可以明確表述它自身的依賴，這能夠避免打包未使用的模塊。

Loader

Loader(加載器) 用於對模塊的源代碼進行轉換。

使用加載器通常遵循幾步：

1. 安裝加載器
2. 配置 Loader
3. 引用資源文件

安裝加載器

根據須要加載的資源文件，選擇下載對應的加載器。

$ npm install --save-dev css-loader

更多 webpack 可用Loader 請查看：webpack loaders

配置 Loader

​⚠️ 注意：

webpack 2.x 版本的 Loader 配置和 webpack 1.x 版本差異很大。

Loader 在 webpack.config.js 文件的 module 屬性中配置。

資源類型對應單一加載器

module: {
  rules: [
    {test: /\.css$/, loader: 'css-loader'}
  ]
},

資源類型對應多個加載器

module: {
  rules: [
    {
      test: /\.css$/,
      use: ["style-loader", "css-loader"]
    }
  ]
},

加載器含配置選項

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        { loader: 'style-loader' },
        {
          loader: 'css-loader',
          options: {
            modules: true
          }
        }
      ]
    }
  ]
},

引用資源文件

完成上兩步後，就能夠在 JavaScript 中使用 import ，require 關鍵字引用相應類型資源文件。

import './index.css';
require('./index.css');

Plugin

Plugin(插件) 用於解決 Loader 沒法解決的問題，它是 Loader 的輔助。

因爲 plugin 能夠攜帶參數/選項，你必須在 wepback 配置中，向 plugins 屬性傳入 new 實例。

安裝插件

webpack 自身包含了一些經常使用插件，你能夠經過 webpack 來引用。除此以外的插件，使用前須要安裝

$ npm install --save-dev html-webpack-plugin OpenBrowserPlugin

更多 webpack Plugins 能夠查看： webpack plugins

配置 Plugin

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');

module.exports = {
  // 附加插件列表
  plugins: [
    // 壓縮 js 插件
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),

    // 用於簡化 HTML 文件（index.html）的建立，提供訪問 bundle 的服務。
    new HtmlWebpackPlugin({
      title: "react-step-by-step",
      template: "./index.html"
    }),

    // 自動打開瀏覽器
    new OpenBrowserPlugin({
      url: "http://localhost:8080"
    })
  ]
};

加載資源專題

加載 React

不少瀏覽器並不識別 React 語法，爲了讓瀏覽器支持，你須要使用 babel-loader 解釋器來轉義 React 語法爲普通的 Javascript 語法。

⚠️ 注意：

官方推薦 babel-loader 和 webpack 的對應版本

webpack 1.x | babel-loader <= 6.x

webpack 2.x | babel-loader >= 7.x （推薦）（^6.2.10 也能夠運行，但會有不同意的警告(deprecation warnings)）

首先，安裝須要使用的庫：

$ npm install --save-dev babel-loader babel-preset-es2015 babel-preset-react

babel-preset-xxx 表示你但願轉義的語法。

webpack.config.js 中的模塊配置以下：

// 關於模塊配置
module: {

  // 模塊規則（配置 loader、解析器等選項）
  rules: [
    // 這裏是匹配條件，每一個選項都接收一個正則表達式或字符串
    // test 和 include 具備相同的做用，都是必須匹配選項
    // exclude 是必不匹配選項（優先於 test 和 include）
    // 最佳實踐：
    // - 只在 test 和 文件名匹配 中使用正則表達式
    // - 在 include 和 exclude 中使用絕對路徑數組
    // - 儘可能避免 exclude，更傾向於使用 include
    {
      // 語義解釋器，將 js/jsx 文件中的 es2015/react 語法自動轉爲瀏覽器可識別的 Javascript 語法
      test: /\.jsx?$/,
      include: path.resolve(__dirname, "app"),

      // 應該應用的 loader，它相對上下文解析
      // 爲了更清晰，`-loader` 後綴在 webpack 2 中再也不是可選的
      // 查看 webpack 1 升級指南。
      loader: "babel-loader",

      // loader 的可選項
      options: {
        presets: ["es2015", "react"]
      },
    },
  ]
},

​🔦 示例DEMO04： (DEMO / SOURCE)

加載 CSS

爲了從 JavaScript 模塊中 import 一個 CSS 文件，你只須要在 module 中安裝並添加 style-loader 和 css-loader 。

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

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'css-loader',
          'style-loader'
        ]
      }
    ]
  },
  //...
}

好了，此時你就能夠在代碼中經過 import './style.css' 的方式引入 CSS 文件。

其他，加載 less，sass 等樣式文件也是大同小異，不一一細說。

🔦 示例DEMO06： (DEMO / SOURCE)

加載圖片

如何打包、加載圖片呢？你可使用 file-loader來指定要加載的圖片。

$ npm install --save-dev file-loader

webpack.config.js

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

而後，你能夠經過 import imgBig from './lion.png' 的方式引入圖片。例：

import React from 'react';
import imgBig from './lion.png';

class Welcome extends React.PureComponent {
  render() {
    return (
      <div>
        <h1>Hello, {this.props.name}</h1>
        <img src={imgBig} />
      </div>
    );
  }
}
export default Welcome;

壓縮圖片

這還不算完，平常開發中，常常會遇到有些圖片文件過大的問題，這會影響你的 app 的加載速度。webpack 提供了壓縮圖片的方法幫你解決圖片大的問題。

首先，你須要安裝 image-webpack-loader

$ npm i --save-dev image-webpack-loader

接下來，修改 webpack.config.js

{
  // 圖片加載 + 圖片壓縮
  test: /\.(png|svg|jpg|gif)$/,
  loaders: [
    "file-loader",
    {
      loader: "image-webpack-loader",
      query: {
        progressive: true,
        pngquant: {
          quality: "65-90",
          speed: 4
        }
      }
    }
  ]
}

🔦 示例DEMO07： (DEMO / SOURCE)

加載字體

那麼，像字體這樣的其餘資源如何處理呢？file-loader 和 url-loader 能夠接收並加載任何文件，而後將其輸出到構建目錄。這就是說，咱們能夠將它們用於任何類型的文件，包括字體：

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|svg)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  },
  //...
}

一切就緒後，你能夠在 css 文件中這樣引入字體：

@font-face {
  font-family: 'MyDiyFont';
  src: url('./font/iconfont.eot'); /* IE9*/
  src: url('./font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('./font/iconfont.woff') format('woff'), /* chrome、firefox */
  url('./font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('./font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}

h1 {
  font-family: 'MyDiyFont';
  font-size: 24px;
}

p {
  font-family: 'MyDiyFont';
  font-size: 18px;
}

而後，相對路徑，會被替換爲構建目錄中的完整路徑/文件名。

🔦 示例DEMO08： (DEMO / SOURCE)

Webpack 系列教程

歡迎閱讀其它內容：

• Webpack 概念
• Webpack 入門
• Webpack 資源管理
• Webpack 代碼分離
• Webpack 開發工具