柚子快報邀請碼778899分享：前端 webpack進階(一)

http://yzkb.51969.com/

一、起步

1、基本安裝

首先我們創(chuàng)建一個目錄，初始化 npm，然后 在本地安裝 webpack，接著安裝 webpack-cli（此工具用于在命令行中運行 webpack）：

mkdir webpack-demo

cd webpack-demo

npm init -y

npm install webpack webpack-cli --save-dev

現(xiàn)在，我們將創(chuàng)建以下目錄結構、文件和內容：

project

webpack-demo

|- package.json

+ |- index.html

+ |- /src

+ |- index.js

src/index.js

function component() {

const element = document.createElement('div');

// https://www.lodashjs.com/

// lodash（目前通過一個 script 引入）對于執(zhí)行這一行是必需的

element.innerHTML = _.join(['Hello', 'webpack'], ' ');

return element;

}

document.body.appendChild(component());

index.html

我們還需要調整 package.json 文件，以便確保我們安裝包是 private(私有的)，并且移除 main 入口。這可以防止意外發(fā)布你的代碼。

package.json

{

"name": "webpack-demo",

"version": "1.0.0",

"description": "",

- "main": "index.js",

+ "private": true,

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"keywords": [],

"author": "",

"license": "ISC",

"devDependencies": {

"webpack": "^5.4.0",

"webpack-cli": "^4.2.0"

}

}

啟動項目

npx http-server

在此示例中，

-

+

開始打包

$ npx webpack

3、模塊

ES2015 中的 import 和 export 語句已經(jīng)被標準化。雖然大多數(shù)瀏覽器還無法支持它們，但是 webpack 卻能夠提供開箱即用般的支持。

事實上，webpack 在幕后會將代碼“轉譯”，以便舊版本瀏覽器可以執(zhí)行。如果你檢查 dist/main.js，你可以看到 webpack 具體如何實現(xiàn)，這是獨創(chuàng)精巧的設計！除了 import 和 export，webpack 還能夠很好地支持多種其他模塊語法，更多信息請查看 模塊 API。

注意，webpack 不會更改代碼中除 import 和 export 語句以外的部分。如果你在使用其它 ES2015 特性，請確保你在 webpack loader 系統(tǒng) 中使用了 Babel

請查看編譯后的代碼。

4、使用一個配置文件

project

webpack-demo

|- package.json

+ |- webpack.config.js

|- /dist

|- index.html

|- /src

|- index.js

webpack.config.js

const path = require('path');

module.exports = {

entry: './src/index.js',

output: {

filename: 'main.js',

path: path.resolve(__dirname, 'dist'),

},

};

現(xiàn)在，讓我們通過新的配置文件再次執(zhí)行構建：

5、npm scripts

package.json

{

"name": "webpack-demo",

"version": "1.0.0",

"description": "",

"private": true,

"scripts": {

- "test": "echo \"Error: no test specified\" && exit 1"

+ "test": "echo \"Error: no test specified\" && exit 1",

+ "build": "webpack"

},

"keywords": [],

"author": "",

"license": "ISC",

"devDependencies": {

"webpack": "^5.4.0",

"webpack-cli": "^4.2.0"

},

"dependencies": {

"lodash": "^4.17.20"

}

}

現(xiàn)在運行以下命令：

$ npm run build

二、管理資源

1、設置

在開始之前，讓我們對項目做一個小的修改：

dist/index.html

-

+

-

+

webpack.config.js

const path = require('path');

module.exports = {

entry: './src/index.js',

output: {

- filename: 'main.js',

+ filename: 'bundle.js',

path: path.resolve(__dirname, 'dist'),

},

};

2、加載 CSS

為了在 JavaScript 模塊中 import 一個 CSS 文件，你需要安裝 style-loader 和 css-loader，并在 module 配置 中添加這些 loader：

npm install --save-dev style-loader css-loader

webpack.config.js

const path = require('path');

module.exports = {

entry: './src/index.js',

output: {

filename: 'bundle.js',

path: path.resolve(__dirname, 'dist'),

},

+ module: {

+ rules: [

+ {

+ test: /\.css$/i,

+ use: ['style-loader', 'css-loader'],

+ },

+ ],

+ },

};

我們嘗試一下，通過在項目中添加一個新的 style.css 文件，并將其 import 到我們的 index.js 中：

project

webpack-demo

|- package.json

|- webpack.config.js

|- /dist

|- bundle.js

|- index.html

|- /src

+ |- style.css

|- index.js

|- /node_modules

src/style.css

.hello {

color: red;

}

src/index.js

import _ from 'lodash';

+import './style.css';

function component() {

const element = document.createElement('div');

// Lodash, now imported by this script

element.innerHTML = _.join(['Hello', 'webpack'], ' ');

+ element.classList.add('hello');

return element;

}

document.body.appendChild(component());

現(xiàn)在運行 build 命令：

$ npm run build

3、加載 images 圖像

假如，現(xiàn)在我們正在下載 CSS，但是像 background 和 icon 這樣的圖像，要如何處理呢？在 webpack 5 中，可以使用內置的 Asset Modules，我們可以輕松地將這些內容混入我們的系統(tǒng)中：

webpack.config.js

const path = require('path');

module.exports = {

entry: './src/index.js',

output: {

filename: 'bundle.js',

path: path.resolve(__dirname, 'dist'),

},

module: {

rules: [

{

test: /\.css$/i,

use: ['style-loader', 'css-loader'],

},

+ {

+ test: /\.(png|svg|jpg|jpeg|gif)$/i,

+ type: 'asset/resource',

+ },

],

},

};

我們向項目添加一個圖像，然后看它是如何工作的，你可以使用任何你喜歡的圖像：

project

webpack-demo

|- package.json

|- webpack.config.js

|- /dist

|- bundle.js

|- index.html

|- /src

+ |- icon.png

