跟着"呆妹"來學webpack(基礎篇)

時間 2020-04-19

標籤跟着 webpack 基礎简体版

原文原文鏈接

霖呆呆的webpack之路-基礎篇

前言

你盼世界，我盼望你無bug。Hello 你們好！我是霖呆呆！javascript

先簡單說一下標題的來龍去脈，避免吃瓜羣衆不明白何爲"呆妹"。css

事情發生在我以前寫的一篇文章當中《讀《三元-JS靈魂之問》總結》：html

而後...我就到Lv4了，發這篇文章我不是爲了證實什麼，我只想說：前端

"大家根本不是喜歡個人文章，就是饞個人身子！"java

設計師，配幾個狗頭的表情包。node

好嘞。webpack

[狗頭] [狗頭] [狗頭]git

因此這波安排一下"呆妹"吧，誰叫我是一個信守承諾的博主呢。github

（注⚠️ 如下內容有可能引發您的不適，請謹慎觀看）web

（但願你們不要像此博主同樣爲了人氣不擇手段敗壞掘金的風氣，本次行爲僅做爲升四級以後的粉絲福利博你們一笑，我更但願的是本身的文章能獲得你們的喜歡。感謝～）

（想要獲取更多"呆妹"的表情包能夠關注文章最後的二維碼，而後輸入"呆妹"）

webpack系列介紹

這個系列記錄了我在webpack上的學習歷程。若是你也和我同樣想要好好的掌握webpack，那麼我認爲它對你是有必定幫助的，由於教材中是以一名webpack小白的身份進行講解, 案例demo也都很詳細, 涉及到：

基礎篇(本章)
構建方式篇
優化篇
loader篇
配置篇

建議先mark再花時間來看。

（其實這個系列在很早以前就寫了，一直沒有發出來，當時還寫了一大長串前言可把我感動的，想看廢話的能夠點這裏：GitHub地址，不過如今讓咱們正式開始學習吧）

全部文章webpack版本號^4.41.5, webpack-cli版本號^3.3.10。

在webpack3中，webpack自己和它的CLI都是在同一個包中，但在第4版中，二者分開來了，也是爲了讓咱們更好地管理它們。

1、基本使用

先讓咱們來看看最基本的一種使用webpack的方式.

首先你得知道, webpack和其它依賴同樣, 是包括本地安裝和全局安裝的, 可是在此我建議你使用本地安裝的方式, 不推薦全局安裝。

由於使用了全局安裝以後, 會使你的項目中的webpack鎖定到指定版本中，而且在使用不一樣的webpack 版本的項目中，可能會致使構建失敗.

因此在後面的教材中, 我都會以本地安裝webpack的方式進行講解。

(教材中的案例GitHub地址: LinDaiDai/webpack-basic)

1.1 初始化項目

首先咱們建立一個目錄, 並初始化npm:

$ mkdir webpack-basic && cd webpack-basic
$ npm init -y
複製代碼

(使用-y初始化npm會幫助咱們生成一個默認的package.json配置)

1.2 本地安裝webpack

前面已經提到過, 文章採用的webpack版本號是>4.0的, 因爲webpack與webpack-cli已經分開了, 咱們須要分別安裝它們(若是你使用的webpack版本號小於4.0則只須要安裝webpack就能夠了)

在webpack-basic的根目錄下執行指令:

$ npm install webpack webpack-cli --save-dev
複製代碼

此時會發現package.json裏的devDependencies中多出了你剛剛安裝的webpack和webpack-cli.

1.3 建立bundle文件

完成以上步驟以後, 讓咱們來編寫一個簡單的頁面來看看效果.

首先在根目錄下建立一個src文件夾, 並在其中建立一個index.js文件
在根目錄下建立一個dist文件夾, 並在其中建立一個index.html文件

以後, 項目結構就變成了這樣:

webpack-basic
 	|- package.json
 	|- /dist
 		|- index.html
 	|- /src
 		|- index.js
複製代碼

讓咱們在其中加上一些內容:

// src/index.js
function component() {
    var element = document.createElement('div');

    element.innerHTML = "Hello Webpack";

    return element;
}

document.body.appendChild(component());
複製代碼

<!--dist/index.html-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack起步</title>
</head>

<body>
    <script src="main.js"></script>
</body>

