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/，效果以下：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。