webpack(雜記)

webpack有四個核心概念：

• 入口(entry)
• 輸出(output)
• loader
• 插件(plugins)

const HtmlWebpackPlugin = require('html-webpack-plugin'); //經過 npm 安裝
const webpack = require('webpack'); //訪問內置的插件
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

對比 Node.js 模塊，webpack _模塊_可以以各類方式表達它們的依賴關係，幾個例子以下：

• ES2015 import 語句
• CommonJS require() 語句
• AMD define 和 require 語句
• css/sass/less 文件中的 @import 語句。
• 樣式(url(...))或 HTML 文件(<img src=...>)中的圖片連接(image url)

模塊熱替換(HMR - Hot Module Replacement)功能會在應用程序運行過程當中替換、添加或刪除模塊，而無需從新加載整個頁面。主要是經過如下幾種方式，來顯著加快開發速度：

• 保留在徹底從新加載頁面時丟失的應用程序狀態。
• 只更新變動內容，以節省寶貴的開發時間。
• 調整樣式更加快速 - 幾乎至關於在瀏覽器調試器中更改樣式。

除了普通資源，編譯器(compiler)須要發出 "update"，以容許更新以前的版本到新的版本。"update" 由兩部分組成：

NaN. 更新後的 manifest(JSON)
NaN. 一個或多個更新後的 chunk (JavaScript)

manifest 包括新的編譯 hash 和全部的待更新 chunk 目錄。每一個更新 chunk 都含有對應於此 chunk 的所有更新模塊（或一個 flag 用於代表此模塊要被移除）的代碼。

編譯器確保模塊 ID 和 chunk ID 在這些構建之間保持一致。一般將這些 ID 存儲在內存中（例如，使用 webpack-dev-server 時），可是也可能將它們存儲在一個 JSON 文件中。