</html>
複製代碼

index.js還好理解, 可是你可能會注意到index.html中引入了一個main.js , 可是這個js文件咱們沒有看到在哪裏呀.

別急, 這裏的main.js就是咱們接下來要通過webpack打包以後生產的文件, 只不過在這裏咱們先提早引入進來了.

1.4 執行webpack打包

編寫完以上代碼以後, 咱們就能夠在根目錄下使用此命令來進行打包了:

$ npx webpack
複製代碼

此時你會看到dist文件夾下就多出了一個main.js文件, 而且打開index.html , 會看到頁面上顯示了: "Hello Webpack".

可能你會有點糊了, 明明咱們什麼也沒有配置, 它怎麼就可以生成main.js呢.

像這種在webpack4沒有任何webpack配置的狀況下, webpack會爲你提供一套默認的配置.

將 src/index.js做爲入口起點(也就是 entry選項)
將 dist/main.js做爲輸出(也就是 output選項)

用官網的話來講就是:

執行 npx webpack，會將咱們的腳本做爲入口起點，而後輸出爲 main.js。

Node 8.2+ 版本提供的 npx 命令，能夠運行在初始安裝的 webpack 包(package)的 webpack 二進制文件（./node_modules/.bin/webpack)

2、使用配置文件

經過上面👆的案例, 咱們知道, 在webpack4中若是你沒有任何配置文件時, 它會爲你提供一套默認的配置.

可是在webpack3中, 這樣是不容許的, 必須得有一個webpack.config.js文件來指定入口出口.

不過若是你是用webpack4開發的話, 在實際使用中,你也仍是須要一個webpack.config.js文件來進行一些複雜的設置.

2.1 webpack.config.js

讓咱們在項目的根目錄下建立一個叫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')
   }
}
複製代碼

如今讓咱們從新使用命令來進行構建:

$ npx webpack --config webpack.config.js

Hash: dabab1bac2b940c1462b
Version: webpack 4.0.1
Time: 328ms
Built at: 2018-2-26 22:47:43
    Asset      Size  Chunks             Chunk Names
bundle.js  69.6 KiB       0  [emitted]  main
Entrypoint main = bundle.js
   [1] (webpack)/buildin/module.js 519 bytes {0} [built]
   [2] (webpack)/buildin/global.js 509 bytes {0} [built]
   [3] ./src/index.js 256 bytes {0} [built]
    + 1 hidden module

WARNING in configuration(配置警告)
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.('mode' 選項還未設置。將 'mode' 選項設置爲 'development' 或 'production'，來啓用環境默認值。)
複製代碼

能夠看到, 此次它也成功的完成了構建, 不過相對於以前的執行語句, 咱們多了一段:

--config webpack.config.js
複製代碼

其實這個命令的做用就是 指定以哪一個配置文件進行構建, 好比咱們這裏就是指定了webpack.config.js這個文件.

不過其實在這裏你也能夠不要這段語句, 由於webpack命令默認會選擇使用它.

只不過若是你的配置文件不叫webapck.config.js, 而是好比叫作webpack.other.config.js, 你就得指定它了.

如今, webpack根據你的配置, 入口處爲src/index.js, 出口文件爲dist/bundle.js.

咱們也得從新修改一下dist/index.html的引入了:

<script src="bundle.js"></script>
複製代碼

經過這種配置文件的方式, 讓咱們使用起來更加的靈活, 並且, 咱們能夠經過配置方式指定 loader 規則(loader rules)、插件(plugins)、解析選項(resolve options)，以及許多其餘加強功能。

2.2 NPM腳本

在上面👆, 咱們是使用npx webpack這樣的CLI方式來運行本地的webpack的:

$ npx webpack
複製代碼

其實這樣是不太方便的, 咱們能夠設置一個快捷方式. 在package.json中添加一個npm腳本:

{
    "name": "webpack-basic",
    "version": "1.0.0",
    "description": "",
    "private": true,
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
+       "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "webpack": "^4.41.5",
        "webpack-cli": "^3.3.10"
    },
    "dependencies": {
        "lodash": "^4.17.15"
    }
}
複製代碼

在scripts中新加了一個配置"build: "webpack".

如今，可使用 npm run build 命令，來替代咱們以前使用的 npx 命令。

$ npm run build
複製代碼

如今用此命令工具執行出來的效果和上面👆介紹的是同樣的.

3、管理資源

讓咱們來回顧一下上面👆講解的項目目錄:

webpack-basic
 	|- package.json
 	|- webpack.config.js
 	|- /dist
 		|- index.html
 	|- /src
 		|- index.js
複製代碼

能夠看到, 上面的案例只容許了咱們使用js文件來進行構建, 可是在實際開發中, 咱們不可能只有js文件, 如果咱們要使用css、圖片、字體這些資源怎麼辦?

別擔憂, webpack 最出色的功能之一就是，除了 JavaScript，還能夠經過 loader 引入任何其餘類型的文件。

3.1 加載CSS

首先讓咱們以加載css文件來認識一下loader.

style-loader和css-loader

爲了從js模塊中導入一個css文件, 好比你想在index.js中引入一個css文件:

// index.js
import './style.css'

// 或者用require()的方式
const style = require('./style.css')
複製代碼

你須要在項目中(也就是module配置中), 安裝並添加這兩個loader:

style-loader
css-loader

$ npm i --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$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

複製代碼

咱們在webpack.config.js中新增了一個module的配置.

這裏配置的意思是:

webpack 根據正則表達式，來肯定應該查找哪些文件，並將其提供給指定的loader。/.css$/這個正則的意思就是匹配目錄下全部以 .css 結尾的所有文件，都將被提供給 style-loader 和 css-loader。

($應該知道什麼意思吧，就是表示必須以什麼結尾)

注⚠️:

style-loader要放到css-loader前面, 否則打包的時候就會報錯了.

在js中引入css

如今就能夠在咱們的項目中使用css了, 而且你能夠在js中將它引入進來.

先讓咱們在src文件夾下建立一個style.css 文件並加上一些內容:

.color_red {
    color: red;
}
複製代碼

而後修改咱們以前的src/index.js文件, 給element 加上一個類名:

import './style.css' // 1. 導入css文件

function component() {
    var element = document.createElement('div');

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('color_red') // 2. 添加類名
    return element;
}

document.body.appendChild(component());
複製代碼

此時從新使用命令語句進行構建:

$ npm run build
複製代碼

打開頁面, 發現頁面中的"Hello Webpack"變成了紅色, 證實css引入成功了.

它這裏實現的方式是: 當該模塊運行時，含有 CSS 字符串的標籤，將被插入到 html 文件的 head 中。

因此若是咱們檢查頁面(也就是打開控制檯), 而後在Elements中你會發現, head裏會加上一個style標籤, 裏面就是你定義css的內容.

單獨使用css-loader有什麼效果？

雖然上面👆咱們介紹要想在頁面中使用css就須要使用style-loader和css-loader這兩個loader，那麼它們單獨的做用是什麼呢？

如今咱們修改一下webpack.config.js的配置，去除掉style-loader：

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
-           "style-loader", 
            "css-loader"
        ],
      },
    ],
  },
};
複製代碼

而且把index.js那裏引入的style打印出來看看：

// src/index.js
const style = require('./style.css')
console.log('style', style)
複製代碼

效果：

能夠發現，css-loader它的做用實際就是能識別導入的css這個模塊，並經過特定的語法規則進行內容轉換。

可是這裏獲得的是一個數組啊，並非咱們想要的，頁面也沒法來使用它。因此這時候就須要配合上style-loader它才能發揮它真正的做用。

style-loader的做用

style-loader它的原理其實就是經過一個JS腳本建立一個style標籤，裏面會包含一些樣式。而且它是不能單獨使用的，由於它並不負責解析css以前的依賴關係。

也就是說：

單獨使用了 css-loader只能保證咱們能引用 css模塊進來，可是並無效果
而 style-loader就能夠建立一個 style標籤，而且把引入進來的 css樣式都塞到這個標籤裏

可是有一點須要注意了，咱們在當前項目的js中引入了幾個css模塊，它就會生成幾個style標籤。

好比如今我在項目中又新建了一個style2.css文件並加上一些樣式：

.color_red {
  font-size: 20px;
  color: green;
}
複製代碼

而後在src/index.js都引入這兩個css文件：

import './style.css'
import './style2.css'
複製代碼

（記得把webpack.config.js中的style-loader從新加上）

