自动化生成项目中的html页面（中）

1.这篇主要讲如何查看插件中的一些信息，相比上一章，这章我们多了title和date，这是干什么用的呢？

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

module.exports = {
    entry: {
        main: './src/script/main.js',
        a: './src/script/a.js'
    },
    output: {
        path: __dirname + '/dist',//调整目录，项目生成在此文件夹下，这样index就会生成在dist目录下
        filename: 'js/[name]-[hash].js'//在js目录下生成js文件
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index-[hash].html',//生成文件名
            template: 'index.html',//调用的html模板
            inject:'head',//在头部放入脚本
            title:'webpack is good',//在index中我们会利用模板语法来导入title
            date: new Date()
        })
    ]
}

2.我们可以在index.html中填写类似模板字符串，让我们来看看渲染后的效果

<!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>
    <%= htmlWebpackPlugin.options.date %>
</body>
</html>

3.渲染后的结果：

<!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>webpack is good</title>

<script type="text/javascript" src="js/main-0c75942a825508121445.js"></script><script type="text/javascript" src="js/a-0c75942a825508121445.js"></script></head>
<body>
    Wed Aug 15 2018 11:08:29 GMT+0800 (CST)
</body>
</html>

4.同理，我们是不是可以来查看一下插件的参数呢?

index.html

<!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>
    <!-- 查看日期 -->
    <%= htmlWebpackPlugin.options.date %>
    <!-- 查看插件的参数 -->
    <% for(var key in htmlWebpackPlugin) { %>
        <%= key %>
    <% } %>
</body>
</html>

查看结果，我们知道了插件有files和options两个参数

<!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>webpack is good</title>

<script type="text/javascript" src="js/main-0c75942a825508121445.js"></script><script type="text/javascript" src="js/a-0c75942a825508121445.js"></script></head>
<body>
    <!-- 查看日期 -->
    Wed Aug 15 2018 11:30:02 GMT+0800 (CST)
    <!-- 查看插件的参数 -->
    
        files
    
        options
    
</body>
</html>

5.我们打印出了参数内的key和value，既然我们知道了key和value，其他很多事情就很容易了吧

<!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>webpack is good</title>

<script type="text/javascript" src="js/main-0c75942a825508121445.js"></script><script type="text/javascript" src="js/a-0c75942a825508121445.js"></script></head>
<body>
    <!-- 查看日期 -->
    Wed Aug 15 2018 13:18:43 GMT+0800 (CST)
    <!-- 查看插件的参数 -->
    
        files
    
        options
    
    <!-- 查看插件的参数内的属性 -->
    
        publicPath : ""
    
        chunks : {"main":{"size":23,"entry":"js/main-0c75942a825508121445.js","hash":"82ca7d792fd7a6b23323","css":[]},"a":{"size":14,"entry":"js/a-0c75942a825508121445.js","hash":"ef609b383ce569e49d38","css":[]}}
    
        js : ["js/main-0c75942a825508121445.js","js/a-0c75942a825508121445.js"]
    
        css : []
    
        manifest : 
    

    
        template : "/Users/qsk/webpack-demo/node_modules/html-webpack-plugin/lib/loader.js!/Users/qsk/webpack-demo/index.html"
    
        templateParameters : 
    
        filename : "index-[hash].html"
    
        hash : false
    
        inject : "head"
    
        compile : true
    
        favicon : false
    
        minify : false
    
        cache : true
    
        showErrors : true
    
        chunks : "all"
    
        excludeChunks : []
    
        chunksSortMode : "auto"
    
        meta : {}
    
        title : "\bwebpack is good"
    
        xhtml : false
    
        date : "2018-08-15T05:18:43.978Z"
    
</body>
</html>

关于更多的htmlWebpackPlugin信息，可以进入www.npmjs.com搜索htmlWebpackPlugin，给你们个地址吧：

https://www.npmjs.com/package/html-webpack-plugin

