html4模板,webpack4.x实战三，html模板

怎么动态的生成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内容

webpack 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

复制代码

执行命令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模板中变量调用方法

思考:

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

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