|- style.css

|- index.js

|- /node_modules

src/index.js

import _ from 'lodash';

import './style.css';

+import Icon from './icon.png';

function component() {

const element = document.createElement('div');

// Lodash, now imported by this script

element.innerHTML = _.join(['Hello', 'webpack'], ' ');

element.classList.add('hello');

+ // 將圖像添加到我們已經(jīng)存在的 div 中。

+ const myIcon = new Image();

+ myIcon.src = Icon;

+

+ element.appendChild(myIcon);

+

return element;

}

document.body.appendChild(component());

src/style.css

.hello {

color: red;

+ background: url('./icon.png');

}

重新構建并再次打開 index.html 文件：

$ npm run build

4、加載 fonts 字體

那么，像字體這樣的其他資源如何處理呢？使用 Asset Modules 可以接收并加載任何文件，然后將其輸出到構建目錄。這就是說，我們可以將它們用于任何類型的文件，也包括字體。讓我們更新 webpack.config.js 來處理字體文件：

webpack.config.js

const path = require('path');

module.exports = {

entry: './src/index.js',

output: {

filename: 'bundle.js',

path: path.resolve(__dirname, 'dist'),

},

module: {

rules: [

{

test: /\.css$/i,

use: ['style-loader', 'css-loader'],

},

{

test: /\.(png|svg|jpg|jpeg|gif)$/i,

type: 'asset/resource',

},

+ {

+ test: /\.(woff|woff2|eot|ttf|otf)$/i,

+ type: 'asset/resource',

+ },

],

},

};

在項目中添加一些字體文件：

project

webpack-demo

|- package.json

|- webpack.config.js

|- /dist

|- bundle.js

|- index.html

|- /src

+ |- my-font.woff

+ |- my-font.woff2

|- icon.png

|- style.css

|- index.js

|- /node_modules

配置好 loader 并將字體文件放在合適的位置后，你可以通過一個 @font-face 聲明將其混合。本地的 url(...) 指令會被 webpack 獲取處理，就像它處理圖片一樣：

src/style.css

+@font-face {

+ font-family: 'MyFont';

+ src: url('./my-font.woff2') format('woff2'),

+ url('./my-font.woff') format('woff');

+ font-weight: 600;

+ font-style: normal;

+}

+

.hello {

color: red;

+ font-family: 'MyFont';

background: url('./icon.png');

}

現(xiàn)在，讓我們重新構建，然后看下 webpack 是否處理了我們的字體：

$ npm run build

三、管理輸出

到目前為止，我們都是在 index.html 文件中手動引入所有資源，然而隨著應用程序增長，并且一旦開始 在文件名中使用 hash 并輸出 多個 bundle，如果繼續(xù)手動管理 index.html 文件，就會變得困難起來。然而，通過一些插件可以使這個過程更容易管控。

1、預先準備

首先，調整一下我們的項目：

project

webpack-demo

|- package.json

|- webpack.config.js

|- /dist

|- /src

|- index.js

+ |- print.js

|- /node_modules

我們在 src/print.js 文件中添加一些邏輯：

src/print.js

export default function printMe() {

console.log('I get called from print.js!');

}

并且在 src/index.js 文件中使用這個函數(shù)：

src/index.js

import _ from 'lodash';

+import printMe from './print.js';

function component() {

const element = document.createElement('div');

+ const btn = document.createElement('button');

element.innerHTML = _.join(['Hello', 'webpack'], ' ');

+ btn.innerHTML = 'Click me and check the console!';

+ btn.onclick = printMe;

+

+ element.appendChild(btn);

+

return element;

}

document.body.appendChild(component());

還要更新 dist/index.html 文件，來為 webpack 分離入口做好準備：

dist/index.html

-

+

+

-

+

現(xiàn)在調整配置。我們將在 entry 添加 src/print.js 作為新的入口起點（print），然后修改 output，以便根據(jù)入口起點定義的名稱，動態(tài)地產(chǎn)生 bundle 名稱：

webpack.config.js

const path = require('path');

module.exports = {

- entry: './src/index.js',

+ entry: {

+ index: './src/index.js',

+ print: './src/print.js',

+ },

output: {

- filename: 'bundle.js',

+ filename: '[name].bundle.js',

path: path.resolve(__dirname, 'dist'),

},

};

執(zhí)行 npm run build

我們可以看到，webpack 生成 print.bundle.js 和 index.bundle.js 文件，這也和我們在 index.html 文件中指定的文件名稱相對應。如果你在瀏覽器中打開 index.html，就可以看到在點擊按鈕時會發(fā)生什么。

但是，如果我們更改了我們的一個入口起點的名稱，甚至添加了一個新的入口，會發(fā)生什么？會在構建時重新命名生成的 bundle，但是我們的 index.html 文件仍然引用舊的名稱。讓我們用 HtmlWebpackPlugin 來解決這個問題。

2、設置 HtmlWebpackPlugin

首先安裝插件，并且調整 webpack.config.js 文件：

npm install --save-dev html-webpack-plugin

webpack.config.js

const path = require('path');

+const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

entry: {

index: './src/index.js',

print: './src/print.js',

},

+ plugins: [

+ new HtmlWebpackPlugin({

+ title: '管理輸出',

+ }),

+ ],

output: {

filename: '[name].bundle.js',

path: path.resolve(__dirname, 'dist'),

},

};

在我們構建之前，你應該了解，雖然在 dist/ 文件夾我們已經(jīng)有了 index.html 這個文件，然而 HtmlWebpackPlugin 還是會默認生成它自己的 index.html 文件。也就是說，它會用新生成的 index.html 文件，替換我們的原有文件。

如果在代碼編輯器中打開 index.html，你會看到 HtmlWebpackPlugin 創(chuàng)建了一個全新的文件，所有的 bundle 會自動添加到 html 中。

3、清理 /dist 文件夾

