前言
- 這段可以跳過看下面的。
- 本來，這個教程想完結的了。但回頭看自己寫的，感覺就像寫明瞭什麼意思，具體怎麼使用都沒說明白，而且讓人看得會有點乏味吧。
- 我也是剛開始寫文章，在學習怎樣可以寫好有趣味性而且學東西起來又不枯燥的文章，一步一步堅持走下去咯。
序言
- 剛接觸 webpack 的人，會覺得蠻複雜的哦，網上的教程都是列出一堆選項和配置 （我寫的也是這樣….哈哈），那麼就會等有時間再去看看吧。我剛學也是這樣。這念頭是不行的哦，後來啃文件和看網上教程，自己動手配置。發覺 webpack其實真的不難，畢竟它是一個工具，如果用起來都不順手，那為什麼那麼多人用，是不是。
- 找對學習的方法，才容易理解它。我覺得可以把 webpack 當成人物養成遊戲來玩，哦不，來學。
一. 遊戲設定
- 有個叫
wp仔（ webpack 來的，下面也這樣叫了。）的員工，在名叫Web的公司上班，工作是處理一些檔案。 - 我們玩家就要武裝 wp仔，讓他能夠處理 Boss 給各種各樣任務，不讓他被 Boss 在開會的時候點名批評。
- 那我們來看看 wp仔 的基礎屬性吧。
module.exports = {
entry: __dirname +`/src/main.js`,
output: {
path: __dirname + + `/build`,
filename: `bundle.js`
}
};二. 遊戲開始
小試身手
- 一天 Boss 跟 wp仔 說，你的打包檔案技能能不能加強點啊，小心我批評你呀。
- 這時，我們玩家就要讓 wp仔 學習新的打包技術了。到哪裡找？不要慌，這遊戲有個官方資源庫，什麼技能書，飾品，配件，應有盡有，大家可以點資源商店，進去看看裡面的東西。
- 好啦，我們找到了一款 eval-source-map 的技能書，點選學習。
module.exports = {
.... // 其他的配置
devtool: `eval-source-map`
};Boss 的不滿，只好加強屬性。
- Boss ：雖然打包是快了，但有些檔案錯誤，你沒發現嗎，注意下。
- wp仔 瑟瑟發抖，玩家們要幫他度過難關啊。快去資源商店看看，找找看什麼幫得上忙。
- 找到了一個飾品 webpack.NoEmitOnErrorsPlugin 記錄錯誤，我們玩家就可知道哪裡出錯然後去改咯，趕快帶上。
modul.exports = {
... // 其他屬性
pilugins: [
new webpack.NoEmitOnErrorsPlugin()
]
}- Boss ：wp仔 啊，你就沒發現很多重複的檔案嗎？而且，剛修改過的檔案有沒有加進去啦，求求你別秀了。
- 我去，連放在中間的相同檔案都發現，秦始皇的長生不老藥我都不服，就服你。
- 還好，找到了 webpack.optimize.DedupePlugin 飾品可以去掉重複的，而 devServer 工具雖然不是在資源店，是在樓下小賣部的獲得的。聽說把 hot寶石放進這工具就能自動更新打包。裝上去試試。
- webpack.optimize.DedupePlugin，已被移除了。感謝@LowryTang指出。
modul.exports = {
... // 其他屬性
devServer: {
host: `localhost`,
port: 8080,
hot: true
},
pilugins: [
...
new webpack.optimize.DedupePlugin()
]
}你還要我會文言文 ？
- Boss：最近表現不錯。公司最近弄來了一些未來的文言文，你把它翻譯成現代文吧。
- 什麼鬼，文言文？還是未來的？我的天。
- 找遍資源店都沒有適合，還好樓下小賣部神通廣大，居然有這 babel 這逆天的裝備，不過聽說要自己配置這裝備的屬性。
// .babelrc
{
"presets": [
"env",
"stage-2"
],
"plugins": ["transform-runtime"] //可以理解為裝備的插槽。之前文章中有說過簡單用法。
}
// webpack.config.js
module.exports = {
... // 其他屬性
module: {
rules: [
{
test: /.js$/,
loader: `babel-loader`
}
]
}
},最後
文章寫成這樣不知效果怎樣，但主要想說明的是，webpack 真不難，面對不同的場景給 wp仔 搭配不同的屬性。儘管上面說的只是很簡單的配置，你們也可以弄個滿狀態的 wp仔 ，可我想讓大家換個角度學習，這樣學起來樂趣很多。
謝謝觀看。