何謂Webpack?
- Webpack 是一套Javascript模組打包工具(is a module bundler for your JavaScript.)
- 後來由於越來越多人使用後,變成為Javascript的管理工具(壓縮、合併等工作)。
- 工作流程:

安裝 Webpack
npm install -g webpack
// 使用 Yarn
yarn global add [email protected] [email protected]
yarn add --dev [email protected] [email protected]
webpack.config.js 設定檔
'use strict';
const webpack = require("webpack");
module.exports = {
context: __dirname + "/src",
entry: {
app: "./app.js",
},
output: {
path: __dirname + "/dist",
filename: "[name].bundle.js",
},
};
// __dirname refers to the root of your project.
Webpack 會做的事情
- Starting from the context folder, …
- it looks for entry filenames
- and reads the content. Every import (ES6) or require() (Node) dependency it finds as it parses the code
- From there, Webpack bundles everything to the output.path folder, naming it using the output.filename naming template ([name] gets replaced with the object key from entry)
執行 Webpack
webpack -p // p flag is “production” mode and uglifies/minifies output.
範例
use strict';
const webpack = require("webpack");
module.exports = {
context: __dirname + "/src",
entry: {
app: ["./home.js", "./events.js", "./vendor.js"],
},
output: {
path: __dirname + "/dist",
filename: "[name].bundle.js",
},
};
const webpack = require("webpack");
module.exports = {
context: __dirname + "/src",
entry: {
home: "./home.js",
events: "./events.js",
contact: "./contact.js",
},
output: {
path: __dirname + "/dist",
filename: "[name].bundle.js",
},
};