此時從新npm run build一下，並打開頁面：

如今你會發現"霖呆呆"他變綠了。（固然是選擇原諒她了...）

頁面中確實是生成了兩個style標籤，並且樣式的顯示規則也是後面的覆蓋前面的(style2.css比style.css晚引入)

3.2 加載圖片

咱們已經介紹瞭如何加載 css, 那麼項目中的圖片是如何處理的呢?

file-loader

使用file-loader可讓咱們在js和css中引入一些靜態資源, 一樣的, 你要先安裝配置它:

$ npm i --save-dev file-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$/,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    }
}
複製代碼

能夠看到, 我在原來的rules數組中又新增了一個配置, 有了css-loader的基礎, 相信這裏你也很快就看懂了.

在js/css中引入圖片

接下來, 就讓咱們看看在項目裏使用圖片的效果吧.

首先我在src目錄下放了一張圖片: icon.png.

而後分別在index.js和style.css中引入它:

// index.js
import './style.css'
import Icon from './icon.png' // 1. 引入圖片

function component() {
    var element = document.createElement('div');

    element.innerHTML = '霖呆呆';
    element.classList.add('color_red')

    var img = new Image(200, 200); // 2. 使用圖片
    img.src = Icon;
    element.appendChild(img);

    return element;
}

document.body.appendChild(component());
複製代碼

/* style.css */
.color_red {
    color: red;
    background: url('./icon.png');
    height: 300px;
}
複製代碼

從新打包, 而後查看頁面, 能夠看到圖片在兩個地方均可以正常引用了.

此時細心的你可能會發現, 在打包完的dist文件夾裏, 會出現一個以MD5哈希值命名的png文件:

webpack-basic
    |- /dist
        |- 182ba2a0f5c9507387abe2ad84c23e6b.png
        |- bundle.js
        |- index.html
複製代碼

沒錯, 當你在js或者css中引入這個圖片的時候, 該圖片會被處理並添加到output目錄下.

有意思的是, 若是你去掉index.js和style.css 中對icon.png的引用的話, 則webpack打包完以後的dist文件夾內就不會有這張圖片。

file-loader的其它可選參數

在上面👆咱們只是簡單的使用了一下file-loader:

rules: [
  {
    test: /\.(png|svg|jpg|gif)$/,
    use: ["file-loader"],
  },
],
複製代碼

其實, file-loader還有不少其它的參數.

好比指定打包完以後文件的命名規則、打包完以後存放的目錄等等.

這些配置規則均可以放在options這個對象中:

rules: [
  {
    test: /\.(png|svg|jpg|gif)$/,
    use: [
      {
        loader: "file-loader",
        options: {},
      },
    ],
  },
],
複製代碼

而options的選項都有例如name、context、publicPath、outputPath等等, 具體能夠查看: file-loader

我這裏演示一下, 將打包以後的圖片存放到images文件夾下, 而且命名爲圖片的原始名稱:

rules: [
  {
    test: /\.(png|svg|jpg|gif)$/,
    use: [
      {
        loader: "file-loader",
        options: {
          name: "[name].[ext]",
          outputPath: "images/",
        },
      },
    ],
  },
],
複製代碼

此時, 打包完以後的目錄結構就會變成:

webpack-basic
    |- /dist
        |- /images
            |- icon.png
        |- bundle.js
        |- index.html
複製代碼

name的[name]表示使用文件的原始名稱, [ext]表示文件的原始類型, [hash]表示以哈希值命名, [path]表示資源相對於context的路徑.

(context 默認爲webpack.config.js)

3.3 加載字體

上面👆咱們已經學會了如何加載圖片, 那麼加載字體呢?

其實字體也是一種資源, 因此它的加載方式和圖片是同樣的, 也是使用file-loader.

只不過在webpack中的配置須要你針對一下字體後綴的文件作下處理:

webpack.config.js

rules: [
  {
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    use: ["file-loader"],
  },
]
複製代碼

OK, 讓咱們在項目裏引用一下字體, 在src/下新建一個fonts文件夾, 並添加兩個字體文件, 此時項目目錄變成:

（這兩個字體文件是我從Iconfont的在線字體上下載下來的）

 webpack-basic
    |- package.json
    |- webpack.config.js
    |- /dist
        |- index.html
    |- /src
        |- fonts
