webpack4(二)：初試webpack安裝與打包

webpack 教學

Megan

Published in

Learn & Record

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文件，複雜的專案可能會區分開發環境、測試環境與線上環境，並分别使用不同的配置文件，這些後續章節再一一介紹。

webpack4(二)： 初試webpack安裝與打包

webpack 教學

Written by Megan

webpack4(二)：初試webpack安裝與打包