webpack 加载html模板,webpack 的htmlwebpackplugin使用自定义模板

htmlwebpackplugin这个插件可以用来生成静态的html文件。默认内部是通过后台来生成一个html的文件。当然也可以自己使用自己的文件来生成模板。可以支持.html文件。也可以使用其他类型的模板。例如ejs。而ejs简单方便。很适合来生成我们所需的静态文件。

htmlwebpackplugin的基本用法如下：

首先需要在webpack的配置中require进来或者用es6的import：

const HtmlWebpackPlugin = require(\'html-webpack-plugin\');

然后在配置的plugins选项中引用插件：

new HtmlWebpackPlugin({}),

支持的选项在

注意：这样引入多个还是只会生成默认的index.html.所以需要多个不同的html时。每次引入都要单独的配置，引入html作为模板很简单。只需要提供相应的属性就可以。

newHtmlWebpackPlugin({

title:\'my first webpack\',

template:\'index.html\'})

然后是需要用ejs来生成需要的html文件，用ejs的话就需要相应的ejs-loader,否则你在ejs里面写会报错。因为他处理不了ejs类型文件。在module里面加上对ejs类型文件的处理即可：

module: {

rules: [

{test:/\\.ejs$/,use:[\'ejs-loader\']},

{ test:/\\.css$/, use: [\'style-loader\', \'css-loader\'] },

{ test:/\\.(gif|png|svg|jpg)/, use: [\'file-loader\'] }

]

}

然后在htmlwebpackplugin的配置里面加上如下配置：

newHtmlWebpackPlugin({

//title

title:\'my first webpack\',

//模板所在位置

template:\'index.ejs\',

//其他任意数据

name:\'123124\',

data:\'454564457\'})

在index.ejs里面如下：

使用webpack编译生成文件如下：

my first webpack

123124

454564457