Tim的前端日誌
0%

發表於 更新於

上一篇安裝完好後，我們的專案目前是這樣

1
2
3
4
node_modules
src
package.json
package-lock.json

再來在跟目錄上新增 ‵webpack.config.js`。

Mode

通常我們在開發時，都會有開發模式、部署模式這兩種模式，在此就主要是透過 mode 屬性來設置。

1
2
3
4
module.exports =  {
  /* ... */
  mode: 'development',
}

Entry

第一步要設定的是 entry point，也就是 webpack 會以哪支檔案作為進入點來開始打包檔案。換句話說，所有要被編譯的檔案都要import到進入點。

此範例中，我們將進入點設在 src/index.js

1
2
3
4
5
6
const path = require('path')

module.exports = {
  entry: {
    main: path.resolve(__dirname, './src/index.js'),
  },

Output

Output 是打包後檔案輸出的位置，設定在 /dist 資料夾。這邊的 [name] 會自動帶入 entry 設定的 main。[contenthash] 則是會生成一組 hash 而這個生成邏輯會依據提取的內容來生成。

為什麼會使用到 hash，最主要是避免瀏覽器的緩存問題，我們在開發時，通常會瘋狂的重新整理，而這過程就有可能導致緩存發生而無法確定我們修改的內容，那麼透過 hash 每一次存擋就重新生成不同的檔案名稱，這樣子瀏覽器就不會緩存內容了。

1
2
3
4
5
6
7
8
module.exports = {
  /* ... */

  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].[contenthash].bundle.js',
  },
}

最後在 package.json 中的 scripts 屬性增加一行啟動指令

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

然後在終端機輸入 npm run build 就可以成功打包檔案。此時專案資料夾下會多出一個 dist 資料夾。

發表於 更新於

什麼是 webpack ?

在以前做網頁開發時，可能只需要處理html、css、js檔案就可以了。但現在前端開發工具越來越多，像css有scss的預處理器、html可以用pug來寫等等。此時就須要一個工具來將這些scss、pug檔案編譯成css跟html。

webpack 就是主要負責幫我們整合並打包成瀏覽器看得懂的 CSS、HTML、JavaScript 以及 Image。

專案安裝

首先先開啟一個新的專案資料夾，叫做 webpack-starter，並用 npm -y 來新增 package.json檔案。

1
2
3
mkdir webpack-starter
cd webpack-tutorial
npm init -y # creates a default package.json

再來安裝 webpack 和 webpack-cli

1
npm i -D webpack webpack-cli

再來在專案下新增 src 資料夾，並在 src 裡新增 index.js檔案

1
console.log('Interesting!')

到這邊就完成專案基本設定囉。