【提升系列】webpack相關知識

時間 2019-11-09

標籤提升系列 webpack 相關知識简体版

原文原文鏈接

此次咱們主要研究的是webpack框架的相關知識，webpack是一個打包構建的前端框架，用於解決前端開發的模塊化問題。

應用場景和縱向比較

說到webpack，確定你還會想到gulp和grunt這些框架，那麼webpack是作什麼的呢？他和其餘的框架有什麼區別呢？咱們一塊兒來分析一下。
在這一段落中咱們主要對webpack和gulp進行縱向的比較分析：
webpack的根本任務是進行打包，把在一個文件中引用的另一個文件，都打包在一塊兒。
gulp根本任務是實現自動化，其實咱們本身能夠寫一段node腳本實現全部js文件的壓縮。gulp就是封裝好腳原本幫咱們作這些事
還有：
webpack其實也能夠實現js文件的壓縮，可是這只不過是在完成打包任務的大背景下，所完成的額外任務css

那麼使用場景呢？我在什麼狀況下該用webpack，我在什麼狀況下該用gulp，筆者認爲，這就仁者見仁智者見智了，若是說，你就是在開發工程中爲了打包，爲了模塊化，那麼你必定要用webpack啊，還有你但願實現解析sass直接放入html中，那麼這能夠用webpack實現，在打包的過程當中就順手完成了。可是，你初次以外，還想實現，在上線構建的時候，把圖片上傳cdn而且替換連接，那麼你就須要額外引入gulp。webpack和gulp都有本身的長處和短處，分析好這兩個框架，你就能夠在使用過程當中如魚得水。html

基本配置項

基本配置項。咱們首先說說如何定義基本配置項，第一是咱們能夠shell的方式，定義配置，都寫在命令行上，可是這種方式很差，配置項一多，執行的命令就特別長。所以咱們通常採用的都是配置文件的方式。前端

const path = require('path');