+           |- webfont.woff
+           |- webfont.woff2
        |- icon.png
        |- index.js
複製代碼

在css中引用它:

@font-face {
    font-family: 'MyFont';
    src: url('./fonts/webfont.woff2') format('woff2'), url('./fonts/webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

.color_red {
    color: red;
    font-family: 'MyFont';
    background: url('./icon.png');
}
複製代碼

而後修改一下src/index.js中的字：

// src/index.js
function createElement () {
    element.innerHTML = '孔子曰：中午不睡，下午崩潰!孟子曰：孔子說的對!';
}
複製代碼

(注意了，案例中我是偷了下懶，直接使用Iconfont的在線字體寫的，它只針對於"孔子曰：中午不睡，下午崩潰!孟子曰：孔子說的對!"這幾個字有效，換成其它字就不行了，固然實際使用上你確定不能這麼幹)

從新打包後打開頁面, 能夠看到剛剛引入的字體.

它和圖片同樣, 若是沒用到字體的話, 也不會被輸出到output裏.

3.4 加載xml或csv數據

除了上述介紹的css, 圖片, 字體以外, 能夠加載的可用資源還能夠是數據, 好比: JSON、CSV、TSV、XML.

內置是支持 JSON文件的, 好比 import Data from './data.json'默認是正常運行的
CSV和TSV文件須要使用 csv-loader
XML文件須要使用 xml-loader

因此你若是要使用的話, 先安裝:

$ npm i --save-dev csv-loader xml-loader
複製代碼

而後在webpack.config.js中配置:

rules: [
  {
    test: /\.(csv|tsv)$/,
    use: ["csv-loader"],
  },
  {
    test: /\.xml$/,
    use: ["xml-loader"],
  },
],
複製代碼

如今你就能夠直接在項目裏引用xml文件了:

import Data from './data.xml'
複製代碼

3.5 加載txt文本數據

加載.txt文本數據依靠raw-loader.

$ npm i --save-dev raw-loader
複製代碼

而後配置:

rules: [
  {
    test: /\.(csv|tsv)$/,
    use: ["csv-loader"],
  },
  {
    test: /\.txt$/,
    use: "raw-loader",
  },
],
複製代碼

此時引用.txt文件就能夠獲取它裏面的內容了:

import txt from './assets/file.txt'

export function print() {
    console.log(txt) // 我是一段測試raw-loader的文本內容
}
複製代碼

若是你使用file-loader來處理txt文件的話, 會將txt文件壓縮到bundle中,並且只能獲取到文件的路徑:

import txt from './assets/file.txt'

export function print() {
    console.log(txt) // 1474623111aaae6b31c08e1fedda68a3.txt
}
複製代碼

4、管理輸出

4.1 多個輸入/輸出

上面👆的案例, 咱們只有一個輸入src/index.js和一個輸出dist/bundle.js.

其實entry和output是支持你有多個輸入、輸出的.

我從新建立了一個項目webpack-html. 並依照以前的配置, 只引入了webpack 和 webpack-cli

而後在src下建立index.js和print.js:

src/print.js:

export default function printMe() {
    console.log("I' m printMe");
}
複製代碼

src/index.js:

import printMe from './print.js';

function component() {
    var element = document.createElement('div');
    element.innerHTML = 'Hello Webpack';

    var btn = document.createElement('button');
    btn.innerHTML = '點擊我';
    btn.onclick = printMe;
    element.appendChild(btn);

    return element;
}

document.body.appendChild(component());
複製代碼

此時的項目結構爲:

webpack-html
    |- package.json
    |- webpack.config.js
    |- /src
        |- index.js
        |- print.js
複製代碼

而後配置一下webpack.config.js文件:

const path = require('path')

module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
   output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}
複製代碼

此時, 我配置了兩個輸入index.js和print.js.

而輸出的話, 我採用的是[name].bundle.js的形式, 這樣在打包完畢以後, 就會生成如下格式的文件:

/dist
    |- app.bundle.js
    |- print.bundle.js
複製代碼

在dist這個文件夾下有app.bundle.js和print.bundle.js.

因此你應該可以理解了吧, [name] 對應的就是entery處.

接着讓咱們再在dist文件夾下新建一個index.html文件並引入剛剛生成的那兩個js文件:

dist/index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack Output Management</title>
  </head>
  <body>
  <script src="app.bundle.js"></script>
  <script src="print.bundle.js"></script></body>
</html>
複製代碼

而後讓咱們打開這個html看看效果, 頁面中顯示了 "Hello Webpack", 而且點擊按鈕的時候, 也會有console.log.

證實了剛剛輸出的兩個js文件引入的都沒有問題.

4.2 設定HtmlWebpackPlugin

在上面👆全部的案例中, 咱們採用的都是手動創建一個index.html, 而後將輸出的js文件引入這個html.

其實有一個插件是能讓咱們免去這一步, 這就是html-webpack-plugin

基本使用

首先讓咱們安裝它:

$ npm i --save-dev html-webpack-plugin
複製代碼

而後從新調整webpack.config.js:

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

module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            title: 'Webpack Output Management'
+        })
+    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}
複製代碼