6:好了，既然知道了这些，结合实际情况，有些脚本是需要放在head中的，而有些是需要放在body中的，那么如何来实现呢？

6.1 HTML代码

<!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>
    <!-- 下面这行代码对应的是main文件打包生成以后的地址 -->
    <script src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>
</head>
<body>
    <script src="<%= htmlWebpackPlugin.files.chunks.a.entry %>"></script>
</body>
</html>

6.2 webpack.congfig.js，请记住，inject一定要设置成false

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

module.exports = {
    entry: {
        main: './src/script/main.js',
        a: './src/script/a.js'
    },
    output: {
        path: __dirname + '/dist',//调整目录，项目生成在此文件夹下，这样index就会生成在dist目录下
        filename: 'js/[name]-[hash].js'//在js目录下生成js文件
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index-[hash].html',//生成文件名
            template: 'index.html',//调用的html模板
            inject:false,//请大家注意，这里一定要改成false，不然默认会在head中又生成2个打包文件
            title:'webpack is good',//在index中我们会利用模板语法来导入title
            date: new Date()//模板中引用
        })
    ]
}

6.3查看打包后的结果，生成了对应的文件

<!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>webpack is good</title>
    <!-- 下面这行代码对应的是main文件打包生成以后的地址 -->
    <script src="js/main-0c75942a825508121445.js"></script>
</head>
<body>
    <script src="js/a-0c75942a825508121445.js"></script>
</body>
</html>

7: 如果我们的项目要上线，那么必然需要一个地址，这个地址就是publicPath

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

module.exports = {
    entry: {
        main: './src/script/main.js',
        a: './src/script/a.js'
    },
    output: {
        path: __dirname + '/dist',//调整目录，项目生成在此文件夹下，这样index就会生成在dist目录下
        filename: 'js/[name]-[hash].js',//在js目录下生成js文件
        publicPath: 'https://cdn.com'
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index-[hash].html',//生成文件名
            template: 'index.html',//调用的html模板
            inject:false,//请大家注意，这里一定要改成false，不然默认会在head中又生成2个打包文件
            title:'webpack is good',//在index中我们会利用模板语法来导入title
            date: new Date()//模板中引用
        })
    ]
}

8:打包后的代码

<!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>webpack is good</title>
    <!-- 下面这行代码对应的是main文件打包生成以后的地址 -->
    <script src="https://cdn.com/js/main-400692dc9fbc282da5d3.js"></script>
</head>
<body>
    <script src="https://cdn.com/js/a-400692dc9fbc282da5d3.js"></script>
</body>
</html>

9：项目要上线，必须要对文件进行压缩，这个时候我们就可以使用minify

https://github.com/kangax/html-minifier#options-quick-reference这个页面是对minify参数的指引，一定要去看看

这里就来简单的进行注释的删除和空格的删除

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

module.exports = {
    entry: {
        main: './src/script/main.js',
        a: './src/script/a.js'
    },
    output: {
        path: __dirname + '/dist',//调整目录，项目生成在此文件夹下，这样index就会生成在dist目录下
        filename: 'js/[name]-[hash].js',//在js目录下生成js文件
        publicPath: 'https://cdn.com'
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index-[hash].html',//生成文件名
            template: 'index.html',//调用的html模板
            inject:false,//请大家注意，这里一定要改成false，不然默认会在head中又生成2个打包文件
            title:'webpack is good',//在index中我们会利用模板语法来导入title
            date: new Date(),//模板中引用
            minify:{
                removeComments:true, //删除我们的注释
                collapseWhitespace:true //叠加我们的空格，叫删除空格吧
            }
        })
    ]
}

打包后的结果：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>webpack is good</title><script src="https://cdn.com/js/main-400692dc9fbc282da5d3.js"></script></head><body><script src="https://cdn.com/js/a-400692dc9fbc282da5d3.js"></script></body></html>

webpack入门第四节：自动化生成项目中的html页面（中）

自动化生成项目中的html页面（中）

猜你喜欢