webpack-1之html-webpack-plugin使用

下载依赖

• npm i webpack webpack-cli --save-dev
• npm i html-webpack-plugin -D

创建文件

• package.json

1. 配置npm-scripts: build: 'webpack'

• webpack.config.js

1. 贴代码

const path = require('path')
//一开始使用插件的时候忘记引入了
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: {
        app: path.resolve(__dirname, './src/demo1/app.js'),
        home: path.resolve(__dirname, './src/demo2/index.js'),
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        //需要加hash这么书写
        filename: `[name][hash:6].js`
    },
    plugins:[
        new HtmlWebpackPlugin({
            title: "ch",
            // 从根目录开始
            template: './src/index.html',
            // 从output.path开始这里存在dist目录下
            filename: 'ch/index.html',
            // 去掉html中的空格，缩减空间
            minify: {
                collapseWhitespace: true,
            },
            // 生成hash，有利于缓存？？？
            hash: true,
            // 在多入口下使用，因为默认会把所有的入口文件都通过<script>引入，chunk是指定哪些文件打包进来
            chunks: ['app'],
            // 同上相反
            excludeChunks: ['home'],
            // 将<script>文件摆放在head还是body位置，【head】在head处，【body|true】在body下面
            inject: 'head'
        }),
        //可以配置多个文件
        new HtmlWebpackPlugin({
            title: 'xyz',
            template: './src/index.html',
            //两种写法，和xyz/index.html效果一样
            filename: './xyz/index.html'
        })
    ],
    mode: 'development'
}

2. 设置动态title属性，需要在模版html做相对应的修改

<title><%= htmlWebpackPlugin.options.title %></title>

3. 参考文章1
4. 参考文章2