這次的主題是最近很紅的「Webpack」， Webpack 是一個擴充性極佳的打包工具，最基本的功能就是幫我們的程式碼打包成一個或多個檔案，而且我們還可以安裝 Loader ，例如： Babel 可以幫我們轉譯 ES6 成 ES5，而我們前一篇文章說的 JSX ，瀏覽器當然也是完全看不懂，我們還是要經過 Babel 轉譯，將 JSX 翻譯成 JavaScript ，瀏覽器才會看得懂我們在寫什麼。
如果只是轉譯檔案還沒什麼，一個指令幫我把轉譯好所有檔案才是 Webpack 最有價值的地方，而更厲害的是，我們還可以為 Webpack 安裝額外插件， Minify 、 Uglify 、 Source Map 等等都可以靠插件來幫我們一次完成，唯一可惜的是 Webpack 的設定相比其他 Task Runner 來說複雜不少，學習曲線有點高，希望這篇新手教新手的文章能給各位一點方向！
安裝 Webpack
建立一個範例用的專案資料夾，資料夾的格式如下：
- app/
- index.js
- component.js
- index.html
- build/
- index.html
- node_modules/
- package.json
- webpack.config.js
- 安裝 Node.js ，版本至少為 LTS 以上
- 安裝 本機 Webpack ：
npm install -g webpack - 安裝 專案 Webpack ：
npm install --save-dev webpack
<!-- In index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack Demo</title>
</head>
<body>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
// In index.js
var component = require('./component');
document.body.appendChild(component());
// In component.js
module.exports = () => {
var element = document.createElement('h1');
element.innerHTML = 'Hello world';
return element;
};
基本觀念
首先， Webpack 所有的設定都在 webpack.config.js 內，而在這個設定檔裡面，有三件重要的是要跟 Webpack 說：
- Webpack 該從哪裡找要轉譯的檔案
- Webpack 該如何轉譯這些找到的檔案
- Webpack 該轉譯並打包到哪裡
第一步：設定 Entry
我們的第一步是要告訴 Webpack 該從哪裡開始找我們要轉譯的檔案
module.exports = {
entry: [
'./app/index.js'
]
};
我們最終的設定檔都要傳入 module.export 內，以上程式碼改成這樣也行：
var config = {
entry: [
'./app/index.js'
]
};
module.exports = config;
entry: [Array] entry 接收的是由字串組成的陣列，這個就是放我們的「起點」的地方，至於為什麼陣列呢？因為我們之後可以有多個「起點」，所以這邊就用陣列來方便我們之後擴充使用。
第二步：該如何轉譯
Webpack 知道我們的檔案在哪裡了，下一步就是告訴它該如何翻譯
module.exports = {
entry: [
'./app/index.js'
],
module: {
loaders: []
}
};
module 內可以放許多設定，這個以後有機會會在介紹，這邊的主角是 loaders ， 接收的資料是一串由物件組成的陣列，假設我們這邊要轉譯的是 ES6 to ES5 ，首先我們要先安裝 Babel 來當 Webpack 的翻譯機。
npm install --save-dev babel-core babel-loader babel-preset-es2015
安裝完畢之後，來繼續設定我們的 Webpack Loader
module.exports = {
entry: [
'./app/index.js'
],
module: {
loaders: [{
loader: 'babel-loader',
query: {
presets: ['es2015']
},
test: /\.js?$/, //正規表示式，表示要轉譯的副檔名
exclude: /(node_module)/ //忽略這個資料夾
}]
}
};
第三步：輸出的目的地
我們設定好「起點」了，也告訴 Webpack 該如何翻譯了，最後就是要告訴 Webpack 我們的目的地。
module.exports = {
entry: [
'./app/index.js'
],
module: {
loaders: [{
loader: 'babel-loader',
query: {
presets: ['es2015']
},
test: /\.js?$/,
exclude: /(node_module)/
}]
},
output: {
filename: "index.js",
path: __dirname + '/build'
}
};
最後的 output 就是放我們的「目的地」， filename 是我們轉譯打包後的檔案名稱， path 則是我們要存放這個檔案的路徑，順便一提， __dirname 是 Node.js 內建的變數，其值為該檔案的所在路徑。
最後一步：執行 Webpack
所有設定都完成了之後，到跟目錄底下執行 webpack ，如果沒有錯誤訊息，程序完成之後會發現「build」資料夾內多了一個 index.js 檔案，此時點擊「build」內的 index.html ，便可以看到我們大大的 Hello World 囉！
不過能看到結果不意外，我們到 Webpack 輸出的 index.js 來看一下，會發現我們原本的component.js
module.exports = () => {
var element = document.createElement('h1');
element.innerHTML = 'Hello world';
return element;
};
被翻譯成了 ES5 版本了！
module.exports = function () {
var element = document.createElement('h1');
element.innerHTML = 'Hello world';
return element;
};
這樣一來我們就可以安心地使用最新的 ES6 進行編程，也不用擔心瀏覽器不支援囉！
2016-07-28 at 上午 12:40
我覺得這句話不太對
” Webpack 最基本的功能就是幫我們的程式碼轉譯並打包成瀏覽器讀得懂的檔案格式”
以剛剛的 es 6 => es5 來說 實際在做這功能的事 Babel
他的角色應該不能說是轉譯器這樣
2016-07-28 at 上午 11:04
了解！後來再仔細看了一下，實際轉譯的是我們安裝的Loader，我來更新一下