码迷,mamicode.com
首页 > Web开发 > 详细

webpack html-webpack-plugin

时间:2017-11-24 17:06:13      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:webpack   html-webpack-plugi   

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>




webpack html-webpack-plugin

标签:webpack   html-webpack-plugi   

原文地址:http://blog.51cto.com/antlove/2043919

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!