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

時間 2020-05-09

標籤假如榮耀方式學習 webpack 简体版

原文原文鏈接

英雄介紹

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

姓名：崴博.派克（webpack）html

熱度排名：T0vue

勝率：98%react

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

Ban率：10%web

操做難度：★★★★★typescript

技能：

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

cd：0秒npm

派克開場就會攜帶者他的專屬裝備【loader】，可以提供給他屬性，而且能在商店裏升級爲進階物品【plugin】，從而加強他的技能。json

虹吸能量（entry 入口）

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

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

基礎使用：

module.exports = {
  entry: './path/to/my/entry/file.js' // 默承認配置一個路徑字符串
};
複製代碼

進階使用：

字符串：默認普通路徑字符串./src。

const config = {
  entry: './src/a.js'
};
複製代碼

數組：傳入一個路徑數組將建立多個主入口，適用於將多個依賴文件導入一個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的最低標準是設置一個對象包含如下兩點：）

filename 輸出文件的文件名
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 組件