最會翻譯的webpack

啾啾丸是一位程式員。

在業餘之時，她也會不斷的發掘新知識，運動、美食、參加比賽樣樣都來…，就是人家說的斜槓青年，只是他的斜角度可能過大了一點。

小明有一天在使用...歐不對，文章的主角是啾啾丸。

有天啾啾丸又開啟了他她的筆電，打開了VScode準備來練練網頁的技能，這次想要寫的主題是有關javascript的模塊內容啦！！！

原來啾啾丸因為上次去日本，發現她不會說日語的早安，想不到連最簡單英文她也不會，所以為了方便，她想設計一個機器，以後到不同的城市，只要拿出這個機器，就能說出對應的「早安」，而這個機器對應成javascript語言就變成下方的程式碼

// lib.js
var sayMorning = function (language, name) {
  if (language === 'en') {
    console.log(`Good morning, my name is ${name}`);
  } else if (language === 'jp') {
    console.log(`おはようございます、こんにちは私は ${name} です`);
  }
};

module.exports = {
  englishMorning: sayMorning.bind(this, 'en'),
  japanMorning: sayMorning.bind(this, 'jp'),
};

往後在程式需要Print出各式各樣的早安時，只需要拿出這個機器，輸入對應的「語系」，機器自動會吐出正確的「早安」，這樣不就變得很方便嗎？啾啾丸邊流口水邊想著。

於是啾啾丸在網路上認真地爬了文之後，找到了方法可以引進的方法

//app.js
console.log(' -- 啾啾丸的語言App.js');
var langLib = require('./lib.js');

langLib.englishMorning('english');
langLib.japanMorning('japan');

啾啾丸開心的開啟了index.html，期待著機器會印出相對應的早安
但身為工程師的你也知道，事情往往不會這麼順利，瀏覽器報出紅色的錯誤

啾啾丸回去看了看她爬過的文章，也一而再再而三的檢查自己的程式碼是否與網路的文章有出入，甚至是複製貼上都用上了，但是瀏覽器還是報錯誤，到底發生了什麼事？

歷史典故

後來發現是因為使用了 require，原來require並不是內建在瀏覽器可以看得懂的字眼！那require哪來的呢？

在javascript最初設計時因為安全的考量，是沒有從某個文件導入到另個文件的機制的，也就很難實現模板的概念。

後來node.js納入了CommonJS規範之後，才讓js可以使用require詞彙，但是瀏覽器並不包含在內，所以就需要有類似CommonJS類似的工具，來讓瀏覽器也看得懂require的工具。

因此2011年時，Browserify出現了，讓browser也能使用Node.js風格的模組，當然也包含require，編譯成browser認識的javascript。

啾啾丸在弄懂這些歷史歷程之後，又有其他的疑問了，require似乎是大神們為了補足原本的javascript不夠便利，而開發出來的一個新的方式。

是否有其他的檔案也因需更便利，進而包裝了一層，但是瀏覽器也看不懂呢？

webpack的出現

因為網路的大神太多了，JS有ES6，CSS有SASS、SCSS，有各式各樣不同的工具讓開發者在開發網頁時更加的便利，而WebPack的誕生就是將所有的工具都轉成讓瀏覽器看得懂的語言。

啾啾丸迫不及待的去下載webpack來試試看這個強大的功能，在這邊啾啾丸知道如果要下載webpack的話，需要使用npm去安裝，而npm是 Node.js 的套件（package）管理工具，如果安裝了node.js的話，自然就有npm的功能了，因此啾啾丸就做了幾個步驟

啾啾丸的步驟

1. 去Node.js網站下載，然後安裝Node.js
2. 然後在命令提示字元上打上node -v與npm -v來確認都有安裝成功
   
3. 啾啾丸因為有自己喜歡的格式，所以創造了一個屬於他的資料夾風格
4. 接下來使用vscode打開專案資料夾，使用ctrl + ~打開Terminal介面，數入npm init來初始化資料夾，然後因為在初始化時需要填入一些資訊，懶惰的啾啾丸因為覺得很麻煩，全部都點Enter直接下一步，然後就在資料夾內產生了一個package.json檔案
5. 接下來輸入npm install --save-dev webpack webpack-cli來安裝webpack，並在根目錄創建webpack.config.js檔案
   

6. 接下來就是需要去設定webpack.config.js的內部檔案了

   const path = require('path');
   module.exports = {
      entry: {
        App: './src/app.js',
      },
      output: {
        filename: 'app.bundle.js',
        path: path.resolve(__dirname, 'dist'),
      },
   };
   

   -- App：代表程式的進入點
   -- filename：產出後的檔案名稱，加上bundle的字眼容易辨識已打包過
   -- path：產出後的檔案位置

7. 接下來就可以在Terminal中輸入npx webpack --config webpack.config.js產出app.bundle.js
   

8. 因為啾啾丸原本在index.html引用的是原本的app.js這支檔案，但是因為現在要改為使用app.bundle.js，所以必須修改指向的檔案
   

這次，啾啾丸再次打開網頁的時候，終於成功了打印出她想要的效果了

補充

如果需要重新打包app.bundle.js這支檔案，那就需要再次重新輸入npx webpack -- config webpack.config.js，這不僅僅太長，也難以記憶，好加在npm都幫你想好了，在package.js檔案中，有個"script"名稱的物件，裡面可以放置各式各樣的Json格式指令，讓你不需要每次都打那麼一長串。

{
   ...
   "script": {
       "build": "webpack --config webpack.config.js"
   }
   ...
}

在這邊我設定只要以後我輸入"build"，就會自動幫我執行後面的命令，因此下回我只需要打開Terminal，輸入npm run build的指令，就會自動執行相對應的命令。

後記

這部分的文章僅是解決了一小部分的問題，還有ES6、CSS....眾多的語法糖，也須再增添指令到webpack.config.js的檔案內成功轉譯，webpack還有需要神奇且強大的功能還沒使用到，不過詳細的使用方式，等啾啾丸下次有更詳細的研究後，再寫一篇專業的操作文章來跟大家解釋吧。