webpack- html-webpack-plugin

栏目: Html · 发布时间: 5年前

内容简介:如果你的是用vue-cli生成你的vue项目,意味着生成的项目的默认webpack配置几乎不需要做什么修改,你通过npm run build就能得到可以用于发布的/dist文件夹,里面包含着一个index.html文件和build出来的output文件。如果打开/dist/index.html文件,大概你看到的是类似于这样:这里值得注意的一点是,文件里面的index.65580a3a0e9208990d3e.js和main.3d6f45583498a05ab478.js,在每次执行简单地来说我们需要html

如果你的是用vue-cli生成你的vue项目,意味着生成的项目的默认webpack配置几乎不需要做什么修改,你通过npm run build就能得到可以用于发布的/dist文件夹,里面包含着一个index.html文件和build出来的output文件。如果打开/dist/index.html文件,大概你看到的是类似于这样:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Output Management</title>
</head>
<body>
<script type="text/javascript" src="index.65580a3a0e9208990d3e.js"></script>
<script type="text/javascript" src="main.3d6f45583498a05ab478.js"></script>
</body>
</html>

这里值得注意的一点是,文件里面的index.65580a3a0e9208990d3e.js和main.3d6f45583498a05ab478.js,在每次执行 npm run build 之后这两个文件的文件名里面的hash值是可能变化的,而我们不可能每次都手动去修改这个index.html文件所引用的文件的名字吧?所幸,有这么一个plugin能帮我们做这件事,他就是: html-webpack-plugin

简单地来说我们需要html-webpack-plugin能做2件事:

  • 生成用于发布的index.html文件
  • 自动替换每次build出来的output文件

说了那么多也是废话,直接看代码来得直接:

一:安装html-webpack-plugin

npm install --save-dev html-webpack-plugin

二:配置webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        index: './src/index.js',
        main: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[chunkhash].js',
    },
    plugins: [
        new HtmlWebpackPlugin({
        })
    ]
}

执行

npm run build

得到:

webpack- html-webpack-plugin

打开dist/index.html文件看下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
</head>
<body>
<script type="text/javascript" src="index.65580a3a0e9208990d3e.js"></script>
<script type="text/javascript" src="main.3d6f45583498a05ab478.js"></script>
</body>
</html>

在我们的webpack.config.js文件里,我们只是new HtmlWebpackPlugin({}),没有给HtmlWebpackPlugin任何参数。可以看到HtmlWebpackPlugin做了2件事:

1: HtmlWebpackPlugin会默认生成index.html文件, 放到我们的dist/目录下面

2:dist/index.html会自动更新我们每次build出来的文件

在进行更多的探讨之前,我们有必要来先看看现目前项目的结构:

webpack- html-webpack-plugin

可以看到截止到目前我们的项目里面是没有任何html源文件的。

三:添加源文件index.html

上一步呢我们只是new了一个没有任何参数的HtmlWebpackPlugin。其实HtmlWebpackPlugin有很多参数可以使用,下面我们介绍比较常用的几个。

1:我们先在项目的根目录下添加一个index.html源文件,里面的内容是:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>index.html source file</title>
</head>
<body>
</body>
</html>

2: 修改webpack.config.js,给HtmlWebpackPlugin添加参数:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        index: './src/index.js',
        main: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[chunkhash].js',
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'html/example.html',
            template: 'index.html'
        })
    ]
}

执行

npm run build

得到:

webpack- html-webpack-plugin

配置里面的:

new HtmlWebpackPlugin({
            filename: 'html/example.html',
            template: 'index.html'
        })

filename

filename可以配置最后生成的文件名字,甚至可以给一个带父文件夹路径的,比如这里的‘html/example.html’。

template

template可以配置最后的html文件的源文件。例如这里,我们使用根目录下的index.html,最后生成的dist/html/example.html文件其实是以这里的index.html为源文件的,这一点可以从dist/html/example.html和index.html的<title>一样看出来。

关于html-webpack-plugin更多的配置可以参考 它的github


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Java Concurrency in Practice

Java Concurrency in Practice

Brian Goetz、Tim Peierls、Joshua Bloch、Joseph Bowbeer、David Holmes、Doug Lea / Addison-Wesley Professional / 2006-5-19 / USD 59.99

This book covers: Basic concepts of concurrency and thread safety Techniques for building and composing thread-safe classes Using the concurrency building blocks in java.util.concurrent Pe......一起来看看 《Java Concurrency in Practice》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器