Question

我尝试使用HtmlWebPackPlugin生成我的index.html所以......

我创建了一个新项目vue init webpack-simple#1.0 vue-html-webpack
安装npm i -D html-webpack-plugin
将index.html重命名为entry-template.html
配置webpack.config.js ..

我添加..

  plugins: [
      new HtmlWebpackPlugin({
        template: 'entry-template.html',
        environment: process.env.NODE_ENV
      })
    ],

但是，我启动了应用npm run dev，然后返回404（我想是找不到index.html）

我的entry-template.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>GitSkills</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

完整source here

结果 - ＆gt; https://vue-html-webpack-ogqlguavxx.now.sh/

问题

如何将HtmlWebpackPlugin用于Vue 1.0？

Answer 1

HtmlWebpackPlugin使用全局配置的加载器来处理未定义的模板。在您的情况下，这会导致vue-html-loader处理您的entry-template.html。可能这就是原因，你的模板html没有正确处理。请查看有关处理程序处理方式的docs for the HtmlWebpackPlugin。

指定加载器是否直接适用于您的情况？

plugins: [
  new HtmlWebpackPlugin({
    template: '!!html!entry-template.html',
    environment: process.env.NODE_ENV
  })
],

有关语法的详细信息，请参阅docs about loaders order并覆盖它们。

更新：

vue-html-loader是原始html-loader的扩展，似乎不会导致此问题。从您的webpack输出中，我看到您正在使用publicPath属性来控制在提供内容时使用的基本路径。这不是磁盘上文件的路径，而是url中应该从中提供内容的路径。因此，当您访问localhost:8080/dist时，您的设置已经有效。省略publicPath属性使其从根路径服务。

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'build.js'
  },
  ...

此外，在使用路由器时，您应该在模板中添加路由器插座，以便模板的内容（例如登录）可以包含在主模板中（我猜是app）。

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
    <router-view></router-view>
  </div>
</template>

Answer 2

在阅读了这里的答案和大约两天的研究之后，在同样的问题上，事实证明这个问题与webpack-development-server没有将文件写入本地文件系统的事实有关。将其文件写入 MEMORY ONLY 。

你应该能够在运行默认的webpack构建命令时使用Html-Webpack-Plugin正确生成文件（不 WDS / Webpack-Development-Server）：

webpack

请记住，您必须位于项目目录中。或者对于那些使用vue.js Webpack-simple项目（https://github.com/vuejs-templates/webpack-simple/tree/master/template）的人来说，你可以使用Vue.js样本附带的npm脚本（位于你的package.json中）通过：

npm run build

如果一切顺利，您会注意到文件是按照您认为的那样写入目录，但不是，当使用Webpack-Development-Server时（再次这不起作用，因为WDS写入内存和不是本地文件系统。）

使用基础Vue.js Webpack项目时，您可以看到此StackOverflow问题也遇到问题： html-webpack-plugin not inject js file into index.html when using webpack-dev-server

自从用户提到以来，我在阅读上述问题时偶然发现了这个答案：

＆＃34;如果我运行webpack或npm run build，则会成功注入js文件。当我在localhost中时，html-webpack-plugin是否也会将js文件注入index.html？＆＃34;

Vue + html-webpack-plugin没有加载index.html生成

问题

2 个答案: