webpack 浅析-- htmlWebpackPlugin 插件

htmlWebpackPlugin  可以自动的创建 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'],//指定

            })
        ]
    }