如今讓咱們刪掉以前手動建立的index.html, 而後執行npm run build看看.

OK👌, 它如今已經會自動在dist文件夾下生成index.html, 並且還會幫咱們把輸出的js都引入進去:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack Output Management</title>
  </head>
  <body>
  <script type="text/javascript" src="app.bundle.js"></script>
  <script type="text/javascript" src="print.bundle.js"></script></body>
</html>
複製代碼

其它配置項

在HtmlWebpackPlugin裏, 除了title(配置產生的index.html的標題)這個配置項外, 還有不少其它的選項.

好比:

filename {String } 默認爲 index.html, 這個是指定你生成的 index.html的路徑和名稱;
template { String } 默認爲 '', 有時候你想要本身寫生成的 index.html文件, 這個屬性就是指定你的模版路徑的.
favion {String} 指定你生成 index.html的圖標, 固然若是你使用了 template, 這個屬性也能夠不用了

這裏我來演示一下使用filename和template看看會有什麼效果 😊.

首先我在src下面新建了一個index.html, 這個用來寫模版:

src/index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>
</head>

<body></body>

</html>
複製代碼

而後修改一下webpack.config.js:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    app: "./src/index.js",
    print: "./src/print.js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Webpack Output Management",
+      filename: "admin.html",
+      template: "src/index.html",
    }),
  ],
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};
複製代碼

如今執行打包指令以後, 生成的dist文件目錄就會變成:

/dist
+ |- admin.html
    |- app.bundle.js
    |- print.bundle.js
-   |- index.html
複製代碼

4.3 清理/dist文件夾

咱們在每次構建以後, 都會生成dist文件夾, 可是若是有歷史遺留下來的文件的話, 它不會自動的清理掉.

如今比較推薦的作法就是在每次構建前清理/dist文件夾, clean-webpack-plugin插件就是用來作這個事的.

$ npm i --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: {
    app: "./src/index.js",
    print: "./src/print.js",
  },
  plugins: [
+   new CleanWebpackPlugin({
+       cleanAfterEveryBuildPatterns: ["dist"], // 這個是非必填的
+   }),
    new HtmlWebpackPlugin({
      title: "Webpack Output Management",
      filename: "assets/admin.html",
      template: "src/index.html",
    }),
  ],
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};
複製代碼

若你是按照官網的安裝方式:

const CleanWebpackPlugin = require('clean-webpack-plugin');
...
new CleanWebpackPlugin(['dist'])
複製代碼

而後你在打包的時候就會報錯:

TypeError: CleanWebpackPlugin is not a constructor
複製代碼

這個我查明瞭緣由, 若是你安裝的clean-webpack-plugin是3.0 以上的話, 你就得像我同樣用const { CleanWebpackPlugin } = require('clean-webpack-plugin')這樣的方式引用.

而且配置要清理的文件夾也要用cleanAfterEveryBuildPatterns來定義.

後語

你盼世界，我盼望你無bug。這篇文章就介紹到這裏。

"這不是我，這不是我，這不是我"

若是你也喜歡呆妹就請關注霖呆呆的公衆號 LinDaiDai 或者掃一掃下面的二維碼👇👇👇吧😊.(能夠看到我已經完全放飛自我了...)

我會不定時的更新一些前端方面的知識內容以及本身的原創文章🎉

你的鼓勵就是我持續創做的主要動力 😊.