你可能已經(jīng)注意到，由于遺留了之前的指南和代碼示例，我們的 /dist 文件夾顯得相當雜亂。webpack 將生成文件并放置在 /dist 文件夾中，但是它不會追蹤哪些文件是實際在項目中用到的。

通常比較推薦的做法是，在每次構建前清理 /dist 文件夾，這樣只會生成用到的文件。讓我們實現(xiàn)這個需求。

clean-webpack-plugin 是一個流行的清理插件，安裝和配置它。

npm install --save-dev clean-webpack-plugin

webpack.config.js

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

+const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {

entry: {

index: './src/index.js',

print: './src/print.js',

},

plugins: [

+ new CleanWebpackPlugin(),

new HtmlWebpackPlugin({

title: 'Output Management',

}),

],

output: {

filename: '[name].bundle.js',

path: path.resolve(__dirname, 'dist'),

},

};

現(xiàn)在，執(zhí)行 npm run build，檢查 /dist 文件夾。如果一切順利，現(xiàn)在只會看到構建后生成的文件，而沒有舊文件！

4、manifest

你可能會很感興趣，webpack 和 webpack 插件似乎“知道”應該生成哪些文件。答案是，webpack 通過 manifest，可以追蹤所有模塊到輸出 bundle 之間的映射。如果你想要知道如何以其他方式來控制 webpack 輸出，了解 manifest 是個好的開始。

通過 WebpackManifestPlugin 插件，可以將 manifest 數(shù)據(jù)提取為一個容易使用的 json 文件。

首先安裝 webpack-manifest-plugin：

npm install webpack-manifest-plugin --save-dev

webpack.config.js

const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

+const { WebpackManifestPlugin } = require('webpack-manifest-plugin')

module.exports = {

mode: 'development',

entry: {

index: './src/index.js',

print: './src/print.js',

},

plugins: [

new CleanWebpackPlugin(),

new HtmlWebpackPlugin({

title: '管理輸出',

}),

+ new WebpackManifestPlugin()

],

output: {

filename: '[name].bundle.js',

path: path.resolve(__dirname, 'dist'),

}

};

現(xiàn)在，執(zhí)行 npm run build，會發(fā)現(xiàn) dist/manifest.json文件，文件內容如下：

{

"index.js": "autoindex.bundle.js",

"print.js": "autoprint.bundle.js",

"index.html": "autoindex.html"

}

四、開發(fā)環(huán)境

如果你一直跟隨之前的指南，應該對一些 webpack 基礎知識有著很扎實的理解。在我們繼續(xù)之前，先來看看如何設置一個開發(fā)環(huán)境，使我們的開發(fā)體驗變得更輕松一些。

在開始前，我們先將 mode 設置為 'development'，并將 title 設置為 'Development'。

webpack.config.js

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

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

module.exports = {

+ mode: 'development',

entry: {

index: './src/index.js',

print: './src/print.js',

},

plugins: [

new CleanWebpackPlugin(),

new HtmlWebpackPlugin({

- title: 'Output Management',

+ title: 'Development',

}),

],

output: {

filename: '[name].bundle.js',

path: path.resolve(__dirname, 'dist'),

},

};

1、使用 source-map

當 webpack 打包源代碼時，可能會很難追蹤到 error(錯誤) 和 warning(警告) 在源代碼中的原始位置。例如，如果將三個源文件（a.js, b.js 和 c.js）打包到一個 bundle（bundle.js）中，而其中一個源文件包含一個錯誤，那么堆棧跟蹤就會直接指向到 bundle.js。你可能需要準確地知道錯誤來自于哪個源文件，所以這種提示這通常不會提供太多幫助。

為了更容易地追蹤 error 和 warning，JavaScript 提供了 source maps 功能，可以將編譯后的代碼映射回原始源代碼。如果一個錯誤來自于 b.js，source map 就會明確的告訴你。

(1) devtool 配置說明表

devtoolperformanceproductionqualitycomment(none)build: fastest rebuild: fastestyesbundleRecommended choice for production builds with maximum performance.evalbuild: fast rebuild: fastestnogeneratedRecommended choice for development builds with maximum performance.eval-cheap-source-mapbuild: ok rebuild: fastnotransformedTradeoff choice for development builds.eval-cheap-module-source-mapbuild: slow rebuild: fastnooriginal linesTradeoff choice for development builds.eval-source-mapbuild: slowest rebuild: oknooriginalRecommended choice for development builds with high quality SourceMaps.cheap-source-mapbuild: ok rebuild: slownotransformedcheap-module-source-mapbuild: slow rebuild: slownooriginal linessource-mapbuild: slowest rebuild: slowestyesoriginalRecommended choice for production builds with high quality SourceMaps.inline-cheap-source-mapbuild: ok rebuild: slownotransformedinline-cheap-module-source-mapbuild: slow rebuild: slownooriginal linesinline-source-mapbuild: slowest rebuild: slowestnooriginalPossible choice when publishing a single fileeval-nosources-cheap-source-mapbuild: ok rebuild: fastnotransformedsource code not includedeval-nosources-cheap-module-source-mapbuild: slow rebuild: fastnooriginal linessource code not includedeval-nosources-source-mapbuild: slowest rebuild: oknooriginalsource code not includedinline-nosources-cheap-source-mapbuild: ok rebuild: slownotransformedsource code not includedinline-nosources-cheap-module-source-mapbuild: slow rebuild: slownooriginal linessource code not includedinline-nosources-source-mapbuild: slowest rebuild: slowestnooriginalsource code not includednosources-cheap-source-mapbuild: ok rebuild: slownotransformedsource code not includednosources-cheap-module-source-mapbuild: slow rebuild: slownooriginal linessource code not includednosources-source-mapbuild: slowest rebuild: slowestyesoriginalsource code not includedhidden-nosources-cheap-source-mapbuild: ok rebuild: slownotransformedno reference, source code not includedhidden-nosources-cheap-module-source-mapbuild: slow rebuild: slownooriginal linesno reference, source code not includedhidden-nosources-source-mapbuild: slowest rebuild: slowestyesoriginalno reference, source code not includedhidden-cheap-source-mapbuild: ok rebuild: slownotransformedno referencehidden-cheap-module-source-mapbuild: slow rebuild: slownooriginal linesno referencehidden-source-mapbuild: slowest rebuild: slowestyesoriginalno reference. Possible choice when using SourceMap only for error reporting purposes.

