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

自动化生成项目中的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页面(中)

上一篇:Floyd算法求每对顶点间最短路径(有向网)


下一篇:Vue-cli4+HbuilderX打包android+ios应用