[js高手之路]深刻浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)

时间 2019-12-11

标签高手之路深刻 webpack 教程系列插件使用 html plugin 配置栏目 JavaScript 繁體版

原文原文链接

还记得咱们上文中的index.html文件吗? 那里面的script标签仍是写死的index.bundle.js文件，那么怎么把他们变成动态的index.html文件，这个动态生成的index.html文件会动态引入咱们打包后生成的js文件呢？，咱们可使用插件html-webpack-plugin，首先安装这个插件npm install html-webpack-plugin --save-dev，好的，接下来就开始用这个插件了html

官方参考文档：webpack

插件通用用法：https://webpack.js.org/config...git

html-webpack-plugin插件用法：https://webpack.js.org/plugin...github

html-webpack-plugin插件配置：https://github.com/jantimon/h...web

1、首先，咱们须要在配置文件webpack.dev.config.js中，引入插件npm

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry : {
        main : './src/js/main.js',
        calc : './src/js/calc.js'
    },
    output : {
        //__dirname，就是当前webpack.config.js文件所在的绝对路径
        path : __dirname + '/dist', //输出路径，要用绝对路径
        filename : '[name]-[hash].bundle.js' //打包以后输出的文件名
    },
    plugins: [new HtmlWebpackPlugin()]
};

而后执行npm run d打包命令，就能在dist目录下动态生成index.html文件，并且引入了2个动态打包生成的js文件，这个时候刷新index.html文件，就能看到js函数执行的结果了函数

2、可是，这个在dist目录下面新生成的html文件，跟咱们的项目目录(demo2)下面的index.html文件并无任何关联，显然不符合实际的项目需求，那咱们想要的结果应该是根据demo2下面的index.html这个文件，为模板生成dist目录下面的index.html文件，这样就把两个文件创建起了关联，咱们只须要在配置文件webpack.dev.config.js中，给html-webpack-plugin的构造函数传入template模板便可ui

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry : {
        main : './src/js/main.js',
        calc : './src/js/calc.js'
    },
    output : {
        //__dirname，就是当前webpack.config.js文件所在的绝对路径
        path : __dirname + '/dist', //输出路径，要用绝对路径
        filename : '[name]-[hash].bundle.js' //打包以后输出的文件名
    },
    plugins: [new HtmlWebpackPlugin(
        {
            template : './index.html'
        }
    )]
};

template:就是以demo目录下的这个index.html文件为模板生成dist/index.html文件，而后执行npm run d打包命令就能从新生成了

3、可是还有个小问题，咱们上面打包生成的index.html文件和js文件是在同一个目录，在大型项目里面管理确定很混乱，咱们但愿生成的.html文件和js文件分开存放，咱们能够在webpack.dev.config.js文件中的filename配置中，加一个目录js（js文件放在这个目录下面），把他们分开就能够了，配置完了，不要忘记执行打包命令(npm run d)spa

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry : {
        main : './src/js/main.js',
        calc : './src/js/calc.js'
    },
    output : {
        //__dirname，就是当前webpack.config.js文件所在的绝对路径
        path : __dirname + '/dist', //输出路径，要用绝对路径
        filename : 'js/[name]-[hash].bundle.js' //打包以后输出的文件名
    },
    plugins: [new HtmlWebpackPlugin(
        {
            template : './index.html'
        }
    )]
};

4、插件的配置选项：inject与filename
webpack.dev.config.js配置文件:插件

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry : {
        main : './src/js/main.js',
        calc : './src/js/calc.js'
    },
    output : {
        //__dirname，就是当前webpack.config.js文件所在的绝对路径
        path : __dirname + '/dist', //输出路径，要用绝对路径
        filename : 'js/[name]-[hash].bundle.js' //打包以后输出的文件名
    },
    plugins: [new HtmlWebpackPlugin(
        {
            template : './index.html',
            filename : 'index-[hash].html',
            inject : 'head'
        }
    )]
};

filename：打包生成的文件名，还能够加目录，默认没有写的时候是index.html

inject：有4个值: true | 'head' | 'body' | false

若是设置为head, 就是把js引入放在head标签里面, 若是设置为body，就是把js引入放在body里面， false: 不会引入js文件 true:引入js文件

5、插件的选项：title

title: 模板的标题

webpack.dev.config.js配置文件代码:

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry : {
        main : './src/js/main.js',
        calc : './src/js/calc.js'
    },
    output : {
        //__dirname，就是当前webpack.config.js文件所在的绝对路径
        path : __dirname + '/dist', //输出路径，要用绝对路径
        filename : 'js/[name]-[hash].bundle.js' //打包以后输出的文件名
    },
    plugins: [
        new HtmlWebpackPlugin({
            template : './index.html',
            title : 'ghostwu教你学webpack',
            inject : true
        })
    ]
};

而后，在demo2目录下面的index.html文件中用ejs模板语法引入title

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html>

注意是：htmlWebpackPlugin.options.title，不要把html的h大写，千万注意，我在这里踩了很久的坑