開發(fā)環(huán)境推薦配置 以下選項非常適合開發(fā)環(huán)境： eval - 每個模塊都使用 eval() 執(zhí)行，并且都有 //@ sourceURL。此選項會非常快地構建。主要缺點是，由于會映射到轉換后的代碼，而不是映射到原始代碼（沒有從 loader 中獲取 source map），所以不能正確的顯示行數(shù)。 eval-source-map - 每個模塊使用 eval() 執(zhí)行，并且 source map 轉換為 DataUrl 后添加到 eval() 中。初始化 source map 時比較慢，但是會在重新構建時提供比較快的速度，并且生成實際的文件。行數(shù)能夠正確映射，因為會映射到原始代碼中。它會生成用于開發(fā)環(huán)境的最佳品質的 source map。 eval-cheap-source-map - 類似 eval-source-map，每個模塊使用 eval() 執(zhí)行。這是 “cheap(低開銷)” 的 source map，因為它沒有生成列映射(column mapping)，只是映射行數(shù)。它會忽略源自 loader 的 source map，并且僅顯示轉譯后的代碼，就像 eval devtool。 eval-cheap-module-source-map - 類似 eval-cheap-source-map，并且，在這種情況下，源自 loader 的 source map 會得到更好的處理結果。然而，loader source map 會被簡化為每行一個映射(mapping)。 生產(chǎn)環(huán)境推薦配置 這些選項通常用于生產(chǎn)環(huán)境中： (none)（省略 devtool 選項） - 不生成 source map。這是一個不錯的選擇。 source-map - 整個 source map 作為一個單獨的文件生成。它為 bundle 添加了一個引用注釋，以便開發(fā)工具知道在哪里可以找到它。 hidden-source-map - 與 source-map 相同，但不會為 bundle 添加引用注釋。如果你只想 source map 映射那些源自錯誤報告的錯誤堆棧跟蹤信息，但不想為瀏覽器開發(fā)工具暴露你的 source map，這個選項會很有用。 nosources-source-map - 創(chuàng)建的 source map 不包含 sourcesContent(源代碼內容)。它可以用來映射客戶端上的堆棧跟蹤，而無須暴露所有的源代碼。你可以將 source map 文件部署到 web 服務器。

(2) 配置示例

webpack 倉庫中包含一個 顯示所有 devtool 變體效果的示例。這些例子或許會有助于你理解這些差異之處。

example.coffee

# Taken from http://coffeescript.org/

# Objects:

math =

root: Math.sqrt

square: square

cube: (x) -> x * square x

# Splats:

race = (winner, runners...) ->

print winner, runners

webpack.config.js

var path = require("path");

module.exports = [

"eval",

"eval-cheap-source-map",

"eval-cheap-module-source-map",

"eval-source-map",

"cheap-source-map",

"cheap-module-source-map",

"inline-cheap-source-map",

"inline-cheap-module-source-map",

"source-map",

"inline-source-map",

"hidden-source-map",

"nosources-source-map"

].map(devtool => ({

mode: "development",

entry: {

bundle: "coffee-loader!./example.coffee"

},

output: {

path: path.join(__dirname, "dist"),

filename: `./[name]-${devtool}.js`

},

devtool,

optimization: {

runtimeChunk: true

}

}));

Generated source-maps

source-map.js and source-map.js.map

(self["webpackChunk"] = self["webpackChunk"] || []).push([[0],[

/* 0 */

/*!*********************************************************************!*\

!*** ../../node_modules/coffee-loader/dist/cjs.js!./example.coffee ***!

\*********************************************************************/

/*! unknown exports (runtime-defined) */

/*! runtime requirements: */

/***/ (() => {

// Taken from http://coffeescript.org/

// Objects:

var math, race;

math = {

root: Math.sqrt,

square: square,

cube: function(x) {

return x * square(x);

}

};

// Splats:

race = function(winner, ...runners) {

return print(winner, runners);

};

/***/ })

],

0,[[0,1]]]);

//# sourceMappingURL=bundle-source-map.js.map

{"version":3,"sources":["webpack:///./example.coffee"],"names":[],"mappings":";;;;;;;;;AAEU;;;AAAA;;AACV,OACE;EAAA,MAAQ,IAAI,CAAC,IAAb;EACA,QAAQ,MADR;EAEA,MAAQ,SAAC,CAAD;WAAO,IAAI,OAAO,CAAP;EAAX;AAFR,EAFQ;;;AAOV,OAAO,SAAC,MAAD,KAAS,OAAT;SACL,MAAM,MAAN,EAAc,OAAd;AADK","file":"./bundle-source-map.js","sourcesContent":["# Taken from http://coffeescript.org/\n\n# Objects:\nmath =\n root: Math.sqrt\n square: square\n cube: (x) -> x * square x\n\n# Splats:\nrace = (winner, runners...) ->\n print winner, runners\n"],"sourceRoot":""}

hidden-source-map.js and hidden-source-map.js.map

