從零開始搭建一個 Webpack 開發環境配置（附 Demo）

Webpack · 發表 2019-01-30 16:20:45

摘要：本文使用 Webpack 從零開始搭建一個開發環境的腳手架配置，在此做個記錄，也方便以後使用。前言我的上一篇文章簡單介紹了一下 Webpack 的一些核心概念和基本配置，需要了解的朋友可以先參考一下Webpack 的簡單介紹從 webpack v4.0.0 開始，可以不用...

本文使用 Webpack 從零開始搭建一個開發環境的腳手架配置，在此做個記錄，也方便以後使用。

前言

我的上一篇文章簡單介紹了一下 Webpack 的一些核心概念和基本配置，需要了解的朋友可以先參考一下Webpack 的簡單介紹

從 webpack v4.0.0 開始，可以不用引入一個配置檔案。直接使用 webpack 命令就可進行打包。但是，一般我們需要進行更靈活的配置功能，所以本文我也建立一個 webpack 的配置檔案，對webpack 的一些屬性進行配置。

本文 Demo 地址

環境搭建

專案結構

首先我們建立一個目錄，初始化 npm，然後在本地安裝 webpack，接著安裝 webpack-cli（此工具用於在命令列中執行 webpack）：

$ mkdir webpack-dev-demo && cd webpack-dev-demo

$ npm init -y

$ npm install webpack webpack-cli --save-dev
複製程式碼

project

webpack-dev-demo
|- package.json
|- /public
|- index.html
|- /src
|- index.js
複製程式碼

src/index.js

function component() {
var element = document.createElement('div');

element.innerHTML = 'Hello World';

return element;
}

document.body.appendChild(component());
複製程式碼

public/index.js

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Webpack 開發環境配置</title>
</head>
<body>

</body>
</html>
複製程式碼

package.json

{
"name": "webpack-dev-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1"
}
}

複製程式碼

建立配置檔案

在專案根目錄下建立 webpack.config.js 配置檔案

project

webpack-dev-demo
|- package.json
|- /public
|- index.html
|- /src
|- index.js
+ |- webpack.config.js
複製程式碼

配置入口和輸出

webpack.config.js

const path = require('path');

module.exports = {
entry: './src/index.js',
output: {
filename: '[name]-[hash:8].js',
path: path.resolve(__dirname, 'dist')
}
}
複製程式碼

執行 webpack

$ npm run build
複製程式碼

控制檯的列印結果

可以看到列印日誌，打包成功了，但是此時在瀏覽器開啟我們的 index.html 檔案，卻發現介面上什麼都不顯示，這個也好理解，因為 index.html 此時還沒有引入任何的 js 檔案。所以這個時候就要將打包後的檔案引入到 index.html 檔案中，但是可以看到 dist 資料夾下的 js 檔名有很多的 hash 值，而且每次編譯都可能不同，怎麼辦呢？這時候就要引入 html-webpack-plugin 外掛了

html-webpack-plugin 外掛的使用

安裝外掛：

$ npm install html-webpack-plugin --save-dev
複製程式碼

使用外掛：

webpack.config.js

...
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
...
plugins: [
new HTMLWebpack({
// 用於生成的HTML文件的標題
title: 'Webpack 開發環境配置',
// webpack 生成模板的路徑
template: './public/index.html'
})
]
}
複製程式碼

關於 html-webpack-plugin 外掛更多配置請參考：外掛文件。

再次執行 webpack

$ npm run build
複製程式碼

可以看到 dist 資料夾下生成了一個 index.html 檔案，在瀏覽器中開啟這個 index.html 檔案，可以看到，'Hello World' 已經能夠正常顯示了

至此，專案能夠正常打包了，但是還不夠，此時可以看到 dist 資料夾下有兩個 js 檔案，但是明明只打了一個包啊。是因為另一個包使我們上一次操作打出來的，並沒有刪除掉。所以，為了避免 dist 資料夾中的檔案變得雜亂，我們還需要引入 clean-webpack-plugin 外掛幫助我們清理 dist 資料夾

clean-webpack-plugin 外掛的使用

安裝外掛：

$ npm install clean-webpack-plugin --save-dev
複製程式碼

用法：new CleanWebpackPlugin(paths [, {options}])

webpack.config.js

...
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
...
plugins: [
...,
// 用法：new CleanWebpackPlugin(paths [, {options}])
new CleanWebpackPlugin(['dist'])
]
}
複製程式碼

再次執行 webpack

$ npm run build
複製程式碼

此時 dist 資料夾下只有一個 js 和 html 檔案了。說明外掛配置成功了，關於 clean-webpack-plugin 更多配置請參考：外掛文件。

