您的位置：首页 > Web前端 > HTML

自动化生成项目中的html页面(上)

2017-03-04 16:38 417 查看

前面我们学习了webpack配置文件

webpack.config.js

的相关配置，我们知道我们可以通过修改其

output

项，来设置最后打包的文件名称。

module.exports = {
entry:['./src/script/main.js'],
output:{
path:'./dist/js',
filename:'[name]-[chunkhash].js'
}
}

比如上面这个配置，最后打包的文件名就是随机的。

那么问题来了，之前我们是在html模板上写死的文件名，这下怎么办呢？

<script src="bundle.js"></script>

借助webpack的一个插件就可以解决

1、安装这个插件

npm install html-webpack-plugin --save-dev

2、安装完成，使用

官网上关于使用插件的文档：

https://webpack.js.org/concepts/plugins/#usage

//引入插件
var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry:['./src/script/main.js'],
output:{
path:'./dist/js',
filename:'[name]-[chunkhash].js'
},
plugins:[
new htmlWebpackPlugin()
]
}

3、执行webpack打包，我们发现在

dist/js

目录下不仅生成了我们编译之后的js文件

main-hash值.js

，还生成了一个

index.html

模板文件。这个html模板文件，已经引入了我们编译之后的js了。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script type="text/javascript" src="main-d0c207a8377feb008582.js"></script></body>
</html>

建立联系

但是

dist/js/

目录下的index.html，并不是我们定义在根目录下的index.html，这不满足我们的项目需求。

我们需要给html-webpack-plugin插件传递一个参数：

plugins:[
new htmlWebpackPlugin({
template:'index.html'
})
]

指定使用我们根目录下的index.html模板(打包之后的html模板以此为基础)。

我们再次打包，发现现在

dist/js/

下的index.html模板有些不同了：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"
<title>webpack-test</title>
</head>
<body>
<script src="bundle.js"></script>
<script type="text/javascript" src="main-d0c207a8377feb008582.js"></script></body>
</html>

相当于是在我们根目录index.html里插入了

<script type="text/javascript" src="main-d0c207a8377feb008582.js"></script>

。

我们修改根目录下的index.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"
<title>根目录下的html</title>
</head>
<body>
</body>
</html>

然后再次执行webpack打包命令，查看编译之后的模板

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"
<title>更目录下的html</title>
</head>
<body>
<script type="text/javascript" src="main-d0c207a8377feb008582.js"></script></body>
</html>

这样，其实编译之后的html就和我们自己的index.html模板建立联系了

我们不想把编译之后的index.html放在dist/js目录下

我们

dist/js

目录下只想要js文件，html文件我们希望放到

dist

目录下。

修改webpack.config.js中的

output

项：

output:{
path:'./dist',
filename:'js/[name]-[chunkhash].js'
},

html-webpack-plugin插件的其他几个参数

html-webpack-plugin插件传递参数，除了

template

外，还有其他一些参数

plugins:[
new htmlWebpackPlugin({
template:'index.html',
filename:'index-[hash].html', //文件名
inject:'head', //插入到html的head标签中
})
]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航