(self["webpackChunk"] = self["webpackChunk"] || []).push([[0],[

/* 0 */

/*!*********************************************************************!*\

!*** ../../node_modules/coffee-loader/dist/cjs.js!./example.coffee ***!

\*********************************************************************/

/*! unknown exports (runtime-defined) */

/*! runtime requirements: */

/***/ (() => {

// Taken from http://coffeescript.org/

// Objects:

var math, race;

math = {

root: Math.sqrt,

square: square,

cube: function(x) {

return x * square(x);

}

};

// Splats:

race = function(winner, ...runners) {

return print(winner, runners);

};

/***/ })

],

0,[[0,1]]]);

{"version":3,"sources":["webpack:///./example.coffee"],"names":[],"mappings":";;;;;;;;;AAEU;;;AAAA;;AACV,OACE;EAAA,MAAQ,IAAI,CAAC,IAAb;EACA,QAAQ,MADR;EAEA,MAAQ,SAAC,CAAD;WAAO,IAAI,OAAO,CAAP;EAAX;AAFR,EAFQ;;;AAOV,OAAO,SAAC,MAAD,KAAS,OAAT;SACL,MAAM,MAAN,EAAc,OAAd;AADK","file":"./bundle-hidden-source-map.js","sourcesContent":["# Taken from http://coffeescript.org/\n\n# Objects:\nmath =\n root: Math.sqrt\n square: square\n cube: (x) -> x * square x\n\n# Splats:\nrace = (winner, runners...) ->\n print winner, runners\n"],"sourceRoot":""}

inline-source-map.js

(self["webpackChunk"] = self["webpackChunk"] || []).push([[0],[

/* 0 */

/*!*********************************************************************!*\

!*** ../../node_modules/coffee-loader/dist/cjs.js!./example.coffee ***!

\*********************************************************************/

/*! unknown exports (runtime-defined) */

/*! runtime requirements: */

/***/ (() => {

// Taken from http://coffeescript.org/

// Objects:

var math, race;

math = {

root: Math.sqrt,

square: square,

cube: function(x) {

return x * square(x);

}

};

// Splats:

race = function(winner, ...runners) {

return print(winner, runners);

};

/***/ })

],

0,[[0,1]]]);

//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9leGFtcGxlLmNvZmZlZSJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7QUFFVTs7O0FBQUE7O0FBQ1YsT0FDRTtFQUFBLE1BQVEsSUFBSSxDQUFDLElBQWI7RUFDQSxRQUFRLE1BRFI7RUFFQSxNQUFRLFNBQUMsQ0FBRDtXQUFPLElBQUksT0FBTyxDQUFQO0VBQVg7QUFGUixFQUZROzs7QUFPVixPQUFPLFNBQUMsTUFBRCxLQUFTLE9BQVQ7U0FDTCxNQUFNLE1BQU4sRUFBYyxPQUFkO0FBREsiLCJmaWxlIjoiLi9idW5kbGUtaW5saW5lLXNvdXJjZS1tYXAuanMiLCJzb3VyY2VzQ29udGVudCI6WyIjIFRha2VuIGZyb20gaHR0cDovL2NvZmZlZXNjcmlwdC5vcmcvXG5cbiMgT2JqZWN0czpcbm1hdGggPVxuICByb290OiAgIE1hdGguc3FydFxuICBzcXVhcmU6IHNxdWFyZVxuICBjdWJlOiAgICh4KSAtPiB4ICogc3F1YXJlIHhcblxuIyBTcGxhdHM6XG5yYWNlID0gKHdpbm5lciwgcnVubmVycy4uLikgLT5cbiAgcHJpbnQgd2lubmVyLCBydW5uZXJzXG4iXSwic291cmNlUm9vdCI6IiJ9

nosources-source-map.js.map

{"version":3,"sources":["webpack:///./example.coffee"],"names":[],"mappings":";;;;;;;;;AAEU;;;AAAA;;AACV,OACE;EAAA,MAAQ,IAAI,CAAC,IAAb;EACA,QAAQ,MADR;EAEA,MAAQ,SAAC,CAAD;WAAO,IAAI,OAAO,CAAP;EAAX;AAFR,EAFQ;;;AAOV,OAAO,SAAC,MAAD,KAAS,OAAT;SACL,MAAM,MAAN,EAAc,OAAd;AADK","file":"./bundle-nosources-source-map.js","sourceRoot":""}

eval-source-map.js

/*

* ATTENTION: An "eval-source-map" devtool has been used.

* This devtool is neither made for production nor for readable output files.

* It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.

* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)

* or disable the default devtool with "devtool: false".

* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).

*/

(self["webpackChunk"] = self["webpackChunk"] || []).push([[0],[

/* 0 */

/*!*********************************************************************!*\

!*** ../../node_modules/coffee-loader/dist/cjs.js!./example.coffee ***!

\*********************************************************************/

/*! unknown exports (runtime-defined) */

/*! runtime requirements: */

/***/ (() => {

eval("http:// Taken from http://coffeescript.org/\n\n// Objects:\nvar math, race;\n\nmath = {\n root: Math.sqrt,\n square: square,\n cube: function(x) {\n return x * square(x);\n }\n};\n\n// Splats:\nrace = function(winner, ...runners) {\n return print(winner, runners);\n};\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vLy4vZXhhbXBsZS5jb2ZmZWU/MjQxNiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFVTs7O0FBQUEsSUFBQSxJQUFBLEVBQUE7O0FBQ1YsSUFBQSxHQUNFO0VBQUEsSUFBQSxFQUFRLElBQUksQ0FBQyxJQUFiO0VBQ0EsTUFBQSxFQUFRLE1BRFI7RUFFQSxJQUFBLEVBQVEsUUFBQSxDQUFDLENBQUQsQ0FBQTtXQUFPLENBQUEsR0FBSSxNQUFBLENBQU8sQ0FBUDtFQUFYO0FBRlIsRUFGUTs7O0FBT1YsSUFBQSxHQUFPLFFBQUEsQ0FBQyxNQUFELEVBQUEsR0FBUyxPQUFULENBQUE7U0FDTCxLQUFBLENBQU0sTUFBTixFQUFjLE9BQWQ7QUFESyIsInNvdXJjZXNDb250ZW50IjpbIiMgVGFrZW4gZnJvbSBodHRwOi8vY29mZmVlc2NyaXB0Lm9yZy9cblxuIyBPYmplY3RzOlxubWF0aCA9XG4gIHJvb3Q6ICAgTWF0aC5zcXJ0XG4gIHNxdWFyZTogc3F1YXJlXG4gIGN1YmU6ICAgKHgpIC0+IHggKiBzcXVhcmUgeFxuXG4jIFNwbGF0czpcbnJhY2UgPSAod2lubmVyLCBydW5uZXJzLi4uKSAtPlxuICBwcmludCB3aW5uZXIsIHJ1bm5lcnNcbiJdLCJmaWxlIjoiMC5qcyJ9\n//# sourceURL=webpack-internal:///0\n");

/***/ })

],

0,[[0,1]]]);

