0

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

  1. 我启动了一个新项目vue init webpack-simple#1.0 vue-html-webpack
  2. 安装npm i -D html-webpack-plugin
  3. 重命名index.html为entry-template.html
  4. 配置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>

完整来源在这里

结果-> https://vue-html-webpack-ogqlguavxx.now.sh/

问题

如何在 Vue 1.0中使用HtmlWebpackPlugin ？

4

2 回答 2

1

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

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

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

有关语法的详细信息，请参阅有关加载程序顺序和覆盖它们的文档。

更新：

这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>
于 2016-09-04T19:47:44.317 回答
1

在阅读了这里的答案和大约两天的研究后，在同一个问题上，事实证明这个问题与 webpack-development-server 不将文件写入本地文件系统而是写入其文件的事实有关仅限记忆。

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

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 写入内存而不是本地文件系统）。

您可以看到这个 StackOverflow 问题在使用基本 Vue.js Webpack 项目时也遇到了问题： html-webpack-plugin not injection js file into index.html when using webpack-dev-server

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

“如果我运行webpack或npm run build，js文件注入成功。html-webpack-plugin是否也可以在我在localhost时将js文件注入index.html？”

于 2017-01-03T20:29:20.493 回答