使用html-webpack-plugin输出html文件,但是输出的html是中body内的元素全是空

枫s的思念
  • 2.4k

使用webpack打包vue文件的时候,使用html-webpack-plugin,index.html在输出后body内的元素变为空

input

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
        <link rel="icon" href="static/pic/logo.png" type="image/x-icon">
        <link rel="stylesheet" href="static/weui/weui.min.css">
        <link rel="stylesheet" href="static/index.css">
        <title>APP</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="./dist/vendor.js"></script>
        <script src="./dist/app.js"></script>
    </body>
    </html>

output

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>SPA</title>
      <link href="/dist/style.df241090c6a9e0a6bf26.css" rel="stylesheet"></head>
      <body>
      <script type="text/javascript" src="/dist/vendor.df241090c6a9e0a6bf26.js"></script><script type="text/javascript" src="/dist/app.df241090c6a9e0a6bf26.js"></script></body>
    </html>

html-webpack-plugin config

    const htmlWebpackPlugin = require('html-webpack-plugin');
    
        plugins: [
            new htmlWebpackPlugin({
                title:'SPA',
                filename: 'assets/index.html'
            })
        ],
回复
阅读 4.8k
1 个回答
F_意志力
  • 817

楼主配置貌似缺少了点

let conf = {
        filename: '', // 生成的html存放路径,相对于publicPath
        template: '', // html模板路径,
        inject: 'body', //js插入的位置,true/'head'/'body'/false
        minify: { //压缩HTML文件
            removeComments: true, //移除HTML中的注释
            collapseWhitespace: true, //删除空白符与换行符
            // 为了使GAEA能正确识别script, 保留引号
            // removeAttributeQuotes: true,
            minifyJS: true,
            removeScriptTypeAttributes: true,
            removeStyleLinkTypeAttributes: true
        } 

如果楼主想用模板的话,要指明templatePath的位置

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