假如用王者榮耀的方式學習webpack

英雄介紹

崴博.派克誕生於遙遠西方的勇士之地，擁有著高超的機械技藝，善於運用各種工具來實現一些看似不可能完成的事。遊歷王者大陸時機緣巧合遇到了年輕的墨子，與之成為好友。後協助大宗師墨子建造了大陸第一雄城,被後人稱為上古文明終結後最偉大的奇蹟——長安！長安以「方舟」為驅動核心中樞，配合層出不斷的機關，守護著華麗的大明宮。派克為人低調，不喜出現在大眾視野，他是需求人性啟迪的理想主義者，信奉著唯有光榮進化才能實現人類的全部潛能。

姓名：崴博.派克（webpack）

熱度排名：T0

勝率：98%

登場率：80%（中大型項目90%）

Ban率：10%

操作難度：★★★★★

技能：

 

 

被動：（自成長型魔械技術）

cd：0秒

派克開場就會攜帶者他的專屬裝備【loader】，能夠提供給他屬性，並且能在商店裡升級為進階物品【plugin】，從而增強他的技能。

 

 

虹吸能量（entry 入口）

派克指定初始裝備開始進化的準備，期間享受韌性加成20%，升級後可指定多個裝備進化。

（entry用於指定入口文件，可配置一個或多個。）

基礎使用：

module.exports = {
  entry: './path/to/my/entry/file.js' // 默認可配置一個路徑字元串
};

進階使用：

  • 字元串：默認普通路徑字元串./src。
1 const config = {
2   entry: './src/a.js'
3 };
  • 數組： 傳入一個路徑數組將創建多個主入口，適用於將多個依賴文件導入一個chunk時可以這麼操作。
const config = {
  entry: ['./src/a.js','./src/b.js','./src/c.js',]
};
  • 對象：傳入一個對象指定不同入口的key值（入口名稱）和value（路徑），字元串寫法是對象寫法的簡寫。適用於多頁面應用
const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

 

 

 

 

魔影迷蹤：（output 出口）

cd：10秒

派克在經過n（取決於當前派克進行工作的複雜度）秒的吟唱後傳送至指定地點。

（output用於配置打包完成文件的輸出和命名，配置output的最低標準是設置一個對象包含以下兩點：）

  1. filename 輸出文件的文件名
  2. path 輸出目錄的絕對路徑

基礎使用：

const path = require('path');

module.exports = {
  entry: './src/js/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'test.bundle.js'
  }
};

 

 

進階使用：

當配置了多入口文件並且想輸出不同chunk時應該對filename使用佔位符來保證文件名稱的唯一性。

佔位符：

  • name——使用入口名稱

  • id——使用內部chunk id

  • hash——使用每次構建過程中的唯一hash

  • chunkhash——使用基於每個chunk內容的hash

  • query——使用文件名？後面的字元串

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}
複製程式碼

 

 

 

吸星大法（loader）

cd：8秒

派克可以同化其他英雄的技能，將其轉換為自身可用的能量。成功吸取基礎屬性+200%。

（webpack本身只能處理js文件。loader可以將其它文件類型轉換為webpack能夠處理的模組，並對其進行打包或其它操作。它與modules模組配合使用，通過配置module.rules實現。loader相當於其他工具中的task（任務）。）

loader的核心有兩個屬性：

  • test：匹配需要通過loader進行轉換的文件
  • use： 指定通過哪個loader進行轉換

基礎配置：

const path = require('path');

const config = {
  output: {
    filename: 'test.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;
複製程式碼

 

進階配置：

rules允許你在處理一個文件時配置多個loader，只需要給use傳入一個數組包含不同loader對象

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

　　

騷操作：可以在import語句使用!將資源中的loader分開，這樣可以不配置webpack從而使用一個內聯方式進行loader處理，但不推薦這種方式，因為它很難維護。

import Styles from 'style-loader!css-loader?modules!./styles.css';

 

 

 

光榮進化（plugins 插件）

cd：35秒

派克進化loader，通過plugin對5000碼範圍內的己方英雄進行增幅、強化，並進入霸體狀態持續10秒。

（不同於loader用來解析非js的文件類型，plugin可以用來處理更複雜的任務，包括打包、優化、壓縮，最小到重定義環境變數。它是非常強大的，除了插件市場提供的成熟插件，還可以自己進行編寫。plugin為loader帶來了更多的特性，它存在的目的在於解決loader無法實現的其他事情。

使用插件只需要require（）它，然後再添加到plugin模組中，通常情況下多數插件是可自定義的，所以想在一個配置文件中使用不同配置功能的插件，必須通過new創建一個新的實例。）

基礎配置：

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過 npm 安裝
const webpack = require('webpack'); // 用於訪問內置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

 

 

 

 

雙重人格（mode 模式）

cd：1.5秒

派克切換形態，工作狂模式：移速增加50%，藝術家模式：減速30%同時增加自身韌性50%，免疫控制。

（通過mode配置開發環境（development）和生產環境（production），可以啟用相應模式下webpack的內置優化。）

development：啟用NamedChunksPlugin和NamedModulesPlugin插件

production：啟用FlagDependencyUsagePlugin,FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin和 UglifyJsPlugin插件。

配置：

module.exports = {
  mode: 'production' // 或development
};

 

 

智者光輝（reslove 模組解析）

cd：60秒

派克指定位置進入快速尋路模式，並自動分析最近路線，且無視地形障礙。

（通過配置resolve來解析文件路徑，reslove中可以配置使用專屬插件。）

目前支援解析三種文件路徑： 絕對路徑、相對路徑、模組路徑

配置alias別名（最常用）

創建 import 或 require 的別名可以使模組引入變簡單。 例：

alias: {
  Utilities: path.resolve(__dirname, 'src/utilities/'),
  Templates: path.resolve(__dirname, 'src/templates/')
}

 

未配置alias：

import Utility from '../../utilities/utility';

已配置alias：

import Utility from 'Utilities/utility';

 

 

百寶箱（module 模組）

派克擁有可以儲存任何物質的空間物，可以分類儲存裝備。激活後裝備欄增加3，自身移速減20%

（通過配置module處理項目中的不同類型的模組。） rules匹配規則數組（最常用） 創建模組時，匹配請求的規則數組。通過規則能夠修改模組的創建方式。這些規則能夠對模組(module)應用 loader，或者修改解析器(parser)。

const config = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' }
    ]
  }
};
 

推薦出裝

 

 

文件處理

  • raw-loader 載入文件原始內容（utf-8）
  • val-loader 將程式碼作為模組執行，並將 exports 轉為 JS 程式碼
  • url-loader 像 file loader 一樣工作，但如果文件小於限制，可以返回 data URL
  • file-loader 將文件發送到輸出文件夾，並返回（相對）URL

 

 

JSON

  • json-loader 載入 JSON 文件（默認包含）
  • json5-loader 載入和轉譯 JSON 5 文件
  • cson-loader 載入和轉譯 CSON 文件

 

 

轉換編譯(Transpiling)

  • script-loader 在全局上下文中執行一次 JavaScript 文件（如在 script 標籤），不需要解析
  • babel-loader 載入 ES2015+ 程式碼，然後使用 Babel 轉譯為 ES5
  • buble-loader 使用 Bublé 載入 ES2015+ 程式碼，並且將程式碼轉譯為 ES5
  • traceur-loader 載入 ES2015+ 程式碼，然後使用 Traceur 轉譯為 ES5
  • ts-loader 或 awesome-typescript-loader 像 JavaScript 一樣載入 TypeScript 2.0+
  • coffee-loader 像 JavaScript 一樣載入 CoffeeScript

 

 

模板(Templating)

  • html-loader 導出 HTML 為字元串，需要引用靜態資源
  • pug-loader 載入 Pug 模板並返回一個函數
  • jade-loader 載入 Jade 模板並返回一個函數
  • markdown-loader 將 Markdown 轉譯為 HTML
  • react-markdown-loader 使用 markdown-parse parser(解析器) 將 Markdown 編譯為 React 組件
  • posthtml-loader 使用 PostHTML 載入並轉換 HTML 文件
  • handlebars-loader 將 Handlebars 轉移為 HTML
  • markup-inline-loader 將內聯的 SVG/MathML 文件轉換為 HTML。在應用於圖標字體，或將 CSS 動畫應用於 SVG 時非常有用。

 

 

樣式

  • style-loader 將模組的導出作為樣式添加到 DOM 中
  • css-loader 解析 CSS 文件後，使用 import 載入，並且返回 CSS 程式碼
  • less-loader 載入和轉譯 LESS 文件
  • sass-loader 載入和轉譯 SASS/SCSS 文件
  • postcss-loader 使用 PostCSS 載入和轉譯 CSS/SSS 文件
  • stylus-loader 載入和轉譯 Stylus 文件

 

 

清理和測試(Linting && Testing)

  • mocha-loader 使用 mocha 測試（瀏覽器/NodeJS）
  • eslint-loader PreLoader，使用 ESLint 清理程式碼
  • jshint-loader PreLoader，使用 JSHint 清理程式碼
  • jscs-loader PreLoader，使用 JSCS 檢查程式碼樣式
  • coverjs-loader PreLoader，使用 CoverJS 確定測試覆蓋率

 

 

框架(Frameworks)

  • vue-loader 載入和轉譯 Vue 組件
  • polymer-loader 使用選擇預處理器(preprocessor)處理，並且 require() 類似一等模組(first-class)的 Web 組件
  • angular2-template-loader 載入和轉譯 Angular 組件

 

 

常用插件

  • ProgressPlugin（webpack自帶）：用於統計打包進度
  • IgnorePlugin（webpack自帶）：忽略本地的一些模組
  • DllPlugin（webpack自帶）：預打包文件
  • DllReferencePlugin（webpack自帶）：項目打包引用預打包生成的文件
  • AssetsWebpackPlugin：為打包生成的js等生成路徑引用指引
  • HappyPack：運用多核加速打包
  • ExtractTextPlugin：將打包中的css單獨抽離出來
  • EnvironmentPlugin（webpack自帶）：在webpack層面定義項目中可以使用的全局變數
  • DefinePlugin（webpack自帶）：在webpack層面定義項目中可以使用的全局變數 與EnvironmentPlugin的形式不同而已
  • CleanWebpackPlugin：清理指定目錄的文件
  • CopyWebpackPlugin：將指定目錄的文件賦值到指定目錄下
  • HtmlWebpackPlugin：webpack打包後自動生成html頁面
  • ParallelUglifyPlugin：加速壓縮

本期英雄介紹完畢，祝大家早日國服王者，我們下期見。

 

Tags:

VirMach 便宜 VPS