[note] Webpack 學習筆記
此篇為各筆記之整理,非原創內容,內容主要參考自 webpack 官方網站:Webpack Guides。
$ npm install webpack webpack-cli --save-dev
$ npx webpack # 預設會以 ./src/index.js 為 entry;以 ./dist/main.js 為 output。
# 預設就會吃 webpack.config.js,因此除非檔名有不同,否則可以省略
$ npx webpack --config webpack.config.js
$ npx webpack -p # build in production
$ npx webpack-dev-server --open # run in dev-server
$ npm run build -- --mode production --display-used-exports # 顯示有用到的 exports
- webpack-cli options @ github
- webpack-template @ pjchender github
- Webpack 4 常用設定 @ PJCHENder gist
概念(Concept)
過去我們會將套件直接從 <head></head>
中透過 <script src="">
載入,這種做法稱作「隱式依 賴關係(implicit dependency)」,因為在 index.js
中沒有宣告它需要使用什麼套件,而是預期它會在全域載入。但這麼做有幾個缺點:
- 沒辦法清楚看到程式碼依賴外部的函式庫。
- 如果依賴不存在,或者引入順序錯誤,應用程序將無法正常運行。
- 如果依賴被引入但是並沒有使用,瀏覽器將被迫下載無用代碼。
因此,我們可以用 webpack 來管理我們的程式碼。
Webpack 包含幾個核心部分:
- Entry
- Output
- Loaders
- Plugins
- Mode
- Browser Compatibility
Concepts @ Webpack Concept
Entry
告訴 webpack 要使用的進入點是哪隻檔案,預設會使用 ./src/index.js
。
Output
要把 bundle 過的檔案放在哪裡及其檔名,預設會使用 /dist/main.js
。
Loaders(modules)
雖然 webpack 本來就可以了解 JavaScript 和 JSON 檔,但實際的應用程式中仍包含許多其他類型的檔案(例如,圖檔),這時候會需要透過 loader 來處理 JS / JSON 以外的檔案類型。在設定時,是透過 module.rules
的屬性來設定。
// https://webpack.js.org/concepts/
module.exports = {
// ...
module: {
rules: [{ test: /\.txt$/, use: 'raw-loader' }],
},
};
特別留意使用 regex 來選擇要套用該 loader 的檔案類型是,不要加上單引號或雙引號,也就是使用 /\.txt$/
,而不是 '/\.txt$/'
或 "/\.txt$/"
。
Plugins
Loaders 是用來處理特定類型的檔案,而 plugins 則可以用來執行某些功能更廣泛的任務,像是打包最佳化(bundle optimization)、資源管理(asset management)和注入環境變數。
// https://webpack.js.org/concepts/
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
module.exports = {
module: {
rules: [{ test: /\.txt$/, use: 'raw-loader' }],
},
plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};
由於你可以根據需求在設定檔的不同位置重複使用該 plugin,因此在使用 plugin 是需使用 new
來確保每個 plugin 是獨立的 instance。
Mode
預設值是 production
,還可以是 development
或 none
。
透過這個設定,webpack 會自動啟用最佳化的策略。
Module, chunk, and bundle
Module: Discrete chunks of functionality that provide a smaller surface area than a full program. Well-written modules provide solid abstractions and encapsulation boundaries which make up a coherent design and clear purpose.
Chunk: This webpack-specific term is used internally to manage the bundling process. Bundles are composed out of chunks, of which there are several types (e.g. entry and child). Typically, chunks directly correspond with the output bundles however, there are some configurations that don't yield a one-to-one relationship.
Bundle: Produced from a number of distinct modules, bundles contain the final versions of source files that have already undergone the loading and compilation process.
chunk 是在 webpack process 中的許多 modules;bundle 則是射出的 chunk 或許多 chunks。
注意:在 Webpack 4 中有部分 API 有變動,若下面文章有無法使用的,可以參考 webpack 4 announcement @ GitHub issues 查看更新項目。
載入與執行設定檔
Webpack 的設定檔(configuration file)就是一個匯出為物件的 JS 檔案。
Configuration @ Webpack Concept
安裝
$ npm install webpack webpack-cli webpack-dev-server --save-dev
可以在 package.json
中加入設定檔:
// package.json
"scripts": {
"build:dev": "webpack --config webpack.config.js",
"start": "webpack-dev-server --config webpack.config.js"
}
使用
# 使用 npm
$ npm run start
# 使用 npx
$ npx webpack
Entry and Output
在 webpack 的設定檔中,有兩個最基本的必填屬性,分別是 entry
和 output
。
- 在
context
中,可以設定要讀取檔案的根資料夾(base directory),預設是使用設定檔放置的資料夾。 - 在
entry
中,我們