PJCHENder 未整理筆記

[Unit1] Webpack 起手式

2017-09-26

[Unit1] Webpack 起手式

@([Udemy] Webpack 2: The Complete Developer’s Guide)

Webpack 最主要也最核心的功能就是要用來打包 js 的模組(modules)。

Step1: 建立 npm 專案

npm init --yes

Step2: 寫兩支簡單的程式

寫兩支簡單的程式,sum.jsindex.js 其中 index.js 是相依於 sum.js

sum.js

利用 module.exports 匯出模組,這是屬於 CommonJS 的寫法:

1
2
3
4
5
// sum.js
function sum (a, b) {
return a + b
}
module.exports = sum
index.js

利用 require 載入模組

1
2
3
4
5
// index.js
const sum = require('./sum')

const total = sum(10, 5)
console.log(total)

Step3: 建立 webpack config 檔

在 webpack 的設定檔中,有兩個最基本的必填屬性,分別是 entryoutput

  • entry 中,我們可以直接放相對路徑。
  • output
    path 中,我們則是要放絕對路徑,在這裡我們可以使用 Node 提供的 path module 來取得當前資料夾的絕對路徑。
    filename 在慣例上則是會使用 bundle.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// webpack.config.js
const path = require('path')

const config = {

entry: './src/index',

output: {
path: path.resolve(__dirname, 'build'), // 這裡要填絕對路徑,用 node module 幫助產生,慣例上存在 build 或 dist
filename: 'bundle.js' // 慣例上用 bundle.js
}

}

module.exports = config

Step4: 安裝 webpack 並建立指令

接著我們透過 npm 來安裝 webpack,在這裡建議將 webpack 安裝在專案中,而不是安裝在全域環境,因為我們可能在不同的專案會使用不同版本的 webpack。

1
npm install --save-dev webpack

接著,我們要在 package.json 中建立指令(scripts),讓它可以執行 webpack:

1
2
3
"scripts": {
"build": "webpack"
},

Step5: 將檔案透過 Webpack 打包

接著執行 npm run build 就會透過 webpack 進行打包。

img

Step6: 將 bundle.js 載入網頁

接著我們可以把 bundle 好的 js 檔掛入網頁當中,它就會執行我們剛剛 js 的內容了。

1
<script src="./build/bundle.js"></script>

掃描二維條碼,分享此文章