目錄

  • 資源管理

  •     webpack 的優(yōu)勢(shì)

  •     Loader

  •         安裝加載器

  •         配置 Loader

  •         引用資源文件

  •     Plugin

  •         安裝插件

  •         配置 Plugin

  •     加載資源專題

  •         加載 React

  •         加載 CSS

  •         加載圖片

  •         壓縮圖片

  •         加載字體

回到頂部

資源管理

?? 提示：

  1. 版本問(wèn)題

本文基于 webpack 2.x 版本。webpack 2.x 相比 webpack 1.x 有重大改變。所以，如果你的項(xiàng)目中已使用了 webpack 1.x ，本教程的示例將不適用，請(qǐng)慎重。

如果鐵了心要升級(jí) webpack ，請(qǐng)參考 webpack 官方文檔 - 從 v1 遷移到 v2

  1. 閱讀建議

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

webpack 的優(yōu)勢(shì)

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

JavaScript 世界已有好幾個(gè)有名的資源管理工具，webpack 有什么獨(dú)到之處呢？

在 webpack 出現(xiàn)之前，前端開(kāi)發(fā)人員會(huì)使用 grunt 和 gulp 等工具來(lái)處理這些 web 資源，如樣式文件（例如 .css, .less, .sass），圖片（例如 .png, .jpg, .svg），字體（例如 .woff, .woff2, .eot）和數(shù)據(jù)（例如 .json, .xml, .csv）等，并將它們從 /src 文件夾移動(dòng)到 /dist 或 /build 目錄中。

而 webpack 從 entry(入口) 開(kāi)始，訪問(wèn)應(yīng)用程序，并動(dòng)態(tài)打包(dynamically bundle)所有依賴項(xiàng)。這是極好的創(chuàng)舉，因?yàn)楝F(xiàn)在每個(gè)模塊都可以明確表述它自身的依賴，這可以避免打包未使用的模塊。

Loader

Loader(加載器) 用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換。

使用加載器一般遵循幾步：

  1. 安裝加載器

  2. 配置 Loader

  3. 引用資源文件

安裝加載器

根據(jù)需要加載的資源文件，選擇下載對(duì)應(yīng)的加載器。

$ npm install --save-dev css-loader

更多 webpack 可用Loader 請(qǐng)查看：webpack loaders

配置 Loader

?? 注意：

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

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

資源類型對(duì)應(yīng)單一加載器

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

資源類型對(duì)應(yīng)多個(gè)加載器

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

加載器含配置選項(xiàng)

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

引用資源文件

完成上兩步后，就可以在 JavaScript 中使用 import ，require 關(guān)鍵字引用相應(yīng)類型資源文件。

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

Plugin

Plugin(插件) 用于解決 Loader 無(wú)法解決的問(wèn)題，它是 Loader 的輔助。

由于 plugin 可以攜帶參數(shù)/選項(xiàng)，你必須在 wepback 配置中，向 plugins 屬性傳入 new 實(shí)例。

安裝插件

webpack 自身包含了一些常用插件，你可以通過(guò) webpack 來(lái)引用。除此之外的插件，使用前需要安裝

$ 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
      }
    }),

    // 用于簡(jiǎn)化 HTML 文件（index.html）的創(chuàng)建，提供訪問(wèn) bundle 的服務(wù)。
    new HtmlWebpackPlugin({
      title: "react-step-by-step",
      template: "./index.html"
    }),

    // 自動(dòng)打開(kāi)瀏覽器
    new OpenBrowserPlugin({
      url: "http://localhost:8080"
    })
  ]};

加載資源專題

加載 React

很多瀏覽器并不識(shí)別 React 語(yǔ)法，為了讓瀏覽器支持，你需要使用 babel-loader 解釋器來(lái)轉(zhuǎn)義 React 語(yǔ)法為普通的 Javascript 語(yǔ)法。

?? 注意：

官方推薦 babel-loader 和 webpack 的對(duì)應(yīng)版本

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

webpack 2.x | babel-loader >= 7.x （推薦）（^6.2.10 也可以運(yùn)行，但會(huì)有不贊成的警告(deprecation warnings)）

首先，安裝需要使用的庫(kù)：

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

babel-preset-xxx 表示你希望轉(zhuǎn)義的語(yǔ)法。

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

// 關(guān)于模塊配置module: {

  // 模塊規(guī)則（配置 loader、解析器等選項(xiàng)）
  rules: [    // 這里是匹配條件，每個(gè)選項(xiàng)都接收一個(gè)正則表達(dá)式或字符串
    // test 和 include 具有相同的作用，都是必須匹配選項(xiàng)
    // exclude 是必不匹配選項(xiàng)（優(yōu)先于 test 和 include）
    // 最佳實(shí)踐：
    // - 只在 test 和 文件名匹配 中使用正則表達(dá)式
    // - 在 include 和 exclude 中使用絕對(duì)路徑數(shù)組
    // - 盡量避免 exclude，更傾向于使用 include
    {
      // 語(yǔ)義解釋器，將 js/jsx 文件中的 es2015/react 語(yǔ)法自動(dòng)轉(zhuǎn)為瀏覽器可識(shí)別的 Javascript 語(yǔ)法
      test: /\.jsx?$/,
      include: path.resolve(__dirname, "app"),

      // 應(yīng)該應(yīng)用的 loader，它相對(duì)上下文解析
      // 為了更清晰，`-loader` 后綴在 webpack 2 中不再是可選的
      // 查看 webpack 1 升級(jí)指南。
      loader: "babel-loader",

      // loader 的可選項(xiàng)
      options: {
        presets: ["es2015", "react"]      },
    },
  ]},

?? 示例DEMO04： (DEMO / SOURCE)

加載 CSS

為了從 JavaScript 模塊中 import 一個(gè) 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'
        ]      }
    ]  },
  //...}

好了，此時(shí)你就可以在代碼中通過(guò) import './style.css' 的方式引入 CSS 文件。

其余，加載 less，sass 等樣式文件也是大同小異，不一一細(xì)說(shuō)。

?? 示例DEMO06： (DEMO / SOURCE)

加載圖片

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

$ npm install --save-dev file-loader

webpack.config.js

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

然后，你可以通過(guò) 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;

壓縮圖片

這還不算完，日常開(kāi)發(fā)中，經(jīng)常會(huì)遇到有些圖片文件過(guò)大的問(wèn)題，這會(huì)影響你的 app 的加載速度。webpack 提供了壓縮圖片的方法幫你解決圖片大的問(wèn)題。

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

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

接下來(lái)，修改 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 可以接收并加載任何文件，然后將其輸出到構(gòu)建目錄。這就是說(shuō)，我們可以將它們用于任何類型的文件，包括字體：

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

然后，相對(duì)路徑，會(huì)被替換為構(gòu)建目錄中的完整路徑/文件名。

?? 示例DEMO08： (DEMO / SOURCE)

作者：靜默虛空
出處：http://www.cnblogs.com/jingmoxukong/
歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處。
限于本人水平，如果文章和代碼有表述不當(dāng)之處，還請(qǐng)不吝賜教。

http://www.cnblogs.com/jingmoxukong/p/7009462.html