module.exports = {
  // entry 表示 入口，Webpack 執行構建的第一步將從 Entry 開始，可抽象成輸入。
  // 類型能夠是 string | object | array   
  entry: './app/entry', // 只有1個入口，入口只有1個文件
  entry: ['./app/entry1', './app/entry2'], // 只有1個入口，入口有2個文件
  entry: { // 有2個入口
    a: './app/entry-a',
    b: ['./app/entry-b1', './app/entry-b2']
  },

  // 如何輸出結果：在 Webpack 通過一系列處理後，如何輸出最終想要的代碼。
  output: {
    // 輸出文件存放的目錄，必須是 string 類型的絕對路徑。
    path: path.resolve(__dirname, 'dist'),

    // 輸出文件的名稱
    filename: 'bundle.js', // 完整的名稱
    filename: '[name].js', // 當配置了多個 entry 時，經過名稱模版爲不一樣的 entry 生成不一樣的文件名稱
    filename: '[chunkhash].js', // 根據文件內容 hash 值生成文件名稱，用於瀏覽器長時間緩存文件

    // 發佈到線上的全部資源的 URL 前綴，string 類型
    publicPath: '/assets/', // 放到指定目錄下
    publicPath: '', // 放到根目錄下
    publicPath: 'https://cdn.example.com/', // 放到 CDN 上去

    // 導出庫的名稱，string 類型
    // 不填它時，默認輸出格式是匿名的當即執行函數
    library: 'MyLibrary',

    // 導出庫的類型，枚舉類型，默認是 var
    // 能夠是 umd | umd2 | commonjs2 | commonjs | amd | this | var | assign | window | global | jsonp ，
    libraryTarget: 'umd', 

    // 是否包含有用的文件路徑信息到生成的代碼裏去，boolean 類型
    pathinfo: true, 

    // 附加 Chunk 的文件名稱
    chunkFilename: '[id].js',
    chunkFilename: '[chunkhash].js',

    // JSONP 異步加載資源時的回調函數名稱，須要和服務端搭配使用
    jsonpFunction: 'myWebpackJsonp',

    // 生成的 Source Map 文件名稱
    sourceMapFilename: '[file].map',

    // 瀏覽器開發者工具裏顯示的源碼模塊名稱
    devtoolModuleFilenameTemplate: 'webpack:///[resource-path]',

    // 異步加載跨域的資源時使用的方式
    crossOriginLoading: 'use-credentials',
    crossOriginLoading: 'anonymous',
    crossOriginLoading: false,
  },

  // 配置模塊相關
  module: {
    rules: [ // 配置 Loader
      {  
        test: /\.jsx?$/, // 正則匹配命中要使用 Loader 的文件
        include: [ // 只會命中這裏面的文件
          path.resolve(__dirname, 'app')
        ],
        exclude: [ // 忽略這裏面的文件
          path.resolve(__dirname, 'app/demo-files')
        ],
        use: [ // 使用那些 Loader，有前後次序，從後往前執行
          'style-loader', // 直接使用 Loader 的名稱
          {
            loader: 'css-loader',      
            options: { // 給 html-loader 傳一些參數
            }
          }
        ]
      },
    ],
    noParse: [ // 不用解析和處理的模塊
      /special-library\.js$/  // 用正則匹配
    ],
  },

  // 配置插件
  plugins: [
  ],

  // 配置尋找模塊的規則
  resolve: { 
    modules: [ // 尋找模塊的根目錄，array 類型，默認以 node_modules 爲根目錄
      'node_modules',
      path.resolve(__dirname, 'app')
    ],
    extensions: ['.js', '.json', '.jsx', '.css'], // 模塊的後綴名
    alias: { // 模塊別名配置，用於映射模塊
       // 把 'module' 映射 'new-module'，一樣的 'module/path/file' 也會被映射成 'new-module/path/file'
      'module': 'new-module',
      // 使用結尾符號 $ 後，把 'only-module' 映射成 'new-module'，
      // 可是不像上面的，'module/path/file' 不會被映射成 'new-module/path/file'
      'only-module$': 'new-module', 
    },
    alias: [ // alias 還支持使用數組來更詳細的配置
      {
        name: 'module', // 老的模塊
        alias: 'new-module', // 新的模塊
        // 是不是隻映射模塊，若是是 true 只有 'module' 會被映射，若是是 false 'module/inner/path' 也會被映射
        onlyModule: true, 
      }
    ],
    symlinks: true, // 是否跟隨文件軟連接去搜尋模塊的路徑
    descriptionFiles: ['package.json'], // 模塊的描述文件
    mainFields: ['main'], // 模塊的描述文件裏的描述入口的文件的字段名稱
    enforceExtension: false, // 是否強制導入語句必需要寫明文件後綴
  },

  // 輸出文件性能檢查配置
  performance: { 
    hints: 'warning', // 有性能問題時輸出警告
    hints: 'error', // 有性能問題時輸出錯誤
    hints: false, // 關閉性能檢查
    maxAssetSize: 200000, // 最大文件大小 (單位 bytes)
    maxEntrypointSize: 400000, // 最大入口文件大小 (單位 bytes)
    assetFilter: function(assetFilename) { // 過濾要檢查的文件
      return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
    }
  },

  devtool: 'source-map', // 配置 source-map 類型

  context: __dirname, // Webpack 使用的根目錄，string 類型必須是絕對路徑

  // 配置輸出代碼的運行環境
  target: 'web', // 瀏覽器，默認
  target: 'webworker', // WebWorker
  target: 'node', // Node.js，使用 `require` 語句加載 Chunk 代碼
  target: 'async-node', // Node.js，異步加載 Chunk 代碼
  target: 'node-webkit', // nw.js
  target: 'electron-main', // electron, 主線程
  target: 'electron-renderer', // electron, 渲染線程

  externals: { // 使用來自 JavaScript 運行環境提供的全局變量
    jquery: 'jQuery'
  },

  stats: { // 控制檯輸出日誌控制
    assets: true,
    colors: true,
    errors: true,
    errorDetails: true,
    hash: true,
  },

  devServer: { // DevServer 相關的配置
    proxy: { // 代理到後端服務接口
      '/api': 'http://localhost:3000'
    },
    contentBase: path.join(__dirname, 'public'), // 配置 DevServer HTTP 服務器的文件根目錄
    compress: true, // 是否開啓 gzip 壓縮
    historyApiFallback: true, // 是否開發 HTML5 History API 網頁
    hot: true, // 是否開啓模塊熱替換功能
    https: false, // 是否開啓 HTTPS 模式
    },

    profile: true, // 是否捕捉 Webpack 構建的性能信息，用於分析什麼緣由致使構建性能不佳

    cache: false, // 是否啓用緩存提高構建速度

    watch: true, // 是否開始
    watchOptions: { // 監聽模式選項
    // 不監聽的文件或文件夾，支持正則匹配。默認爲空
    ignored: /node_modules/,
    // 監聽到變化發生後會等300ms再去執行動做，防止文件更新太快致使從新編譯頻率過高
    // 默認爲300ms 
    aggregateTimeout: 300,
    // 判斷文件是否發生變化是不停的去詢問系統指定文件有沒有變化，默認每秒問 1000 次
    poll: 1000
  },
}

