首页 > Web开发 > 详细

webpack之html-webpack-plugin

时间:2017-02-10 11:34:38      阅读:338      评论:0      收藏:0      [点我收藏+]

html-webpack-plugin插件用于生成HTML入口文件。

html-webpack-plugin配置项:

title:生成html文档的标题。

filename:输出文件的文件名称,默认为index.html,还可以指定输出文件目录(html/index.html)。

template:本地模板文件的路径,支持加载器(如handlebars、ejs、undersore、html等)。

templateContent:指定模板的内容,不能与template共存,templateContent可以是一个字符串,可以是一个函数返回html字符串,也可以异步调用返回html字符串。

inject:true | ‘head‘ | ‘body‘ | false,注入所有资源到特定的template或templateContent中,如果设置为true或body,则所有的Javascript资源将被放置到body元素的底部,设置为head将放置到head元素中,设置为false表示所有的静态资源都不会被放置到模板中。

favicon:添加特定的 favicon 路径到输出的 HTML 文件中。

hash:true | false 表示是否给所有包含的js、css文件后面添加hash值,可以用来清除缓存,

chunks:用来指定生成的html文件需要包括哪些入口文件,如不设置则所以入口JS文件都会被引入进来。

如:入口文件有index.js\main.js\common.js,如果chunks不设置,则这几个入口文件都会被引入,如设置chunks:[‘index‘,‘main‘]则index.js\main.js文件会被引入。

配置单个html页面

/package.json

 

package.json文件部分内容
{
  "scripts": {
    "start": "webpack-dev-server --hot --inline"
  },
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.22.0",
    "css-loader": "^0.26.1",
    "file-loader": "^0.10.0",
    "html-webpack-plugin": "^2.28.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",  
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.3.0"
  }
}

 

/webpack.config.js

 

webpack.config.js文件

var
HtmlwebpackPlugin = require(html-webpack-plugin); module.exports = { entry: ./app/index.js, output: { path: dist/, filename: [name].js }, module: { loaders: [ { test: /\.css$/, loader: style-loader!css-loader }, { test: /\.(png|jpg)$/, loader: url-loader?limit=8192}, { test: /\.js$/, loader: babel-loader, exclude: /node_modules/ } ] }, plugins: [ new HtmlwebpackPlugin({ template: ./app/index.html, }) ], devServer: { historyApiFallback: true } };

app/index.js

require(./style.css);

app/style.css

h1{
    color: red;
}

app/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">   
    <title>模板文件</title>
</head>
<body>
    <h1>配置单个HTML文件</h1>
</body>
</html>

执行webpack命令生成dist目录及目录下的index.html,index.js文件,index.html内容引用的是./app/index.html下的内容。执行npm start命令启动http://localhost:8080/,效果如下:

技术分享

配置多个html页面

plugins: [
    new HtmlwebpackPlugin({     
      template: ./app/index.html, 
    }),
    new HtmlwebpackPlugin({
      filename: list.html,     
      template: ./app/list.html, 
    })
]

app/list.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">   
    <title>模板文件</title>
</head>
<body>
    <h1>配置多个HTML文件</h1>
</body>
</html>

执行webpack命令生成dist目录及目录下的index.html,list.html,index.js文件。执行npm start命令启动http://localhost:8080/,效果如下:

技术分享

技术分享

 

webpack之html-webpack-plugin

原文:http://www.cnblogs.com/kerry-xu/p/6384436.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!