如何使用Webpack 模組整合工具· Rhadow's Tech Note

如何使用 Webpack 模組整合工具

23 Mar 2015

前端的世界變化的很快，最近如果有持續在關注 ReactJS 的人應該或多或少都會聽過 Webpack 這個名詞。這段 Pete Hunt 的演講 清楚的指出了 Webpack 與其他模組整合工具的差別，也給了正在使用 gulp 和 browserify 的開發者另一個選擇來完成模組整合的工作。Pete 也在 Github 上寫了 webpack-howto 來更加詳細地解釋 Webpack 的概念。本篇將參考 Pete 提供的範例，英文比較好的讀者建議直接閱讀原出處。

Webpack

Webpack 是德國開發者 Tobias Koppers 開發的模組整合工具。它的核心功能如下:

• 可同時整合 CommonJS 和 AMD 模組
• 轉換 JSX, Coffee Script, TypeScript 等
• 分散封裝專案使用的程式碼，使載入頁面時只需載入當頁所需的程式碼以加速載入速度
• 整合樣式表 (css, sass, less 等)
• 處理圖片與字型
• 建置 production-ready 的程式碼 (壓縮)

給使用 Browserify 的開發者

執行下列兩行指令會得到相同的結果:

browserify main.js > bundle.js

webpack main.js bundle.js

不過，Webpack 提供比 browserify 更多的功能，建議創建一個名為 webpack.config.js 的檔案來做集中管理。如果您有在用 Gulp，這隻檔案的功能就類似於 gulpfile.js。

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'       
  }
};

如何啟動 Webpack

切換到有 webpack.config.js 檔案的目錄下並執行:

• webpack : 會在開發模式下開始一次性的建置
• webpack -p : 會建置 production-ready 的程式碼 (壓縮)
• webpack --watch : 會在開發模式下因應程式碼的變換持續更新建置 (快速!)
• webpack -d : 加入 source maps 檔案

將其他轉譯語言轉換回 JavaScript

Webpack 的 loader 相當於 browserify 內的 transforms。以下程式碼顯示了如何在 Webpack 中轉換 CoffeeScript 和 Facebook 的 JSX+ES6。(必須先 npm install jsx-loader coffee-loader):

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'       
  },
  module: {
    loaders: [
      { test: /\.coffee$/, loader: 'coffee-loader' },
      { test: /\.js$/, loader: 'jsx-loader?harmony' } 
      // loaders 可以像 querystring 一樣接收參數
    ]
  }
};

如果希望在 require() 時不需要加入副檔名，可以像下面範例加入一個 resolve.extensions 屬性並告訴 webpack 哪些副檔名是可以省略的:

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'       
  },
  module: {
    loaders: [
      { test: /\.coffee$/, loader: 'coffee-loader' },
      { test: /\.js$/, loader: 'jsx-loader?harmony' } 
      // loaders 可以像 querystring 一樣接收參數
    ]
  },
  resolve: {
    // 設定後只需要寫 require('file') 而不用寫成 require('file.coffee')
    extensions: ['', '.js', '.json', '.coffee'] 
  }
};

樣式表與圖片

Webpack 允許使用 require() 的方式將樣式表與圖片加入:

require('./bootstrap.css');
require('./myapp.less');

var img = document.createElement('img');
img.src = require('./glyph.png');

當引用 CSS (less, sass等) 時，webpack 會將 CSS 內容包在