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

艾文达

已于 2022-01-26 09:54:40 修改

阅读量309

点赞数

文章标签：自动化 html webpack

于 2022-01-24 15:50:18 首次发布

本文链接：https://blog.csdn.net/weixin_46392266/article/details/122111689

版权

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

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

<script src="dist.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文件main-hash值.js，还生成了一个index.html模板文件。这个html模板文件，已经引入了我们编译之后的js了。

//html模板文件
<!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/目录下的index.html，并不是我们定义在根目录下的index.html，这不满足我们的项目需求。

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

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

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

我们再次打包，发现现在dist/下的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({
            //注意传的参数是一个对象
            filename:'index-[hash].html',  //打包好的html名称
            template:'index.html',   //传一个模板，就是根目录下的index.html
            inject:'head', // script标签的插入位置  head表示插入到html的head标签中
        })
    ]

inject: script标签的插入位置

注入选项。有四个选项值 true, body, head, false.

true：默认值，script标签位于html文件的 body 底部
body：script标签位于html文件的 body 底部（同 true）
head：script 标签位于 head 标签内
false：不插入生成的 js 文件，只是单纯的生成一个 html 文件

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

艾文达

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自动化生成项目中的html页面(上)

自动化生成项目中的html页面(上)那么问题来了，之前我们是在html模板上写死的文件名，这下怎么办呢？<script src="dist.js"></script>借助webpack的一个插件就可以解决1、安装这个插件npm install html-webpack-plugin --save-dev2、安装完成，使用官网上关于使用插件的文档：https://webpack.js.org/concepts/plugins/#usage//引入插件var ht
复制链接

扫一扫