eval.js

/*

* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").

* This devtool is neither made for production nor for readable output files.

* It uses "eval()" calls to create a separate source file in the browser devtools.

* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)

* or disable the default devtool with "devtool: false".

* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).

*/

(self["webpackChunk"] = self["webpackChunk"] || []).push([[0],[

/* 0 */

/*!*********************************************************************!*\

!*** ../../node_modules/coffee-loader/dist/cjs.js!./example.coffee ***!

\*********************************************************************/

/*! unknown exports (runtime-defined) */

/*! runtime requirements: */

/***/ (() => {

eval("http:// Taken from http://coffeescript.org/\n\n// Objects:\nvar math, race;\n\nmath = {\n root: Math.sqrt,\n square: square,\n cube: function(x) {\n return x * square(x);\n }\n};\n\n// Splats:\nrace = function(winner, ...runners) {\n return print(winner, runners);\n};\n\n\n//# sourceURL=webpack:///./example.coffee?../../node_modules/coffee-loader/dist/cjs.js");

/***/ })

],

0,[[0,1]]]);

eval-cheap-source-map.js

/*

* ATTENTION: An "eval-source-map" devtool has been used.

* This devtool is neither made for production nor for readable output files.

* It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.

* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)

* or disable the default devtool with "devtool: false".

* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).

*/

(self["webpackChunk"] = self["webpackChunk"] || []).push([[0],[

/* 0 */

/*!*********************************************************************!*\

!*** ../../node_modules/coffee-loader/dist/cjs.js!./example.coffee ***!

\*********************************************************************/

/*! unknown exports (runtime-defined) */

/*! runtime requirements: */

/***/ (() => {

eval("http:// Taken from http://coffeescript.org/\n\n// Objects:\nvar math, race;\n\nmath = {\n root: Math.sqrt,\n square: square,\n cube: function(x) {\n return x * square(x);\n }\n};\n\n// Splats:\nrace = function(winner, ...runners) {\n return print(winner, runners);\n};\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMC5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL2V4YW1wbGUuY29mZmVlP2VlNTgiXSwic291cmNlc0NvbnRlbnQiOlsiLy8gVGFrZW4gZnJvbSBodHRwOi8vY29mZmVlc2NyaXB0Lm9yZy9cblxuLy8gT2JqZWN0czpcbnZhciBtYXRoLCByYWNlO1xuXG5tYXRoID0ge1xuICByb290OiBNYXRoLnNxcnQsXG4gIHNxdWFyZTogc3F1YXJlLFxuICBjdWJlOiBmdW5jdGlvbih4KSB7XG4gICAgcmV0dXJuIHggKiBzcXVhcmUoeCk7XG4gIH1cbn07XG5cbi8vIFNwbGF0czpcbnJhY2UgPSBmdW5jdGlvbih3aW5uZXIsIC4uLnJ1bm5lcnMpIHtcbiAgcmV0dXJuIHByaW50KHdpbm5lciwgcnVubmVycyk7XG59O1xuIl0sIm1hcHBpbmdzIjoiQUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOyIsInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///0\n");

/***/ })

],

0,[[0,1]]]);

eval-cheap-module-source-map.js

/*

* ATTENTION: An "eval-source-map" devtool has been used.

* This devtool is neither made for production nor for readable output files.

* It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.

* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)

* or disable the default devtool with "devtool: false".

* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).

*/

(self["webpackChunk"] = self["webpackChunk"] || []).push([[0],[

/* 0 */

/*!*********************************************************************!*\

!*** ../../node_modules/coffee-loader/dist/cjs.js!./example.coffee ***!

\*********************************************************************/

/*! unknown exports (runtime-defined) */

/*! runtime requirements: */

/***/ (() => {

eval("http:// Taken from http://coffeescript.org/\n\n// Objects:\nvar math, race;\n\nmath = {\n root: Math.sqrt,\n square: square,\n cube: function(x) {\n return x * square(x);\n }\n};\n\n// Splats:\nrace = function(winner, ...runners) {\n return print(winner, runners);\n};\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vLy4vZXhhbXBsZS5jb2ZmZWU/MjQxNiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFVTs7O0FBQUEsSUFBQSxJQUFBLEVBQUE7O0FBQ1YsSUFBQSxHQUNFO0VBQUEsSUFBQSxFQUFRLElBQUksQ0FBQyxJQUFiO0VBQ0EsTUFBQSxFQUFRLE1BRFI7RUFFQSxJQUFBLEVBQVEsUUFBQSxDQUFDLENBQUQsQ0FBQTtXQUFPLENBQUEsR0FBSSxNQUFBLENBQU8sQ0FBUDtFQUFYO0FBRlIsRUFGUTs7O0FBT1YsSUFBQSxHQUFPLFFBQUEsQ0FBQyxNQUFELEVBQUEsR0FBUyxPQUFULENBQUE7U0FDTCxLQUFBLENBQU0sTUFBTixFQUFjLE9BQWQ7QUFESyIsInNvdXJjZXNDb250ZW50IjpbIiMgVGFrZW4gZnJvbSBodHRwOi8vY29mZmVlc2NyaXB0Lm9yZy9cblxuIyBPYmplY3RzOlxubWF0aCA9XG4gIHJvb3Q6ICAgTWF0aC5zcXJ0XG4gIHNxdWFyZTogc3F1YXJlXG4gIGN1YmU6ICAgKHgpIC0+IHggKiBzcXVhcmUgeFxuXG4jIFNwbGF0czpcbnJhY2UgPSAod2lubmVyLCBydW5uZXJzLi4uKSAtPlxuICBwcmludCB3aW5uZXIsIHJ1bm5lcnNcbiJdLCJmaWxlIjoiMC5qcyJ9\n//# sourceURL=webpack-internal:///0\n");

/***/ })

],

0,[[0,1]]]);

