Webpack 2 實作筆記 (1) — 安裝與設定

來自於 Ihatetomatoes 的教學影片，我覺得他的教學淺顯易懂，而且每個影片時間其實都不長，不會看到不耐煩 XD，所以做了筆記。

目前影片發佈到第 9 集（2017/03/13），每週更新一次，作者說如果影片推出 24 小時內有 100 likes 他就馬上發佈新的，不必等到下週 XD

建議可以先看這篇文章： A Detailed Introduction To Webpack
或是同時參考我的筆記：https://goo.gl/voOF6k

先了解一下 Webpack 在幹嘛，接著看影片就會更順喔～

這個系列筆記也同時發佈在 GitHub：
https://github.com/toumasaya/webpack-101

我是使用 Yarn，用 NPM 也可以。

安裝與設定

Webpack 2 Tutorial — Installation and Config

建立專案目錄並且進到目錄，然後初始化 yarn：

$ mkdir webpack-101 && cd webpack-101
$ yarn init

安裝 webpack：

$ yarn add -D webpack

預計目錄結構：

| — src/
     | — app.js
| — dist/
     | — app.bundle.js
| — webpack.config.js
| — package.json
| — yarn.lock

新增 src/app.js，加上：

console.log('Hello World!');

新增 webpack.config.js，加上：

module.exports = {
  entry: './src/app.js', // 要輸出的檔案入口
  output: {
    filename: './dist/app.bundle.js' //最終的目的檔案
  }
}

因為是把 webpack 裝在專案底下，無法直接透過 webpack 指令在 terminal 執行，但可以透過 npm script 來設定，在 package.json：

...
"script": {
  "dev": "webpack -d --watch", // -d 是開發模式，--watch 是監聽檔案變更
  "build": "webpack -p" // -p 是線上模式，預設會壓縮檔案
},
...

執行 yarn run dev 和 yarn run build 觀看結果。