npm init 創建 package.json
npm install --save-dev html-webpack-plugin
生成 package.json
{
"name": "html-webpack-plugin-test",
"version": "1.0.0",
"description": "",
"main": "test.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^2.30.1"
}
}創建 test.js
console.log("this is just a test ...");創建 webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var webpackConfig = {
entry: './test.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin({
title:"test file",
minify:false
})]
};
module.exports = webpackConfig;執行 webpack --config webpack.config.js
在dist中生成 index.html,index_bundle.js
index.html 如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test file</title> </head> <body> <script type="text/javascript" src="index_bundle.js"></script></body> </html>