webpack+nodejs+npm構建前端專案

為了打造自己的開發生態，決定寫一本書來理清思緒。主要聊聊模組化與打包，涉及的知識包括ES6、TypeScript、CommonJS、NodeJs、Npm、Webpack等。

從webpack說起，官網是https://www.webpackjs.com。

webpack 是一個高度可配置的JavaScript 應用程式靜態模組打包器(module bundler)。

在開始之前，需要理解四個核心的概念：

• 入口(entry)
• 輸出(output)
• loader
• 外掛(plugins)

entry：是webpack執行打包的起始位置，由此開始構建模組與庫的依賴。

output：是打包完成後輸出的配置,例如打包結果輸出位置，打包資源名稱。

loader：由於webpack本身只關注js檔案，對於打包中需要處理的其他型別檔案，需要特殊處理，於是就 有了loader,loader 可以將所有型別的檔案轉換為 webpack 能夠處理的有效模組。

plugins外掛：外掛可以用於執行範圍更廣的任務。如果你要使用某個外掛，只需在程式碼中引入它，然後把它新增到 plugins 陣列中，打包後就能使用了。