Skip to main content

Getting Started

安裝

npm i -D webpack webpack-cli

基本配置

我們在使用 Webpack 工具的時候,通常會先建立 webpack.config.js 的設定檔。 如果沒有設定的話,它會使用 Webpack 的預設參數 來進行打包工作,詳情可以至 Webpack 的官網查看。

而內容如下所示:

webpack.config.js
const path = require('path');

module.exports = {
mode: 'development',
entry: path.resolve(__dirname, './src/main.js');
output: {
path: path.resolve(__dirname, './dist');
filename: '[name].[contenthash].bundle.js',
}
}

在使用 Webpack 打包時,我們通常會使用 Node 內建的 path 模組來取得絕對路徑, 避免在其他作業系統環境發生無法預期的路徑錯誤

mode

通常我們會分成 開發 Development部署 Production 兩種環境, 同時也會將 webpack.config.js 配置檔切分成兩種不同環境,為了能依照不同的情況去使用不同的配置檔。

entry

Webpack 解析程式的 進入點,預設是 ./src/index.js,也可以同時有 多個進入點

output

經 Webpack 解析後輸出 bundle 的目錄 path、檔案名稱 filename。 其中,可以發現在 filename 的地方有 [name][contenthash] 兩個屬性:

  • [name]:會依據 entry 名稱來決定。
  • [contenthash]:依照 bundle 的內容去來產生 hash 值,當 bundle 改變時產生的 hash 值才會改變。

使用 hash 的原因主要是為了避免瀏覽器緩存的問題,因為通常在開發的時候我們會大量的進行重新整理, 而很有可能會造成緩存的問題、無法正確看到修改後的結果。

而除了 [contenthash] 以外,你也可以使用下方其他 hash 的方式:

  • [fullhash]:基本的 hash 值,只要檔案有變化就會改變。
  • [chunkhash]:依照 chunk 的內容去來產生 hash 值,當 chunk 改變時產生的 hash 值才會改變。
tip

ChunkBundle 同樣都是在指被 Webpack 所解析的程式,只是因不同的時間點有不同的稱呼。

  • Chunk:是在程式被 Webpack 解析中的名稱。
  • Bundle:是程式被 Webpack 解析後輸出檔案的名稱。

加入指令、使用方式

在 package 中加入下面指令。

package.json
{
...,
scripts: {
"build": "webpack",
"start": "webpack serve"
},
...
}

接著透過終端機執行指令。

使用下方指令 Webpack 就會開始進行 Bundle,完成後就可以在 dist/ 看到結果。

npm run build

使用下方指令則會在 Local 運行伺服器,即可開始開發。

npm run start

參考文章