[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大寫，千萬注意，我在這裏踩了很久的坑