插件 html-webpack-plugin

html-webpack-plugin其他配置

filename：指定html打包后的文件名称

template：指定打包html模板，将基于模板进行打包

inject：指定自动生成文件位置

使打包后的文件存放到相应的目录结构中

使用webpack插件html-webpack-plugin自动化生成项目中的html页面

命令：npm install html-webpack-plugin --save

在webpack.config.js中配置template，可使打包后的index.html基于制定文件自动生成关联js或css引用，能够有效避免因hash变化而每次都需改动引用路径的问题。

避免每次打包生成新的文件，需要每次手动修改index.html 引入打包文件的路径名称，使用了html-webpack-plugin 插件。

使用时候先require引入

var htmlWebpackPlugin = require('html-webpack-plugin');

使用插件

plugins: [ new htmlWebpackPlugin() ]

然后重新打包，npm run webpack 

报错了： Cannot read property 'make' of undefined.......

解决办法是，安装别的版本的插件：

卸载：

npm uninstall html-webpack-plugin

安装：

npm install html-webpack-plugin@2.30.1 --save-dev

重新打包：

npm run weboack

安装插件真的是一个坑，报错就重新装一遍，不行换个版本再试试！

自动化生成项目中的html页面

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

参考网址：

（1）webpack插件列表：

https://www.webpackjs.com/plugins/，

（2）htmlWebpackPlugin插件介绍：

https://www.webpackjs.com/plugins/html-webpack-plugin/

（3）htmlWebpackPlugin插件配置：

https://github.com/jantimon/html-webpack-plugin#configuration

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(),
        new HtmlWebpackPlugin({
            title: 'Output Management'
        })
    ],
    output: {
        // 加上js，可以使js和html分离开来
        filename: 'js/[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

传参，指向根目录的index.html

plugins插件打包后的引用，但是并非是根目录下的index

使用plugins插件

当ertry是多个的时候，output设置不能写死filename，需要使用name  or hash  or chunkhase等占位符来配置filename，以免导致信息覆盖

如果使用hash每次构建完成后，输入的filename都不一样了，这个时候需要动态的配置index.html里面的js文件引入，这是就需要用到一个给力的plugin  及是：html-webpack-plugin

html-webpack-plugin

使用html-webpack-plugin（插件），解决html中引用的文件名称为随机的时候，自动生成与之对应的随机文件名称。

先通过命令行安装npm install html-webpack-plugin --save-dev

使用插件时的，其他参数配置：

npm install html-webpack-plugin --save-dev，这个插件用来解决html中引用的文件名称为随机的时候，自动生成与之对应的随机文件名称。Easily create HTML files to serve your bundles

webpack.config.js

plugins:[

     new htmlWebpackPlugin({

         filename: 'asset/index-[hash].html',

           template: './src/index.html',

          inject: 'head'

     })

]

new htmlWebpackPlugin({    filename: 'index-[hash].html',    template: 'index.html'    inject: 'head'})

filename，inject

https://github.com/jantimon/html-webpack-plugin#configuration

filename: 设置 htmlWebpackPlugin 输出 html 文件的文件名，可以使用占位符 [hash]

reject: 设置打包 js 文件注射的位置，默认插入到 body 最后，设为 head 则插入到 head 最后

new htmlWebpackPlugin({
	filename: 'index-[hash].html',
	template: 'index.html'
	inject: 'head'
})

new htmlWebpackPlugin({
    template: 'index.html'
})

webpack 输出的 index.html 文件以当前配置文件目录下的 index.html 为模版插入打包好的资源

关于路径 和运行上下文 context 属性相关，解析入口文件 entry 和 loaders 的路径，需要设为绝对路径，默认为当前配置文件下的目录。推荐设置。

The base directory, an absolute path, for resolving entry points and loaders from configuration.

context: path.resolve(__dirname, "app")

By default the current directory is used, but it's recommended to pass a value in your configuration. This makes your configuration independent from CWD (current working directory).

plugins: [
    new htmlWebpackPlugin()
]

默认在 output.path 目录下生成一个 index.html 的h5文件，该文件将打包好的 js 文件在 body 下通过 script 标签引入

The plugin will generate an HTML5 file for you that includes all your webpack bundles in the body using script tags. 

If you have any CSS assets in webpack's output (for example, CSS extracted with the ExtractTextPlugin) then these will be included with <link> tags in the HTML head.

https://github.com/jantimon/html-webpack-plugin#configuration

但此时和根目录下自己写的 html 文件毫无关联，不符合项目需求...  需要以自己写的 html 文件为模版，引入打包文件

 npm 本地安装 html-webpack-plugin 插件后，在 webpack.dev.config.js 中配置 webpack 

var htmlWebpackPlugin = require('html-webpack-plugin');

先建立对插件的引用，commonjs 模块引用的写法

plugins 对应值为一个数组

如果要在 webpack 中使用插件，只需要在 webpack 的配置对象中增加一个 plugins 属性，值为数组类型，插件初始化（看插件自身的实现）

需求背景： webpack 生成的打包文件 [name]-[hash].js 的文件名是不确定的，是否需要每次修改 index.html 中 js 引入的文件名？ —— 利用 webpack 插件解决这个问题： 使用 html-webpack-plugin，先用 npm 本地开发安装 npm i html-webpack-plugin -D