webpack4(二): 初試webpack安裝與打包
webpack 教學
Published in
May 20, 2021
此章節會配置一個最簡單的webpack來快速瀏覽其打包流程。
Webpack依赖Node.js,所以需要有nodejs環境 (請先安裝好nodejs)。
先在本地建一個資料夾 (test-webpack),並進入資料夾:
$ cd test-webpack
在此資料夾初始化一個node專案
$ npm init
安裝指定版本的webpack與webpack-cli (安裝指定版本只為避免出現意外錯誤)
$ npm install — save-dev webpack@4.43.0 webpack-cli@3.3.12
專案架構如下:
├─ a.js
├─ b.js
├─ bundle.js
├─ index.html
├─ package.json
└─ webpack.config.js
a.js 内容
// ES6的模組化語法import { name } from './b.js';console.log(name);
b.js内容
// ES6的模組化語法export var name = 'Jack';index.html 内容<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="bundle.js"></script> </head> <body> </body></html>
webpack.config.js 配置
var path = require('path');
mode: 'none'module.exports = {
entry: './a.js',
output: {
path: path.resolve(__dirname, ''),
filename: 'bundle.js'
}
};
執行打包
$ npx webpack
說明:
- 為什麼要打包? 因為原始碼沒辦法直接放到瀏覽器上執行,所以一定要經過webpack或其他工具打包處理,打包完的檔案才能在瀏覽器上執行。
- Webpack默認的配置文件是專案根目錄下的webpack.config.js,因此在執行npx webpack命令的時候,webpack會自動尋找該文件並使用其配置進行打包。
- 什麼是npx?npm 從5.2版開始,增加了npx指令。Node 自帶 npm,所以可以直接使用 npx 命令。更方便的調用專案内部安裝的依賴。
- mode代表打包模式,默認值是 ‘production’。若没有設置 mode ,webpack就會報錯。mode設置成 ‘production’,打包後的bundle.js程式碼就是壓縮過的。將mode設置成 ‘none’ 是為了讓bundle.js不進行任何優化。
- path是Node.js裡的路徑解析套件,其resolve方法是將參數解析成一個絕對路徑返回。__dirname是Node.js的一個全域變數,表示當前文件的路徑。而 path.resolve(__dirname, ‘’) 則表示,當前文件根目錄的絕對路徑。
- module.exports是CommonJS規範的輸出語法,輸出的是一個物件,該物件的屬性就是Webpack打包要使用的參數。entry是Webpack建構的入口文件,我們的入口文件是a.js。output是打包後輸出的文件,其中path表示輸出的路徑,filename表示輸出的文件名。現在我們把打包後的文件輸出在當前目錄的bundle.js。
- 簡單的專案使用默認的webpack.config.js文件,複雜的專案可能會區分開發環境、測試環境與線上環境,並分别使用不同的配置文件,這些後續章節再一一介紹。