開源的前端打包工具「Webpack」

一、介紹

Webpack 是一個前端模組打包工具，在 nodejs 的環境下運行，打包和最佳化 JavaScript 或其他資源 供瀏覽器使用。

二、工具

1. node.js
2. Yarn

三、Visual Studio 2019 專案架構

圖、Visual Studio 2019

圖、資料夾目錄

四、安裝 Webpack

圖、開啟命令提攜字元

圖、切換目錄至你的專案資料夾

• 指令

cd D:\XXX\

圖、初始化目錄

• 指令

npm init

圖、安裝 Webpack

• 指令

yarn add webpack webpack-cli

圖、安裝 glob

• 指令

yarn add glob

五、操作步驟

圖、新增 main.js 檔案

• 原始碼

const path = require('path');
const glob = require('glob');

module.exports = {
    entry: glob.sync("./Src/Js/**/*.js"),
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, '../Content/Target/Js'),
    },
};

圖、新增 test.js 檔案

• 原始碼

console.log("a");

圖、開啟 package.json 檔案

package.json 由 yarn 產生，可以拉至專案內。

圖、修改 package.json 的 scripts 區段，新增 dev、build

• json

"dev": "webpack --watch --mode development --config .\\Src\\main.js",
"build": "webpack --mode development --config .\\Src\\main.js"

• 原始碼

console.log("a");

圖、命令提攜字元輸入指令 yarn dev

• 指令

yarn dev

圖、執行結果

六、相關連結

1. 讓 JavaScript 能在伺服器端執行的環境 「node.js」
2. 快速的套件管理工具「Yarn」

七、參考

1. npm
2. webpack