前端工程化（Gulp、Webpack）-webpack

時間 2019-11-16

原文原文鏈接

什麼是Webpack

現代 JavaScript 應用程序的靜態模塊打包器(module bundler)，它可以根據模塊的依賴關係進行靜態分析，而後將這些模塊按照指定的規則生成對應的靜態資源；自己只支持javascript，經過loader能夠支持其餘資源，每一個資源即一個模塊，在webpack中一切皆模塊；經過plugins的擴展，擁有強大的功能。已經成爲目前最流行，社區最活躍的打包工具。javascript

官網：https://doc.webpack-china.org
css

爲什要使用Webpack

近年來 Web 應用變得更加複雜與龐大，Web 前端技術的應用範圍也更加普遍，爲了方便維護和管理，須要用模塊化的思想來組織代碼，產生了一些需求：html

將依賴樹拆分紅按需加載的塊
初始化加載的耗時儘可能少
各類靜態資源均可以視做模塊
將第三方庫整合成模塊的能力
能夠自定義打包邏輯的能力
適合大項目，不管是單頁仍是多頁的 Web 應用

模塊化

傳統方式`<script>`

缺點很明顯：前端

全局做用域下容易形成變量衝突，如jq和zepto
文件只能按照 <script> 的書寫順序進行加載
開發人員必須主觀解決模塊和代碼庫的依賴關係
在大型項目中各類資源難以管理，長期積累的問題致使代碼庫混亂不堪

AMD

與 CommonJS 最大的不一樣在於它採用異步的方式去加載依賴的模塊。 AMD 規範主要是爲了解決針對瀏覽器環境的模塊化問題，最具表明性的實現是 requirejs。vue

缺點在於JavaScript 運行環境沒有原生支持 AMD，須要先導入實現了 AMD 的庫後才能正常使用。java

CMD

規範和 AMD 很類似，推崇就近依賴，只有在用到某個模塊的時候再去require，國產，表明SeaJSnode

缺點依賴 SPM 打包，模塊的加載邏輯偏重jquery

CommonJS

一種使用普遍的 JavaScript 模塊化規範，核心思想是經過 require 方法來同步地加載依賴的其餘模塊，經過 module.exports 導出須要暴露的接口。 CommonJS 規範的流行得益於 Node.js 採用了這種方式，後來這種方式被引入到了網頁開發中。webpack

缺點在於這樣的代碼沒法直接運行在瀏覽器環境下，必須經過工具轉換成標準的 ES5。web

ES6 模塊化

國際標準化組織 ECMA 提出的 JavaScript 模塊化規範，它在語言的層面上實現了模塊化。瀏覽器廠商和 Node.js 都宣佈要原生支持該規範。它將逐漸取代 CommonJS 和 AMD 規範，成爲瀏覽器和服務器通用的模塊解決方案。

缺點在於目前沒法直接運行在大部分 JavaScript 運行環境下，必須經過工具轉換成標準的 ES5 後才能正常運行。

1、安裝

全局安裝：

npm install webpack -g

項目依賴安裝：

npm install webpack --save-d

在命令行使用

webpack <entry> [<entry>] <output>

entry:入口文件，能夠是多個
output：輸出文件的路徑及名字

更多命令行用法：https://doc.webpack-china.org...

指定配置文件

默認爲根目錄的webpack.config.js，也能夠手動指定

webpack [--config webpack.config.js]  //在命令行中手動指定配置文件

完整的配置文件模板：https://doc.webpack-china.org...

核心配置

Context

string

基礎目錄（上下文），絕對路徑，用於從配置中解析入口起點(entry point)和 loader，
默認爲執行啓動 Webpack 時所在的當前工做目錄。能夠經過如下方式改變：

module.exports = {
  context: path.resolve(__dirname, 'app')
}

Entry

string | [string] | object { <key>: string | [string] } | (function: () => string | [string] | object { <key>: string | [string] })

應用程序的起點入口，webpack將從這裏開始查找依賴關係

字符串或數組：只會生成一個 Chunk，會被命名爲 main
對象：每一個鍵(key)生成一個chunk，名稱爲對應的key，入口則爲對應的value
函數：動態生成入口地址

entry: {
  home: "./home.js",
  about: "./about.js",
  contact: "./contact.js"
}

Output

object
最終輸出的文件及路徑

Output.filename: 輸出文件名，可使用佔位符

id            Chunk的惟一標識，從0開始
name        Chunk的名稱
hash        Chunk的惟一標識的 Hash 值
chunkhash    Chunk內容的 Hash 值
query       Chunk的query，文件名?後面的字符串

Output.path: 存放的本地目錄，必須是 string 類型的絕對路徑

output:{
    path: path.resolve(__dirname, 'dist_[hash]')
}

Output.publicPath: 遠程資源的URL前綴，默認爲空

output:{
    path: path.resolve(__dirname, "public/assets"),
    publicPath: "https://cdn.example.com/assets/"
}

Module

配置如何處理模塊。

module.noParse

RegExp | [RegExp] | function

防止 webpack 解析那些與給定正則表達式相匹配的文件

noParse: function(content) {
  return /jquery|lodash/.test(content);
}

module.rules

array

爲模塊匹配對應的loader，並進行相關設置。值爲數組，下位用Rule表示每個項

Rule.test：匹配須要解析的文件
Rule.include：定位包含的文件夾，優先於test
Rule.exclude：排除的文件及文件夾，優先於test、include
Rule.loader：配置解析的loader，能夠是String或者Array。
Rule.options：loader配置參數
Rule.use：配置解析的loader，通常用於使用多個loader，數組，每一項即爲一個loader，和Rule.loader、Rule.options用法同樣

經常使用loader：https://doc.webpack-china.org...

