四.webpack自动生成项目中的HTML文件

webpack自动生成项目中的HTML文件

1.HTML插件的使用

安装插件
npm install html-webpack-plugin –save-dev

配置webpack.config.js
安装完成后需要在webpack.config.js中引用并且初始化插件，具体的可以查看
API： http://webpack.github.io/docs/using-plugins.html
Npm插件详解：https://www.npmjs.com/package/html-webpack-plugin

//引用webpack.config.js插件
var htmlWebpackPlugin = require('html-webpack-plugin');

//模块化输出
module.exports = {
      //入口文件,这里采用entry对象的方式，分别将main.js和hellow.js打包
    entry:{
        main:'./src/script/main.js',
        hello:'./src/script/hellow.js'
    },
    // 打包后的文件
    output:{
        //打包后文件在./dist/js的文件夹中
        path:__dirname+'/dist/js',
        //打包后文件的名称为entry的chunk名称-编译的哈希值
        filename:'[name]-[hash].js'
    },
    //插件数组
    plugins:[
        //初始化插件
        new htmlWebpackPlugin()
    ]
}

编译打包

会自动在output.path的路径下生成index.html
结果：

dist中的index.html是自动生成的，已经自动引入了打包后的js文件，内容为

在项目中生成HTML文件—案例1

2.以模板生成HTML

在上面的例子中会自动生成index.html，但是在大的项目中我们的index.html需要引入许多的js文件，所以我们可以在引入插件初始化时插入模板参数，那么就会自动生成以模板为基本的HTML文件，并且自动引入打包后的js文件了。
例如：
wbepack.config.js的配置:

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

    module.exports = { 
        //执行上下文，默认为webpack.config.js所在的文件夹
        // context：
        entry:{
            main:'./src/script/main.js',
            hello:'./src/script/hellow.js'
        },
        output:{
            path:__dirname+'/dist/js',
            filename:'[name]-[hash].js'
        },
        //插件数组
        plugins:[
        //初始化插件,传递模板参数
        new htmlWebpackPlugin({
                //模板为同级目录下的index.html，为何不用写路径，是因为默认上下文问webpack.config.js所在的文件夹
                    template:'index.html'
            })
        ]
    }

我们的根目录下的index.html

编辑运行：

结果：
会根据output.path生成index.html文件，

在项目中生成HTML文件—案例2

3.改变生成HTML的位置

在上面的例子中，生成的HTML和js是放在一起的，会非常的不方便，所以我们可以改变output.path

    output:{
        path:__dirname+'/dist',
         //注意写法
        filename:'js/[name]-[hash].js'
    }

运行后结果为：
这样一来自动生成的index.html就会在dist目录下，而打包的js文件将在dist/.js目录下

在项目中生成HTML文件—案例3

4.初始化HTML插件的详解

Npm插件详解：https://www.npmjs.com/package/html-webpack-plugin

1.简介html插件的options参数

具体可以看详解的configuration部分
Webpack.congif.js: