EP 2 - 關於 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 來生成。

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

前言

插件安裝

補充

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

分享這篇文章

留言

前言

插件安裝

補充

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

EP-12-關於-Webpack-學習這件小事之 CSS 壓縮

EP-11-關於-Webpack-學習這件小事之 prod 與 dev？

EP 10 - 關於 Webpack 學習這件小事之測試單元

EP 9 - 關於 Webpack 學習這件小事之打包圖片

分享這篇文章

留言