配置 Http 服務並進行實時預覽

安裝 webpack-dev-server 包：

$ npm install --save-dev webpack-dev-server
複製程式碼

使用：

webpack.config.js

...
const webpack = require('webpack');

module.exports = {
...
devServer: {
// 必須配置的選項，服務啟動的目錄，預設為跟目錄
contentBase: './dist',
// 使用熱載入時需要設定為 true
hot: true,
/**
* 下面為可選配置
*/
// 指定使用一個 host。預設是 localhost
host: 'localhost',
// 埠號
port: 8000,
// 當使用 HTML5 History API 時，任意的 404 響應都可能需要被替代為 index.html。通過設定為 true 進行啟用
historyApiFallback: {
disableDotRule: true
},
// 出現錯誤時是否在瀏覽器上出現遮罩層提示
overlay: true,
/**
* 在 dev-server 的兩種不同模式之間切換
*預設情況下，應用程式啟用內聯模式 inline
*設定為 false，使用 iframe 模式，它在通知欄下面使用 <iframe> 標籤，包含了關於構建的訊息
*/
inline: true,
/**
* 統計資訊，列舉型別，可供選項：
*"errors-only": 只在發生錯誤時輸出
*"minimal": 只在發生錯誤或有新的編譯時輸出
*"none": 沒有輸出
*"normal": 標準輸出
*"verbose": 全部輸出
*/
stats: "errors-only",
// 設定介面請求代理，更多 proxy 配置請參考 https://github.com/chimurai/http-proxy-middleware#options
proxy: {
'/api/': {
changeOrigin: true,
// 目標地址
target: 'http://localhost:3000',
// 重寫路徑
pathRewrite: {
'^/api/': '/'
}
}
}
},
plugins: [
...,
// 新增 NamedModulesPlugin，以便更容易檢視要修補(patch)的依賴，由於設定了 mode: 'development'，所以這個外掛可以省略
// new webpack.NamedModulesPlugin(),
// 進行模組熱替換
new webpack.HotModuleReplacementPlugin()
]
}
複製程式碼

啟用熱載入功能：(上面已經添加了) 1、在 devServer 配置中新增 hot: true 屬性 2、在 plugins 中新增 new webpack.NamedModulesPlugin() 和 new webpack.HotModuleReplacementPlugin()

在 package.json 中新增一個執行命令

package.json

...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
+"start": "webpack-dev-server"
}
...
複製程式碼

啟動 Http 服務

執行命令：

$ npm run start
複製程式碼

可以看到控制檯列印輸出：

開啟瀏覽器，輸入： http://localhost:8000/ ，可以看到瀏覽器中可以正常顯示 Hello World。

模式配置

webpack 配置中有一個 mode 屬性的配置，三個可選屬性：

production 會將 process.env.NODE_ENV 的值設為 production。啟用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin。
development 會將 process.env.NODE_ENV 的值設為 development。啟用 NamedChunksPlugin 和 NamedModulesPlugin。
none 不選用任何預設優化選項

這裡我們配置的是開發環境，所以需要將 mode 設定為 development

webpack.config.js

...
module.exports = {
+mode: 'development',
...
}
複製程式碼

啟用除錯工具 Source Map

此時專案能夠正常執行，所以沒有什麼問題，但是現在我們修改一下，將 index.js 中的 return element 改成錯誤的 return ele 。我們 F12 開啟開發工具，可以看到控制檯的錯誤提示，點進去卻發現跟我們寫的程式碼不一致，難以對錯誤的程式碼進行除錯，此時 Source Map 就派上用場了。

在 webpack.config.js 中新增 devtool 屬性

webpack.config.js

...
module.exports = {
mode: 'development',
+devtool: inline-source-map
...
}
複製程式碼

devtool 的多個屬性之間的差異

devtool	構建速度	重新構建速度	生產環境	品質(quality)
(none)	+++	+++	yes	打包後的程式碼
eval	+++	+++	no	生成後的程式碼
cheap-eval-source-map	+	++	no	轉換過的程式碼（僅限行）
cheap-module-eval-source-map	o	++	no	原始原始碼（僅限行）
eval-source-map	--	+	no	原始原始碼
cheap-source-map	+	o	yes	轉換過的程式碼（僅限行）
cheap-module-source-map	o	-	yes	原始原始碼（僅限行）
inline-cheap-source-map	+	o	no	轉換過的程式碼（僅限行）
inline-cheap-module-source-map	o	-	no	原始原始碼（僅限行）
source-map	--	--	yes	原始原始碼
inline-source-map	--	--	no	原始原始碼
hidden-source-map	--	--	yes	原始原始碼
nosources-source-map	--	--	yes	無原始碼內容

