Webpack模組載入器

吳佰清發表於2017-04-18
Web

一、介紹

Webpack是德國開發者 Tobias Koppers 開發的模組載入器，它能把所有的資源文
件（JS、JSX、CSS、CoffeeScript、Less、Sass、Image等）都作為模組來使用和處理。

作為一個模組打包工具，主要功能是打包資原始檔並整合到一個包中，我們在開發時，只需
要引用一個包檔案，就能載入預先設計好的模組功能。


二、安裝

不同檔案型別的資源，Webpack有對應的模組loader，ES6語法轉換用的是babel-loader，
dataUrl用的是url-loader，樣式用的style、css-loader。
loader列表：http://webpack.github.io/docs/list-of-loaders.html

# 安裝webpack
npm install webpack
 
# 使用babel、css、dataUrl模組
npm install style-loader css-loader url-loader babel-loader babel-preset-es2015

# 建立webpack.config.js檔案
touch webpack.config.js

安裝Webpack之後，可以使用webpack命令列工具，它預設讀取當前目錄下的webpack.config.js配置檔案。


三、基本使用

webpack宣告載入babel、style、css、url的loader之後會讀取main.js所有模組，並把打包
後的結果輸出到bundle.js檔案中。

module.exports = {
  // 讀取main.js檔案中引用的所有模組
  entry: './main.js',
  // 執行打包後輸出的檔案
  output: {
    filename: 'bundle.js'
  },
  // 載入模組
  module: {
    loaders: [
      // 匹配所有js檔案，用babel工具識別ES6程式碼轉換成ES5
      { test: /\.js$/, loader: 'babel-loader', query: {presets: ['es2015']} },
      // 匹配所有css檔案, 用style和css工具解析
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      // 匹配所有png檔案，解析成dataUrl格式
      { test: /\.(png|jpg)$/, loader: 'url-loader'} // inline base64 URLs for <=8k images, direct URLs for the rest
    ]
  }
};


建立五個資原始檔，分別寫入
1. main.js
2. js/console-01.js
3. js/console-02.js
4. css/index.css
5. images/3.jpg

 

// main.js - 載入模組
// --------------------------------------------
require('./js/console-01.js');
require('./js/console-02.js');
require('./css/index.css');

// 讀取圖片模組，並輸出到body中
var img = document.createElement('img');
img.src = require('./images/react.jpg');
document.body.appendChild(img);
// --------------------------------------------

// JS - console-01.js
console.log('console 01');

// JS - ES6 - console-02.js
for (let i = 2; i <= 10; i++) {
  console.log('console 02');
}

// CSS樣式模組
body {
  background: #ccc;
}

執行webpack命令，它會讀取main.js檔案，並把main.js依賴的模組進行打包處理，最終輸出到bundle.js檔案下。

# 執行webpack命令
webpack

# 輸出結果
------------------------------------------------------
Hash: d9ca67a5753768b7c625
Version: webpack 1.12.11
Time: 52ms
Asset Size Chunks Chunk Names
bundle.js 24 kB 0 [emitted] main
+ 8 hidden modules
------------------------------------------------------

建立一個index.html檔案，並引用bundle.js開啟瀏覽器後

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>

bundle.js檔案包含了 CSS樣式載入、圖片dataUrl、JS 的合併打包處理。

 

四、哪些專案用到Webpack
1. React（JSX）
2. Vue （.vue）
3. Ant Design （淘寶Ant全元件）

五、哪些專案適合用Webpack
1. 單頁應用 SPA （Single Page Application）
2. 需要把資原始檔整理成一個檔案包的專案
3. 用到ES6和JSX專案
4. 可以考慮代替Gulp、Grunt等工具

參考資料：
http://webpack.github.io/
https://github.com/webpack
http://segmentfault.com/a/1190000002551952

相關文章