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 devyarn run build 觀看結果。

Show your support

Clapping shows how much you appreciated Toumasaya’s story.