cheap-module-source-map.js.map

{"version":3,"file":"./bundle-cheap-module-source-map.js","sources":["webpack:///./example.coffee"],"sourcesContent":["# Taken from http://coffeescript.org/\n\n# Objects:\nmath =\n root: Math.sqrt\n square: square\n cube: (x) -> x * square x\n\n# Splats:\nrace = (winner, runners...) ->\n print winner, runners\n"],"mappings":";;;;;;;;;AAEA;AACA;;AADA;AACA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAFA;AACA;;AAIA;AACA;AADA;AACA;AACA;A;;A","sourceRoot":""}

cheap-source-map.js.map

{"version":3,"file":"./bundle-cheap-source-map.js","sources":["webpack:///./example.coffee"],"sourcesContent":["http:// Taken from http://coffeescript.org/\n\n// Objects:\nvar math, race;\n\nmath = {\n root: Math.sqrt,\n square: square,\n cube: function(x) {\n return x * square(x);\n }\n};\n\n// Splats:\nrace = function(winner, ...runners) {\n return print(winner, runners);\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;A;;A","sourceRoot":""}

(3) 演練

對于本指南，我們將使用 inline-source-map 選項，這有助于解釋說明示例意圖（此配置僅用于示例，不要用于生產(chǎn)環(huán)境）：

webpack.config.js

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

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

module.exports = {

mode: 'development',

entry: {

index: './src/index.js',

print: './src/print.js',

},

+ devtool: 'inline-source-map',

plugins: [

new CleanWebpackPlugin(),

new HtmlWebpackPlugin({

title: 'Development',

}),

],

output: {

filename: '[name].bundle.js',

path: path.resolve(__dirname, 'dist'),

},

};

現(xiàn)在，讓我們來做一些調試，在 print.js 文件中生成一個錯誤：

src/print.js

export default function printMe() {

- console.log('I get called from print.js!');

+ cosnole.log('I get called from print.js!');

}

**運行 npm run build**

現(xiàn)在，在瀏覽器中打開生成的 index.html 文件，點擊按鈕，并且在控制臺查看顯示的錯誤。錯誤應該如下：

Uncaught ReferenceError: cosnole is not defined

at HTMLButtonElement.printMe (print.js:2)

我們可以看到，此錯誤包含有發(fā)生錯誤的文件（print.js）和行號（2）的引用。這是非常有幫助的，因為現(xiàn)在我們可以確切地知道，所要解決問題的位置。

2、選擇一個開發(fā)工具

在每次編譯代碼時，手動運行 npm run build 會顯得很麻煩。

webpack 提供幾種可選方式，幫助你在代碼發(fā)生變化后自動編譯代碼：

webpack’s Watch Modewebpack-dev-serverwebpack-dev-middleware

多數(shù)場景中，你可能需要使用 webpack-dev-server，但是不妨探討一下以上的所有選項。

(1) 使用 watch mode(觀察模式)

你可以指示 webpack “watch” 依賴圖中所有文件的更改。如果其中一個文件被更新，代碼將被重新編譯，所以你不必再去手動運行整個構建。

我們添加一個用于啟動 webpack watch mode 的 npm scripts：

package.json

{

"name": "webpack-demo",

"version": "1.0.0",

"description": "",

"private": true,

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

+ "watch": "webpack --watch",

"build": "webpack"

},

"keywords": [],

"author": "",

"license": "ISC",

"devDependencies": {

"clean-webpack-plugin": "^3.0.0",

"html-webpack-plugin": "^4.5.0",

"webpack": "^5.4.0",

"webpack-cli": "^4.2.0"

},

"dependencies": {

"lodash": "^4.17.20"

}

}

如果不想在 watch 觸發(fā)增量構建后刪除 index.html 文件，可以在 CleanWebpackPlugin 中配置 cleanStaleWebpackAssets 選項 來實現(xiàn)：

webpack.config.js

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

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

module.exports = {

mode: 'development',

entry: {

index: './src/index.js',

print: './src/print.js',

},

devtool: 'inline-source-map',

plugins: [

- new CleanWebpackPlugin(),

+ new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),

new HtmlWebpackPlugin({

title: 'Development',

}),

],

output: {

filename: '[name].bundle.js',

path: path.resolve(__dirname, 'dist'),

},

};

現(xiàn)在，你可以在命令行中運行 npm run watch，然后就會看到 webpack 是如何編譯代碼。 然而，你會發(fā)現(xiàn)并沒有退出命令行。這是因為此 script 當前還在 watch 你的文件。

現(xiàn)在，webpack 觀察文件的同時，先移除我們之前加入的錯誤：

src/print.js

export default function printMe() {

- cosnole.log('I get called from print.js!');

+ console.log('I get called from print.js!');

}

現(xiàn)在，保存文件并檢查 terminal(終端) 窗口。應該可以看到 webpack 自動地重新編譯修改后的模塊！

