插件 html-webpack-plugin 使用的详解（一）

2019-10-20 本文已影响0人 CondorHero

前言：html-webpack-plugin的作用主要是用来自动生成 index.html 使用的，一般来配合 extract-text-webpack-plugin 和开发时请求文件名相同，浏览器缓存导致页面不加载情况，这时如果采用 output 模板字符串 输出时，html-webpack-plugin 能够替代手动来自动引包。

文件目录结构：

┣✈ node_modules
┣✈ webpack.config.js
┣✈ package.json
┗✈ src
    ┣✈ main.js

一个新文件夹：创建依赖文件（注意 window7 项目本地如果不安装webpack可能报错）

C:\Users\Administrator\Desktop\study>npm init -y
Wrote to C:\Users\Administrator\Desktop\study\package.json:

{
  "name": "study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

修改 scripts 字段，增加一个脚本。

  "scripts": {
    "dist": "webpack"
  }

安装：html-webpack-plugin

C:\Users\Administrator\Desktop\study>npm install --save html-webpack-plugin
[..................] - fetchMetadata: sill resolveWithNewModule html-webpack-pl

配置 webpack.config.js 文件(HtmlWebpackPlugin 配置项什么也不写)：

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

const path = require('path')
module.exports = {
    mode:"development",
    entry: './src/main.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({})
    ]
}

打包后：dist 文件里面的内容

bundle.js
index.html

其中index.html的内容为：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="bundle.js"></script></body>
</html>

不配置任何选项的html-webpack-plugin插件，他会默认将webpack中的output配置都插入到文件指定的位置。

常用 html-webpack-plugin配置：

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

const path = require('path')
module.exports = {
    mode:"development",
    entry: './src/main.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            title: 'Webpack App',
            favicon: 'favicon.ico',
            template: path.resolve(__dirname,'./src/template.html'),
            inject: 'head',
            minify: {
                removeAttributeQuotes: true, // 移除属性的引号（不常用）
                removeEmptyElements:true,    //删除所有含有空内容的元素。（不常用）
                removeComments: true,    //带HTML注释
                collapseWhitespace: true,    //去掉空格
                minifyJS: true,    // 压缩html里的js（使用uglify-js进行的压缩）
                minifyCSS: true,    // 压缩html里的css（使用clean-css进行的压缩）
            }
        })
    ]
}

title: 生成的html文档的标题。如果你设置的 title 和 template模板中发生了冲突，以template为准。
template:指定你生成的文件所依赖哪一个html文件模板。
filename就是html文件的文件名，默认是index.html。
inject：
inject有四个值： true body head false

true 默认值，script 标签位于html文件的 body 底部
body script标签位于html文件的 body 底部
head script标签位于html文件的 head中
false 不插入生成的js文件，这个几乎不会用到的

favicon给你生成的html文件生成一个favicon，值是一个路径。文件和webpack.config.js同级。
minify
使用minify会对生成的html文件进行压缩。默认是false。html-webpack-plugin内部集成了 html-minifier。
cache默认是true的，表示内容变化的时候生成一个新的文件。
hash：true|false，是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值，添加hash形式如下所示：

html <script type="text/javascript" src="common.js?a3e1396b501cdd9041be"></script>
生成的 index.html 文件。

<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><title>冲突时，以我template为准</title><style>div{width:100px;height:100px;background-color:#345534}</style><link rel="shortcut icon" href=favicon.ico><script type=text/javascript src=bundle.js></script></head><body><script>console.log(8888),console.log(8888),console.log(8888),console.log(8888)</script></body></html>

chunks
chunks主要用于多入口文件，当你有多个入口文件，那就回编译后生成多个打包后的文件，那么chunks 就能选择你要使用那些js文件

entry: {
    index: path.resolve(__dirname, './src/index.js'),
    devor: path.resolve(__dirname, './src/devor.js'),
    main: path.resolve(__dirname, './src/main.js')
}

plugins: [
    new httpWebpackPlugin({
        chunks: ['index','main']
    })
]
那么编译后：

<script type=text/javascript src="index.js"></script>
<script type=text/javascript src="main.js"></script>

而如果没有指定 chunks 选项，默认会全部引用。

插件 html-webpack-plugin 使用的详解（一）

猜你喜欢

热点阅读