以上咱們就是webpack中大部分的配置項，其實咱們能夠發現，最重要四個是entry、output、loader和plugin分別表明入口，出口，加載器和插件。具體的配置信息和其餘的配置項就不一一介紹了。
建議你們看一下webpack的官方文檔，具體瞭解一下每個配置項的含義，就算都記不下來，也最好有點印象。node

原理初探

首先咱們看一下webpack的總體原理：
初始化參數：從配置文件和 Shell 語句中讀取與合併參數，得出最終的參數；
開始編譯：用上一步獲得的參數初始化 Compiler 對象，加載全部配置的插件，執行對象的 run 方法開始執行編譯；
肯定入口：根據配置中的 entry 找出全部的入口文件；
編譯模塊：從入口文件出發，調用全部配置的 Loader 對模塊進行翻譯，再找出該模塊依賴的模塊，再遞歸本步驟直到全部入口依賴的文件都通過了本步驟的處理；
完成模塊編譯：在通過第4步使用 Loader 翻譯完全部模塊後，獲得了每一個模塊被翻譯後的最終內容以及它們之間的依賴關係；
輸出資源：根據入口和模塊之間的依賴關係，組裝成一個個包含多個模塊的 Chunk，再把每一個 Chunk 轉換成一個單獨的文件加入到輸出列表，這步是能夠修改輸出內容的最後機會；
輸出完成：在肯定好輸出內容後，根據配置肯定輸出的路徑和文件名，把文件內容寫入到文件系統。jquery

而後咱們再看一下webpack中plugin的原理
在使用htmlWebpackPluin的過程當中，發現打包出的index.html文件，js引用了兩次，因爲本身瞭解plugin的原理，因而動手寫了一個。
webpack 的插件架構主要基於Tapable實現的，這個Tapable就是專一於事件的廣播和操做。在webpack的編譯過程當中會廣播不少事件，插件能夠本身去監聽這些事件，在webpack執行到相應的時機作某些操做，而後插件也能夠廣播事件。
下面就是具體api的實現了，webpack中有complier對象，表明webpack實例。有編譯的具體參數。還有一個complation表明本次編譯，有打包的文件等信息。
在complier上面綁定plugin和apply。在回調函數中傳入complation對象。webpack

plugins: [
    function () {
        this.plugin('done', (stats) => {
            stats.toJson(true).chunks.filter(c => c.entry).forEach(c => {
                let fileContent = fs.readFileSync((path.join(BUILD_PATH, 'views/main.pug'))).toString('utf-8')
                fs.writeFileSync(path.join(BUILD_PATH, 'views/main.pug'), fileContent.replace(/webpack\-bundle.*src="(.*)"/g, (match, p1) => {
                    return match.replace(p1, PUBLIC_PATH + c.files[0])
                }))
            })
        })
    }
]

常見問題分析

webpack配置中遇到的問題

css-loader中importLoaders=1參數的問題
問題是加載的css文件中import了一個css文件，雖然能夠被引入最後的html中，可是引入的css未通過postcss的處理，所以加上了這個，就ok了web

Mac平臺和Windows平臺的差別致使的問題shell

// 配置entry選項時：
entry: {
    main: __dirname + '/src/index.js'
}
// /和\的問題
const path = require('path');
const entryPath = path.resolve(__dirname, '/src/index.js');
entry: {
    main: entryPath
}

不能知足業務需求，自定義plugin的通過
如上json

提升webpack構建速度的問題

縮小查找文件的範圍
利用loader中的exclude和include。
利用reslove中的moudules，這個能夠在require時指明存放第三方模塊的路徑。gulp

利用動態連接庫
利用插件DllPlugin，能夠打包出一個個單獨的動態連接庫文件。緣由在於包含大量複用模塊的動態連接庫只須要編譯一次，在以後的構建過程當中被動態連接庫包含的模塊將不會在從新編譯，而是直接使用動態連接庫中的代碼。

開啓打包編譯多進程
運行在Node.js之上的webpack是單線程模型的，也就是說webpack須要處理的任務須要一件件挨着作，不能多個事情一塊兒作。利用插件HappyPack，webpack中最耗時的就是loader這一步，HappyPack它把任務分解給多個子進程去併發的執行，子進程處理完後再把結果發送給主進程。

提取公共代碼
利用CommonsChunkPlugin插件提取公共代碼。