webpack之html-webpack-plugin

时间 2019-11-11

标签 webpack html plugin 栏目 HTML 繁體版

原文原文链接

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

html-webpack-plugin配置项：html

title：生成html文档的标题。node

filename：输出文件的文件名称，默认为index.html，还能够指定输出文件目录（html/index.html）。webpack

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

templateContent：指定模板的内容，不能与template共存，templateContent能够是一个字符串，能够是一个函数返回html字符串，也能够异步调用返回html字符串。npm

inject：true | 'head' | 'body' | false，注入全部资源到特定的template或templateContent中，若是设置为true或body，则全部的Javascript资源将被放置到body元素的底部，设置为head将放置到head元素中，设置为false表示全部的静态资源都不会被放置到模板中。json

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

hash：true | false 表示是否给全部包含的js、css文件后面添加hash值,能够用来清除缓存，babel

chunks：用来指定生成的html文件须要包括哪些入口文件，如不设置则因此入口JS文件都会被引入进来。app

如：入口文件有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/，效果以下：