唯一的缺點是，為了看到修改后的實際效果，你需要刷新瀏覽器。如果能夠自動刷新瀏覽器就更好了，因此接下來我們會嘗試通過 webpack-dev-server 實現(xiàn)此功能。

(2) 使用 webpack-dev-server

webpack-dev-server 為你提供了一個簡單的 web server，并且具有 live reloading(實時重新加載) 功能。設置如下：

npm install --save-dev webpack-dev-server

修改配置文件，告知 dev server，從什么位置查找文件：

webpack.config.js

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

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

module.exports = {

mode: 'development',

entry: {

index: './src/index.js',

print: './src/print.js',

},

devtool: 'inline-source-map',

+ devServer: {

+ contentBase: './dist',

+ },

plugins: [

new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),

new HtmlWebpackPlugin({

title: 'Development',

}),

],

output: {

filename: '[name].bundle.js',

path: path.resolve(__dirname, 'dist'),

},

};

以上配置告知 webpack-dev-server，將 dist 目錄下的文件 serve 到 localhost:8080 下。

我們添加一個可以直接運行 dev server 的 script：

package.json

{

"name": "webpack-demo",

"version": "1.0.0",

"description": "",

"private": true,

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"watch": "webpack --watch",

+ "start": "webpack serve --open",

"build": "webpack"

},

"keywords": [],

"author": "",

"license": "ISC",

"devDependencies": {

"clean-webpack-plugin": "^3.0.0",

"html-webpack-plugin": "^4.5.0",

"webpack": "^5.4.0",

"webpack-cli": "^4.2.0",

"webpack-dev-server": "^3.11.0"

},

"dependencies": {

"lodash": "^4.17.20"

}

}

現(xiàn)在，在命令行中運行 npm start，我們會看到瀏覽器自動加載頁面。如果你更改任何源文件并保存它們，web server 將在編譯代碼后自動重新加載。試試看！

(3) 使用 webpack-dev-middleware

webpack-dev-middleware 是一個封裝器(wrapper)，它可以把 webpack 處理過的文件發(fā)送到一個 server。 webpack-dev-server 在內部使用了它，然而它也可以作為一個單獨的 package 來使用，以便根據(jù)需求進行更多自定義設置。下面是一個 webpack-dev-middleware 配合 express server 的示例。

首先，安裝 express 和 webpack-dev-middleware：

npm install --save-dev express webpack-dev-middleware

現(xiàn)在，我們需要調整 webpack 配置文件，以確保 middleware(中間件) 功能能夠正確啟用：

webpack.config.js

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

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

module.exports = {

mode: 'development',

entry: {

index: './src/index.js',

print: './src/print.js',

},

devtool: 'inline-source-map',

devServer: {

contentBase: './dist',

},

plugins: [

new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),

new HtmlWebpackPlugin({

title: 'Development',

}),

],

output: {

filename: '[name].bundle.js',

path: path.resolve(__dirname, 'dist'),

+ publicPath: '/',

},

};

我們將會在 server 腳本使用 publicPath，以確保文件資源能夠正確地 serve 在 http://localhost:3000 下，稍后我們會指定 port number(端口號)。接下來是設置自定義 express server：

project

webpack-demo

|- package.json

|- webpack.config.js

+ |- server.js

|- /dist

|- /src

|- index.js

|- print.js

|- /node_modules

server.js

const express = require('express');

const webpack = require('webpack');

const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();

const config = require('./webpack.config.js');

const compiler = webpack(config);

// 告知 express 使用 webpack-dev-middleware，

// 以及將 webpack.config.js 配置文件作為基礎配置。

app.use(

webpackDevMiddleware(compiler, {

publicPath: config.output.publicPath,

})

);

// 將文件 serve 到 port 3000。

app.listen(3000, function () {

console.log('Example app listening on port 3000!\n');

});

現(xiàn)在，添加一個 npm script，以使我們更方便地運行 server：

package.json

{

"name": "webpack-demo",

"version": "1.0.0",

"description": "",

"private": true,

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"watch": "webpack --watch",

"start": "webpack serve --open",

+ "server": "node server.js",

"build": "webpack"

},

"keywords": [],

"author": "",

"license": "ISC",

"devDependencies": {

"clean-webpack-plugin": "^3.0.0",

"express": "^4.17.1",

"html-webpack-plugin": "^4.5.0",

"webpack": "^5.4.0",

"webpack-cli": "^4.2.0",

"webpack-dev-middleware": "^4.0.2",

"webpack-dev-server": "^3.11.0"

},

"dependencies": {

"lodash": "^4.17.20"

}

}

現(xiàn)在，在 terminal(終端) 中執(zhí)行 npm run server，將會有類似如下信息輸出：

Example app listening on port 3000!

...

[webpack-dev-middleware] asset index.bundle.js 1.38 MiB [emitted] (name: index)

asset print.bundle.js 6.25 KiB [emitted] (name: print)

asset index.html 274 bytes [emitted]

runtime modules 1.9 KiB 9 modules

cacheable modules 530 KiB

./src/index.js 406 bytes [built] [code generated]

./src/print.js 83 bytes [built] [code generated]

./node_modules/lodash/lodash.js 530 KiB [built] [code generated]

webpack 5.4.0 compiled successfully in 709 ms

[webpack-dev-middleware] Compiled successfully.

[webpack-dev-middleware] Compiling...

[webpack-dev-middleware] assets by status 1.38 MiB [cached] 2 assets

cached modules 530 KiB (javascript) 1.9 KiB (runtime) [cached] 12 modules

webpack 5.4.0 compiled successfully in 19 ms

[webpack-dev-middleware] Compiled successfully.

現(xiàn)在，打開瀏覽器，訪問 http://localhost:3000。應該看到 webpack 應用程序已經(jīng)運行！

柚子快報邀請碼778899分享：前端 webpack進階(一)

http://yzkb.51969.com/

相關文章