// css
{
    test: /\.css$/,
    use: [
        {
            loader: "style-loader"
        }, {
            loader: "css-loader",
            options: {
                modules: true, // 指定啓用css modules
                localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的類名格式
            }
        }
    ]
}
//圖片
{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
}

Resolve

object

配置模塊如何解析。 Webpack 內置 JavaScript 模塊化語法解析功能，默認會採用模塊化標準里約定好的規則去尋找，但你也能夠根據本身的須要修改默認的規則。

resolve.alias

object

建立 import 或 require 的別名，來確保模塊引入變得更簡單。

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

resolve.extensions

array

自動解析的文件的擴展名，這些文件在引入時可不帶擴展名

//file.json
extensions: [".js", ".json"]
import File from '../path/to/file'

resolve.mainFields

array

當從 npm 包中導入模塊時,此選項將決定在 package.json 中使用哪一個字段導入模塊。一些第三方模塊會針對不一樣環境提供幾分代碼，Webpack 會根據 mainFields 的配置去決定優先採用那份代碼。

resolve.modules

array

告訴 webpack 配置 Webpack 去哪些目錄下尋找第三方模塊，默認爲node_modules、

Plugins

array

插件配置，接受一個數組，數組裏每一項都是一個要使用的 Plugin 的實例，Plugin 須要的參數經過構造函數傳入。

在 Webpack 中接入 Plugin並不複雜，複雜在於每一個插件自身提供的配置項。

var webpack = require('webpack');
// 導入非 webpack 默認自帶插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');

// 在配置中添加插件
plugins: [
  new ExtractTextPlugin({
    filename: 'build.min.css',
    allChunks: true,
  })
]

經常使用插件：https://doc.webpack-china.org...

DevServer

啓動一個本地服務器，並支持實時預覽，熱替換，Source Map

devServer: {
  contentBase: path.join(__dirname, "dist"),
  compress: true,
  port: 9000
}

devServer.hot

默認：false；是否啓用模塊熱替換功能（局部更新），關閉則爲整個頁面刷新。

devServer.inline

默認：true；是否啓用內聯模式(inline mode)

若是開啓 inline，DevServer 會在構建完變化後的代碼時經過代理客戶端控制網頁刷新。
若是關閉 inline，DevServer 將沒法直接控制要開發的網頁。這時它會經過 iframe 的方式去運行要開發的網頁，當構建完變化後的代碼時經過刷新 iframe 來實現實時預覽。

devServer.historyApiFallback

boolean|object

使用了 HTML5 History API 的單頁應用。要求服務器在針對任何命中的路由時都返回一個對應的 HTML 文件。

devServer.contentBase

boolean|string|array
配置 DevServer HTTP 服務器的文件根目錄。默認狀況下爲當前執行目錄，一般是項目根目錄。

devServer.host

string

配置 DevServer 服務監聽的地址。

devServer.number

number

配置 DevServer 服務監聽的端口號。

devServer.compress

boolean

是否啓用gzip壓縮，默認false

devServer.open

boolean

首次構建完成是否打開瀏覽器

Devtool

string|false

配置webpack如何生成Source Map。

Target

string | function(compiler)

制定構建環境。默認web

Watch 和 WatchOptions

監聽模式及配置

module.export = {
  // 只有在開啓監聽模式時，watchOptions 纔有意義
  // 默認爲 false，也就是不開啓
  watch: true,
  // 監聽模式運行時的參數
  // 在開啓監聽模式時，纔有意義
  watchOptions: {
    // 不監聽的文件或文件夾，支持正則匹配
    // 默認爲空
    ignored: /node_modules/,
    // 監聽到變化發生後會等300ms再去執行動做，防止文件更新太快致使從新編譯頻率過高
    // 默認爲 300ms  
    aggregateTimeout: 300,
    // 判斷文件是否發生變化是經過不停的去詢問系統指定文件有沒有變化實現的
    // 默認每秒問 1000 次
    poll: 1000
  }
}

技巧

經常使用操做配置到npm script
想讓源文件加入到構建流程中去被 Webpack 控制，配置 entry。
想自定義輸出文件的位置和名稱，配置 output。
想自定義尋找依賴模塊時的策略，配置 resolve。
想自定義解析和轉換文件的策略，配置 module，一般是配置 module.rules 裏的 Loader。
其它的大部分需求可能要經過 Plugin 去實現，配置 plugin。

vue-cli簡介

結構及文件簡介：http://blog.csdn.net/hongchh/...

由vue官方提供的一套快速生成項目模板的腳手架，內置了幾套模板，能夠根據本身須要進行拉取。目的是爲了讓開發者可以快速進行項目開發，而不用把時間花費在項目構建上。

├── README.md                       // 項目說明文檔
├── node_modules                    // 項目依賴包文件夾
├── build                           // 編譯配置文件，通常不用管
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config                          // 項目基本設置文件夾
│   ├── dev.env.js              // 開發配置文件
│   ├── index.js                    // 配置主文件
│   └── prod.env.js             // 編譯配置文件
├── index.html                      // 項目入口文件
├── package-lock.json           // npm5 新增文件，優化性能
├── package.json                    // 項目依賴包配置文件
├── src                             // 咱們的項目的源碼編寫文件
│   ├── App.vue                 // APP入口文件
│   ├── assets                      // 初始項目資源目錄，會被webpack處理
│   │   └── logo.png
│   ├── components              // 組件目錄
│   │   └── Hello.vue           // 測試組件，回頭刪除
│   ├── main.js                 // 主配置文件
│   └── router                      // 路由配置文件夾
│       └── index.js            // 路由配置文件
└── static                          // 資源放置目錄,不會被webpack處理