再次執行專案：

$ npm run start
複製程式碼

可以看到報錯依舊，但是在開發工具的控制檯上，檢視錯誤提示，可以根據提示清楚的找到我們寫的程式碼所在位置.

測試之後請將錯誤的 return ele 改為正確的 return element

為專案新增模組解析規則

此時，開發環境已經配置的差不多了，但是我現在想給 div 加一個樣式，想讓文字程式設計藍色，居中顯示，那麼此時就需要用的 loader 了，因為 webpack 預設無法解析 css，所以就需要我們自己配置了

配置 css 模組解析

安裝所需外掛：

$ npm install css-loader style-loader --save-dev
複製程式碼

css-loader 用來解析 css 檔案，而 style-loader 則用來將解析好的 css 內容注入到 JavaScript 裡。由於 loader 執行順序是從下到上，所以要將 css-loader 寫在下面。

使用：

webpack.config.js

...
module.exports = {
...
plugins: [...],
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
// 還可以給 loader 新增一些配置
{
loader: 'css-loader',
options: {
// 開啟 sourceMop
sourceMap: true
}
}
]
}
]
}
}
複製程式碼

在 src 目錄下新建一個 css 檔案

src/index.css：

div {
color: blue;
text-align: center;
}
複製程式碼

src/index.js

require('./index.css');

...
複製程式碼

重新執行專案：

$ npm run start
複製程式碼

可以看到瀏覽器上此時文字顏色已經變藍，並且居中顯示。

配置其他模組解析

除了 css 之外，其他檔案在 webpack 也都被認為是一個模組，也都需要對應的 loader 進行解析。下面就不一一演示了，先把程式碼貼出來看一看。

下載所有需要的外掛：

$ npm install file-loader csv-loader xml-loader html-loader markdown-loader --save-dev
複製程式碼

webpack.config.js

...
module.exports = {
...
plugins: [...],
module: {
rules: [
...
// 解析圖片資源
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
// 解析 字型
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
},
// 解析資料資源
{
test: /\.(csv|tsv)$/,
use: [
'csv-loader'
]
},
// 解析資料資源
{
test: /\.xml$/,
use: [
'xml-loader'
]
},
// 解析 MakeDown 檔案
{
test: /\.md$/,
use: [
"html-loader", 
"markdown-loader"
]
}
]
}
}
複製程式碼

這些配置基本上可以滿足常規開發中使用到的各種模組資源，不過在開發過程中可能還會需要用到 less、scss 等 css 預編譯語言，還需要使用 less-loader，sass-loader 進行配置。更多配置用法這裡也無法一一詳述，等大家用到的時候再去查閱對應文件即可。

使用 babel 進行配置

目前專案可以正常執行，但是現在 ES6、7 語法已經出來了，但是瀏覽器中還不能完全識別，所以我們需要 babel 講 js 檔案轉換成瀏覽器可以識別的 ES5 語法。

安裝 bable-loader 外掛

$ npm install babel-core babel-loader --save-dev
複製程式碼

babel 還能進行配置，可以像上面那樣直接在 loader 中進行配置，也可以在根目錄下建立 .babelrc 檔案配置，專案執行會自動從此檔案中讀取

使用 babel-loader：

webpack.config.js

...
module.exports = {
...
plugins: [...],
module: {
rules: [
{
test: /\.js/,
include: path.resolve(__dirname, 'src'),
loader: 'babel-loader?cacheDirectory',
},
]
}
}
複製程式碼

babel 的 cacheDirectory 屬性

預設值為 false。當有設定時，指定的目錄將用來快取 loader 的執行結果。之後的 webpack 構建，將會嘗試讀取快取，來避免在每次執行時，可能產生的、高效能消耗的 Babel 重新編譯過程。如果設定了一個空值 ( loader: 'babel-loader?cacheDirectory' ) 或者 true (loader: babel-loader?cacheDirectory=true) ，loader 將使用預設的快取目錄 node_modules/.cache/babel-loader ，如果在任何根目錄下都沒有找到 node_modules 目錄，將會降級回退到作業系統預設的臨時檔案目錄。

使用 cacheDirectory 選項，將 babel-loader 提速至少兩倍。

babel 的 Presets 配置

presets 屬性告訴 Babel 要轉換的原始碼使用了哪些新的語法特性，一個 Presets 對一組新語法特性提供支援，多個 Presets 可以疊加。 Presets 其實是一組 Plugins 的集合，每一個 Plugin 完成一個新語法的轉換工作。Presets 是按照 ECMAScript 草案來組織的，通常可以分為以下三大類：

