webpack4.x实战三，html模板

最新推荐文章于 2024-05-11 06:06:06 发布

weixin_34259559

最新推荐文章于 2024-05-11 06:06:06 发布

阅读量696

点赞数 1

文章标签： webpack ViewUI

原文链接：https://juejin.im/post/5cd6fd14518825686b120710

版权

怎么动态的生成html文件呢？使用插件html-webpack-plugin。

html模板

安装插件 html-webpack-plugin

安装html-webpack-plugin

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

添加模板文件

在src目录下创建template目录，然后在template目录创建index.html文件

src目录结构

src
├── css
│   └── style.css
├── js
│   └── app.js
└── template
    └── index.html
复制代码

index.html内容

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>webpack html</title>
</head>
<body>
	<div id="app"></div>
</body>
</html>
复制代码

html-webpack-plugin使用

修改后webapack.config.js内容

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

module.exports = {
    mode: 'development',
    entry: './src/js/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/app.bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [{ loader: 'style-loader' }, { loader: 'css-loader' }]
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: './src/template/index.html'
        })
    ]
};
复制代码

plugins:webpack插件配置

new htmlWebpackPlugin({
    filename: 'index.html',
    template: './src/template/index.html',
})
复制代码

filename:打包后文件名称

template:模板文件路径

执行命令npm run webpack

浏览器访问 dist/index.html

向html模板传递参数

html-webpack-plugin其他参数

修改后webapack.config.js内容

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

module.exports = {
    mode: 'development',
    entry: './src/js/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/app.bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [{ loader: 'style-loader' }, { loader: 'css-loader' }]
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: './src/template/index.html',
            title: 'this is webpack title'
        })
    ]
};
复制代码

new htmlWebpackPlugin({
    filename: 'index.html',
    template: './src/template/index.html',
    title: 'this is webpack title'
})
复制代码

title:自定义参数

修改index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
	<div id="app"></div>
</body>
</html>
复制代码

执行命令npm run webpack

浏览器访问 dist/index.html

总结

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

html-webpack-plugin使用

var htmlWebpackPlugin = require('html-webpack-plugin');
复制代码

module.exports添加plugins，实例化htmlWebpackPlugin对象

plugins: [
    new htmlWebpackPlugin({
        filename: 'index.html',
        template: './src/template/index.html',
        title: 'this is webpack title'
    })
]
复制代码

filename:打包后文件名称

template:模板文件路径

其他参数:可以向html模板中传递参数，html模板中变量调用方法<%= htmlWebpackPlugin.options.title %>

思考:

如何分开打包css和js，生成不同的文件？

因为浏览器会缓存js和css，每次修改好了js和css，需要强制刷新浏览器；如何打包生成不同的文件名？

请查看webpack4.x实战四，js和css独立打包

weixin_34259559

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
webpack4.x实战三，html模板

怎么动态的生成html文件呢？使用插件html-webpack-plugin。html模板安装插件 html-webpack-plugin安装html-webpack-pluginnpm install --save-dev html-webpack-plugin添加模板文件在src目录下创建template目录，然后在template目录创建index.html文件src目录结构...
复制链接

扫一扫