html-webpack

html-WebpackPlugin 可以自动的创建 html 文件 动态的引用文件名包含 hash 值得文件
1，使用 npm install html-webpack-plugin --save-dev 安装插件
2，在配置文件中的使用
引用插件
var htmlWebpackPlugin = require('html-webpack-plugin');
插件简单的配置
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//打包的入口从哪个文件开始
// 1、可以指定一个入口文件
//entry:"./src/script/main.js'",
// 2、可以是一个数组 几个平行的互相依赖的文件打包在一起
//entry:["./src/script/main.js","./src/script/a.js"],
// 3、可以是一个对象，多页面下的js文件打包
entry: {
main: './src/script/main.js',
a: './src/script/a.js',
b: './src/script/b.js',
c: './src/script/c.js'
},
//打包后输出的文件存放地址
output: {
path: './dist',//存放路径
filename: '/js/[name]+[hash].js'//打包后文件名
},
//插件
plugins:[
new htmlWebpackPlugin({
// 输出的文件名称 默认index.html 可以带有子目录
// filename: './dist/index.html',
filename: './entry/index.html',
// 源文件
template: 'index.html',
// 注入资源
//inject: true,
inject:'head',
title:'hello webpack',
chunks:['main'],//指定chunks 为 main 的js
}),
new htmlWebpackPlugin({
// 输出的文件名称 默认index.html 可以带有子目录
// filename: './dist/index.html',
filename: './entry/a.html',
// 源文件
template: 'index.html',
// 注入资源
//inject: true,
inject:'head',
title:'hello webpack',
chunks:['a'],//指定chunks 为 a 的js

        }), new htmlWebpackPlugin({
            // 输出的文件名称 默认index.html 可以带有子目录
            // filename: './dist/index.html',
            filename: './entry/b.html',
            // 源文件
            template: 'index.html',
            // 注入资源
            //inject: true,
            inject:'head',
            title:'hello webpack',
            chunks:['b'],

        }), new htmlWebpackPlugin({
            // 输出的文件名称 默认index.html 可以带有子目录
            // filename: './dist/index.html',
            filename: './entry/c.html',
            // 源文件
            template: 'index.html',
            // 注入资源
            //inject: true,
            inject:'head',
            title:'hello webpack',
            chunks:['c'],//指定

        })
    ]
}