已經被寫入 ECMAScript 標準裡的特性，由於之前每年都有新特性被加入到標準裡，所以又可細分為：
- es2015 包含在2015里加入的新特性；
- es2016 包含在2016里加入的新特性；
- es2017 包含在2017里加入的新特性；
- env 包含當前所有 ECMAScript 標準裡的最新特性。
被社群提出來的但還未被寫入 ECMAScript 標準裡特性，這其中又分為以下四種：
- stage0 只是一個美好激進的想法，有 Babel 外掛實現了對這些特性的支援，但是不確定是否會被定為標準；
- stage1 值得被納入標準的特性；
- stage2 該特性規範已經被起草，將會被納入標準裡；
- stage3 該特性規範已經定稿，各大瀏覽器廠商和 Node.js 社群開始著手實現；
- stage4 在接下來的一年將會加入到標準裡去。
為了支援一些特定應用場景下的語法，和 ECMAScript 標準沒有關係，例如 babel-preset-react 是為了支援 React 開發中的 JSX 語法。

babel 的 Plugins 配置

plugins 屬性告訴 Babel 要使用哪些外掛，外掛可以控制如何轉換程式碼。

安裝專案中需要使用的 Presets 外掛

$ npm install babel-preset-env babel-preset-stage-0 --save-dev
複製程式碼

安裝專案中需要的 babel Plugin

$ npm install babel-plugin-transform-class-properties babel-plugin-transform-runtime babel-runtime --save-dev
複製程式碼

babel-plugin-transform-class-properties 可以在專案中使用新增的 class 屬性用法
babel-plugin-transform-runtime 由於 babel 轉換檔案時會在每個檔案中都寫入輔助程式碼，使用此外掛可以直接使用 babel-runtime 中的程式碼進行轉換，避免程式碼冗餘。所以 babel-plugin-transform-runtime 和 babel-runtime 成對使用

.babelrc

{
"presets": ["env", "stage-0"],
"plugins": [
"transform-runtime",
"transform-class-properties"
]
}
複製程式碼

配置完成，此時就可以在專案中自由的使用 ES6 等新增 js 語法了。

使用 friendly-errors-webpack-plugin

有時候專案提示錯誤，可能是編譯錯誤，可能是 ESLint 提示錯誤等等，我們希望錯誤提示能夠友好一些，就可以使用這個外掛

外掛安裝：

npm install friendly-errors-webpack-plugin --save-dev
複製程式碼

使用：

webpack.config.js

...
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');

module.exports = {
...,
plugins: [
...
new FriendlyErrorsWebpackPlugin()
]
}
複製程式碼

更多配置請參考外掛文件

配置模組如何解析 resolve

開發的時候我們經常會需要引入自己寫的檔案模組，可能會需要按照路徑一級一級的找，這個時候我們就可以配置 resolve，為一些常用的路徑設定別名

配置：

webpack.config.js

...
module.exports = {
...
plugins: [...],
modules: {...},
resolve: {
alias: {
src: path.resolve(__dirname, 'src')
}
}
}
複製程式碼

使用：無論在任何檔案裡，引入 src 目錄下的 index.css 檔案時，路徑都可以按照下面的這個引入路徑來寫

index.js

- require('./index.css');
+ import 'src/index.css';
複製程式碼

重新執行專案，發現專案正常啟動，index.css 中的樣式也正常生效

至此，一個簡單的開發環境的 Webpack 腳手架搭建完成了。

最終的專案結構以及檔案程式碼

project

webpack-dev-demo
|- package.json
|- /public
|- index.html
|- /src
|- index.js
|- index.css
複製程式碼

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Webpack 開發環境配置</title>
</head>
<body>

</body>
</html>
複製程式碼

src/index.js

import 'src/index.css';

function component() {
var element = document.createElement('div');

element.innerHTML = 'Hello World';

return element;
}

document.body.appendChild(component());
複製程式碼

src/index.css

div {
color: blue;
text-align: center;
}
複製程式碼

.babelrc

{
"presets": ["env", "stage-0"],
"plugins": [
"transform-runtime",
"transform-class-properties"
]
}
複製程式碼

