前言
webpack 雖然非常好用,但是實際開發時還是會需要安裝很多插件,因此這一篇就來講講插件。
插件
接下來我們剛才透過 webpack 生成了一個檔案叫做 main.a87486.bundle.js
,一般來說,通常我們在開發網頁時,若要引入 JavaScript 都是寫 <script src="app.js"></script>
,但是由於我們這邊檔案名稱會隨機生成,那麼就不能使用這種寫死的方式,而必須透過自動注入的方式將 JavaScript 注入到 HTML 中,因此我們就必須使用到插件,這邊將會使用到 html-webpack-plugin
這個插件
而這個插件主要是幫助我們來生成一個 HTML 檔案,舉凡我們要傳遞一個 title 標籤的屬性內容,因此先讓我們依照官方介紹的安裝方式來安裝插件
1
| npm i --save-dev html-webpack-plugin
|
安裝完畢之後在 src
底下建立一個檔案與資料夾 template/index.html
,內容如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| <!DOCTYPE html> <html lang="zh-Hant-TW"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <noscript> <strong>您的瀏覽器不支援 JavaScript,請檢查您的瀏覽器是否支援 JavaScript 或者啟用 JavaScript。</strong> </noscript> <div id="app"></div> </body> </html>
|
接下來回到 webpack.config.js 加入 html-webpack-plugin 相關設置,首先在 webpack 有一個屬性是 plugins
,這個屬性是一個陣列,我就會在這個陣列中加入 new HtmlWebpackPlugin({})
的實例化物件,裡面包含了剛剛在 HTML 所撰寫 (<%= htmlWebpackPlugin.options.title %>
) 要傳入的屬性 title
、要指定注入的模板 template
屬性以及最後一個輸出的檔案名稱,因此完整 webpack 設置如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = { mode: 'development', entry: path.resolve(__dirname, './src/main.js'), output: { path: path.resolve(__dirname, './dist'), filename: '[name].[contenthash:6].bundle.js', }, plugins: [ new HtmlWebpackPlugin({ title: 'Webpack 5', template: path.resolve(__dirname, './src/template/index.html'), filename: 'index.[contenthash:6].html', }) ] };
|
接下來當你輸入 npm run dev
的時候,你就會得到一個打包後的 html,內容如下:
檔案名稱:index.13f938.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| <!DOCTYPE html> <html lang="zh-Hant-TW"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Webpack 5</title> <script defer src="main.30f09f.bundle.js"></script></head> <body> <noscript> <strong>您的瀏覽器不支援 JavaScript,請檢查您的瀏覽器是否支援 JavaScript 或者啟用 JavaScript。</strong> </noscript> <div id="app"></div> </body> </html>
|
我們可以看到剛剛我們所撰寫的 title
屬性與打包後的 script
標籤都會自己注入,透過這個套件可以達到我們所需要的自動注入,而這個概念就如同我們在使用 Vue Cli 的時候相同,Vue Cli 也會自己幫我們注入 Script 唷~
最後這邊應該會有一些人好奇以往我們在開發時,都會將 script
放在結尾 body,但是這邊插件卻是注入在 head
,這樣子不會有任何問題嗎?,基本上是不會,因為該標籤有被加入一個屬性是 defer
,這個屬性用途會等整個頁面都下載處理完畢之後才會執行,所以注入在 head
並不會有太大問題,但是如果是比較舊的瀏覽器,那麼就不能使用該屬性,因此如果有發生該屬性無法運作的問題,那麼可以調整一下 webpack 的插件設置就可以搞定了
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = { mode: 'development', entry: path.resolve(__dirname, './src/main.js'), output: { path: path.resolve(__dirname, './dist'), filename: '[name].[contenthash:6].bundle.js', }, plugins: [ new HtmlWebpackPlugin({ title: 'Webpack 5', template: path.resolve(__dirname, './src/template/index.html'), filename: 'index.[contenthash:6].html', inject: 'body', }) ] };
|
這邊只需要增加 inject
屬性,並設置為 'body'
就可以囉~
結果如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| <!DOCTYPE html> <html lang="zh-Hant-TW"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Webpack 5</title> </head> <body> <noscript> <strong>您的瀏覽器不支援 JavaScript,請檢查您的瀏覽器是否支援 JavaScript 或者啟用 JavaScript。</strong> </noscript> <div id="app"></div> <script defer src="main.30f09f.bundle.js"></script></body> </html>
|
參考文獻