Question

我使用webpack运行我的vue应用程序，它使用webpack-simple模板。我的webpack设置是：

    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',  // 由于将index.html打包至dist下，生产环境设为'/'
        filename: 'build.js'
    },
    plugins: [new HtmlWebpackPlugin()]

originHtml：

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_9remcre60b3dte29.css">
    <title>earease</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

generateHtml：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>earEase</title>
  </head>
  <body>
  <script type="text/javascript" src="/dist/build.js"></script></body>
</html>

为什么css和meta标签没有注入生成的html文件？

Answer 1

您的网络包没有抓取原始的html模板。它只是生成一个新的，您可以通过输出html上的<title>标记看到。

更改您的配置，以便HTMLWebpackPlugin可以读取模板文件：

{
  ...
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',
      filename: 'assets/admin.html'
    })
  ]
}

html-webpack-plugin不会将css和meta标记注入生成文件

1 个答案: