Webpack入门教程十三

时间：2017-02-20 14:09:23 阅读：213 评论：0 收藏：0 [点我收藏+]

67.HtmlWebpackPlugin插件的配置项-inject使用,修改webpack.config.js文件

var webpack = require(‘webpack‘);
var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);

module.exports = {
	entry:  __dirname + "/app/Greeter.js",
	output: {
		path: __dirname + "/build",
		filename: "bundle.js"
	},
	devServer:{
		contentBase:"./public",
		historyApiFallback:true,
		inline:true
	},
	module:{
		loaders:[
			{
				test:/\.json$/,
				loader:"json-loader"
			},
			{
				test:/\.js$/,
				exclude:/node_modules/,
				loader:‘babel-loader‘
			},
			{
				test:/\.css$/,
				loader:‘style-loader!css-loader?modules‘
			}
		]
	},
	plugins:[
		new webpack.BannerPlugin("copyright suyan"),
		new HtmlWebpackPlugin({
			template:__dirname + "/app/index.tmpl.html",
			title:‘htmlwebpackplugin filename test‘,
			filename:‘filename.html‘,
			inject:‘head‘
		})
	]
}

说明

当inject的值设置为head时,所有JavaScript资源插入到head元素中

68.编写index.tmpl.html文件

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title><%= htmlWebpackPlugin.options.title %></title>
	<link rel="stylesheet" href="">
</head>
<body>
	<div id="root"></div>
</body>
</html>

69.使用webpack命令进行打包

70.查看生成的目录结构和生成的filename.html文件

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>htmlwebpackplugin filename test</title>
	<link rel="stylesheet" href="">
<script type="text/javascript" src="bundle.js"></script></head>
<body>
	<div id="root"></div>
</body>
</html>

说明

在webpack.config.js文件中配置了inject:‘head‘,再查看filename.html文件,在<head>标签中可以看到生成的引用标签<scr
ipt type="text/javascript" src="bundle.js">

71.修改webpack.config.js文件,将inject的值修改为true,修改内容如下

var webpack = require(‘webpack‘);
var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);

module.exports = {
	entry:  __dirname + "/app/Greeter.js",
	output: {
		path: __dirname + "/build",
		filename: "bundle.js"
	},
	devServer:{
		contentBase:"./public",
		historyApiFallback:true,
		inline:true
	},
	module:{
		loaders:[
			{
				test:/\.json$/,
				loader:"json-loader"
			},
			{
				test:/\.js$/,
				exclude:/node_modules/,
				loader:‘babel-loader‘
			},
			{
				test:/\.css$/,
				loader:‘style-loader!css-loader?modules‘
			}
		]
	},
	plugins:[
		new webpack.BannerPlugin("copyright suyan"),
		new HtmlWebpackPlugin({
			template:__dirname + "/app/index.tmpl.html",
			title:‘htmlwebpackplugin filename test‘,
			filename:‘filename.html‘,
			inject:true
		})
	]
}

72.使用webpack命令打包

73.查看filename.html文件

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>htmlwebpackplugin filename test</title>
	<link rel="stylesheet" href="">
</head>
<body>
	<div id="root"></div>
<script type="text/javascript" src="bundle.js"></script></body>
</html>

说明

在webpack.config.js文件中配置了inject:true,生成了filename.html文件,在body标签中生成了script的引用<script ty
pe="text/javascript" src="bundle.js"></script>

74.将webpack.config.js文件中的inject设置为false,修改内容如下

var webpack = require(‘webpack‘);
var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);

module.exports = {
	entry:  __dirname + "/app/Greeter.js",
	output: {
		path: __dirname + "/build",
		filename: "bundle.js"
	},
	devServer:{
		contentBase:"./public",
		historyApiFallback:true,
		inline:true
	},
	module:{
		loaders:[
			{
				test:/\.json$/,
				loader:"json-loader"
			},
			{
				test:/\.js$/,
				exclude:/node_modules/,
				loader:‘babel-loader‘
			},
			{
				test:/\.css$/,
				loader:‘style-loader!css-loader?modules‘
			}
		]
	},
	plugins:[
		new webpack.BannerPlugin("copyright suyan"),
		new HtmlWebpackPlugin({
			template:__dirname + "/app/index.tmpl.html",
			title:‘htmlwebpackplugin filename test‘,
			filename:‘filename.html‘,
			inject:false
		})
	]
}

说明

当前inject设置为false时,所有静态资源css和JavaScript都不会注入到模板文件中

75.使用webpack命令打包

76.查看生成的filename.html文件,内容如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>htmlwebpackplugin filename test</title>
	<link rel="stylesheet" href="">
</head>
<body>
	<div id="root"></div>
</body>
</html>

说明

当前inject设置为false时,所有静态资源css和JavaScript都不会注入到模板文件中

本文出自 “素颜” 博客，请务必保留此出处http://suyanzhu.blog.51cto.com/8050189/1899411

Webpack入门教程十三

原文：http://suyanzhu.blog.51cto.com/8050189/1899411

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)