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

發表於 2019-06-05 分類於 Webpack

Google AD

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

Liker 讚賞

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

｜

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

前言

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

插件安裝

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

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

html-webpack-plugin

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

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 來生成。