EP 2 - 關於 Webpack 學習這件小事之插件安裝

前言

前面已經學習到如何使用基本的 Webpack,但是這樣子是遠遠不夠的,所以接下來將會試著加入插件這個東西。

插件安裝

首先官方推薦的第一個插件是 html-webpack-plugin,所以我們就開啟 cmd 輸入相關指令

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

html-webpack-plugin

接下來開啟 webpack.config.js 並加以下內容進去

1
2
3
4
5
6
7
8
9
10
11
12
13
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin()
]
};

接下來一樣輸入 webpack -p,接下來你會看到 webpack 替我們快速生成一個 index.html 在 dist 資料夾底下

HTML

並且也替我們撰寫好 HTML 了

HTML

好哩,這一篇基礎插件安裝就到這邊結束~

補充

原先 EP 1 所建立的 index.html 就可以刪除了,因為以後就會直接透過 webpack 來生成。

Liker 讚賞

這篇文章如果對你有幫助,你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee Buy Me A Coffee

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