Webpack模塊加載器
一、介紹
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
浙公網安備 33010602011771號