webpack-----文字庫

什麼是webpack?

webpack 是一個現代 JavaScript 應用程序的靜態模塊打包工具。當 webpack 處理應用程序時，它會在內部構建一個 依賴圖(dependency graph)，此依賴圖會映射項目所需的每一個模塊，並生成一個或多個 _bundle_。（官網解釋）

webpack能作什麼？

• 代碼轉換：TypeScript 編譯成 JavaScript、SCSS 編譯成 CSS 等等
• 文件優化：壓縮 JavaScript、CSS、HTML 代碼，壓縮合並圖片等
• 代碼分割：提取多個頁面的公共代碼、提取首屏不須要執行部分的代碼讓其異步加載
• 模塊合併：在採用模塊化的項目有不少模塊和文件，須要構建功能把模塊分類合併成一個文件
• 自動刷新：監聽本地源代碼的變化，自動構建，刷新瀏覽器
• 代碼校驗：在代碼被提交到倉庫前須要檢測代碼是否符合規範，以及單元測試是否經過
• 自動發佈：更新完代碼後，自動構建出線上發佈代碼並傳輸給發佈系統。

webpack核心概念？

 

          entry 一個可執行模塊或庫的入口文件。

          chunk 多個文件組成的一個代碼塊，例如把一個可執行模塊和它全部依賴的模塊組合和一個 chunk 這體現了webpack的打包機制。（不是很理解）

          loader 文件轉換器，例如把es6轉換爲es5，scss轉換爲css。

          plugin 插件，用於擴展webpack的功能，在webpack構建生命週期的節點上加入擴展hook爲webpack加入功能。

 

Webpack基本配置？

module.exports = {
  // 入口文件，是模塊構建的起點，同時每個入口文件對應最後生成的一個 chunk。
  entry: {
    bundle: [
      'webpack/hot/dev-server',
      'webpack-dev-server/client?http://localhost:8080',
      path.resolve(__dirname, 'app/app.js')
    ]
  },
  // 文件路徑指向(可加快打包過程)。
  resolve: {
    alias: {
      'react': pathToReact
    }
  },
  // 生成文件，是模塊構建的終點，包括輸出文件與輸出路徑。
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js'
  },
  // 這裏配置了處理各模塊的 loader ，包括 css 預處理 loader ，es6 編譯 loader，圖片處理 loader。
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ],
    noParse: [pathToReact]
  },
  // webpack 各插件對象，在 webpack 的事件流中執行對應的方法。
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

實用的插件

speed-measure-webpack-plugin:   計算 webpack 插件/加載器的運行時間

webpack 有時候打包很慢，用了不少 plugin 和 loader，想知道究竟是哪一個環節慢，下面這個插件能夠計算 plugin 和 loader 的耗時。

 

使用方法很簡單，把 webpack 配置對象包起來便可：

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();

const webpackConfig = smp.wrap({
  entry: {
    app: ["./app.js"]
  },
  output: "./public",
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [{ loader: "babel-loader" }]
      }
    ]
  },
  plugins: [
    new MyPlugin(),
    new MyOtherPlugin()
  ]
});

 

 

效果截圖：

webpack的做者是誰？

webpack的做者是德國紐倫堡Tobias Koppers,一位自由軟件開發者

webpack最初出現想解決的是什麼問題？

谷歌曾經推出過一個工具，叫GWT（Google Web Toolkit），讓Java程序員能用Java編寫客戶端應用。GWT實際上是一個Java應用到JavaScript SPA的編譯器，也使用了谷歌的一些應用。GWT有一個功能做者研究了很長時間，就是代碼拆分（code splitting）。這個功能能夠延遲加載不經常使用的代碼。對於要保持初始加載速度的大型應用，這個功能很是重要。但做者沒發現JavaScript的開源工具（2012年）中哪一個具有這個功能，因而就想寫一個這樣的工具，也就是webpack。

總結就說，webpack誕生之初主要想解決代碼拆分的問題