webpack.config.js

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
mode: 'development',
devtool: 'inline-source-map',
entry: './src/index.js',
output: {
filename: '[name]-[hash:8].js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
// 必須配置的選項，服務啟動的目錄，預設為跟目錄
contentBase: './dist',
// 使用熱載入時需要設定為 true
hot: true,
/**
* 下面為可選配置
*/
// 指定使用一個 host。預設是 localhost
host: 'localhost',
// 埠號
port: 8000,
// 當使用 HTML5 History API 時，任意的 404 響應都可能需要被替代為 index.html。通過設定為 true 進行啟用
historyApiFallback: {
disableDotRule: true
},
// 出現錯誤時是否在瀏覽器上出現遮罩層提示
overlay: true,
/**
* 在 dev-server 的兩種不同模式之間切換
*預設情況下，應用程式啟用內聯模式 inline
*設定為 false，使用 iframe 模式，它在通知欄下面使用 <iframe> 標籤，包含了關於構建的訊息
*/
inline: true,
/**
* 統計資訊，列舉型別，可供選項：
*"errors-only": 只在發生錯誤時輸出
*"minimal": 只在發生錯誤或有新的編譯時輸出
*"none": 沒有輸出
*"normal": 標準輸出
*"verbose": 全部輸出
*/
stats: "errors-only",
// 設定介面請求代理，更多 proxy 配置請參考 https://github.com/chimurai/http-proxy-middleware#options
proxy: {
'/api/': {
changeOrigin: true,
// 目標地址
target: 'http://localhost:3000',
// 重寫路徑
pathRewrite: {
'^/api/': '/'
}
}
}
},
plugins: [
new HTMLWebpackPlugin({
// 用於生成的HTML文件的標題
title: 'Webpack 開發環境配置',
// webpack 生成模板的路徑
template: './public/index.html'
}),
// 用法：new CleanWebpackPlugin(paths [, {options}])
new CleanWebpackPlugin(['dist']),
// 新增 NamedModulesPlugin，以便更容易檢視要修補(patch)的依賴，由於設定了 mode: 'development'，所以這個外掛可以省略
// new webpack.NamedModulesPlugin(),
// 進行模組熱替換
new webpack.HotModuleReplacementPlugin()
],
module: {
rules: [
{
test: /\.js/,
include: path.resolve(__dirname, 'src'),
loader: 'babel-loader?cacheDirectory'
},
// 解析 css
{
test: /\.css$/,
include: path.resolve(__dirname, 'src'),
use: [
'style-loader',
// 還可以給 loader 新增一些配置
{
loader: 'css-loader',
options: {
// 開啟 sourceMop
sourceMap: true
}
}
]
},
// 解析圖片資源
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
// 解析 字型
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
},
// 解析資料資源
{
test: /\.(csv|tsv)$/,
use: [
'csv-loader'
]
},
// 解析資料資源
{
test: /\.xml$/,
use: [
'xml-loader'
]
},
// 解析 MakeDown 檔案
{
test: /\.md$/,
use: [
"html-loader", 
"markdown-loader"
]
}
]
},
resolve: {
alias: {
src: path.resolve(__dirname, 'src')
}
}
}
複製程式碼

package.json

{
"name": "webpack-dev-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
"start": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-0": "^6.24.1",
"babel-runtime": "^6.26.0",
"clean-webpack-plugin": "^1.0.1",
"css-loader": "^2.1.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"
}
}
複製程式碼

原始碼地址

本文 Demo 地址

總結

本文篇幅較長，感謝各位的耐心閱讀。本文主要從入口、輸出、外掛（Plugins）、模組處理（Module）、loader、解析（resolve）等 6 個配置項著手配置了一個基本的 webpack 開發環境腳手架。本文主要講解的內容為：

loader 的作用以及如何配置使用
babel 的作用以及配置項
各個外掛的功能以及適用場景
解析能夠為開發帶來的效率

本文內容對於已經熟練掌握 Webpack 的朋友來說，可能有些淺薄，但是著重講解了各個配置項的功能以及配置後對專案產生的效果。對於準備入門 webpack 的朋友應該會有一定的幫助。

從零開始搭建一個 Webpack 開發環境配置（附 Demo）

前言

環境搭建

專案結構

建立配置檔案

配置入口和輸出

執行 webpack

html-webpack-plugin 外掛的使用

clean-webpack-plugin 外掛的使用

配置 Http 服務並進行實時預覽

模式配置

啟用除錯工具 Source Map

為專案新增模組解析規則

配置 css 模組解析

配置其他模組解析

使用 babel 進行配置

babel 的 cacheDirectory 屬性

babel 的 Presets 配置

babel 的 Plugins 配置

使用 friendly-errors-webpack-plugin

配置模組如何解析 resolve

至此，一個簡單的開發環境的 Webpack 腳手架搭建完成了。

最終的專案結構以及檔案程式碼

原始碼地址

總結

您可能也會喜歡…