Question

我正在使用html-webpack-plugin来使用模板index.html文件（也使用html-loader）。一切都在npm run build呈现。输出的index.html都很好，但是当我在浏览器中打开它时，标签中的所有内容都被替换为除脚本之外的空HTML注释。如果我刷新，我可以看到HTML元素半秒钟，然后它们就会消失。

有什么想法吗？我可以添加任何帮助回答所需的代码。

Webpack配置：

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

// import autoprefixer from 'autoprefixer';

const uglifyJS = new UglifyJSPlugin({
  mangle: true,
  compress: {
    warnings: false // Suppress uglification warnings
  },
  sourceMap: false,
  exclude: [/\.min\.js$/] // skip pre-minified libs
});

module.exports = {
  entry: {
    app: './src/scripts/index.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: '/dist'
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      filename: '../index.html',
      template: './src/html/srcindex.html',
      minify: {
        collapseWhitespace: true
      }
    }),
    uglifyJS
  ],
  module: {
    rules: [
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        test: /\.sass/,
        use: [{
          loader: 'css-loader',
          options: { minimize: true }
        },
        {
          loader: 'sass-loader'
        }]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: ['es2015'],
            plugins: ['syntax-dynamic-import']
          }
        }]
      },
      {
        test: /\.(jpe?g)|png|gif|svg$/,
        use: [
          {
            loader: 'url-loader',
            options: { limit: 40000 }
          },
          'image-webpack-loader'
        ]
      }
    ]
  }
};

srcindex.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Squash Tomato - Shopping Lists Made Easy</title>
  <link rel="shortcut icon" type="image/png" href="/Squashtomato_tomato.png">
  <meta name="description" content="A budget grocery list">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
  <!-- Google Analytics-->
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-96850423-1', 'auto');
    ga('send', 'pageview');
  </script>
</head>
<body>
  <div id="app" class="fluid-container">
    <!-- Title Section-->
    <section class="hero">
      <div class="hero-body">
        <div class="container">
          <h1 class="title">Shopping List</h1>
        </div>
      </div>
    </section>
    <!-- List Section-->
    <section class="section">
      <div class="container">
        <!-- Control container to handle form controls *B-->
        <div class="field has-addons has-addons-centered">
          <p class="control">
            <!-- List Item Entry-->
            <input autofocus="" placeholder="bananas" v-model="newTodo" @keyup.enter="addTodo" class="input is-focused is-medium"/>
          </p>
          <!-- Item Entry + Button-->
          <p class="control"><a @click="addTodo" class="button is-warning is-medium">+</a></p>
          <!-- List Clear Button-->
          <p class="control"><a @click="clearTodos" class="button is-danger is-medium">CLEAR</a></p>
        </div>
      </div>
      <ul class="list">
        <li v-for="todo in todos" :class="{done: todo.completed, editing: todo == editedTodo}" class="field has-addons has-addons-centered">
          <!-- Editable Input (hidden)-->
          <div class="control">
            <input v-model="todo.title" v-todo-focus="todo == editedTodo" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)" @keyup.esc="cancelEdit(todo)" class="editingInput input is-danger is-medium"/>
          </div>
          <!-- List Item Label-->
          <p class="item-name control is-normal">
            <label :class="{ 'is-success': !todo.completed }" @dblclick="editTodo(todo)" class="input is-medium">{{ todo.title }}</label>
          </p>
          <!-- Value Entry-->
          <div class="control">
            <input :class="{ 'is-success': !todo.completed }" placeholder="$$$" :value="todo.value" v-model="todo.value" @focus="clearInput" class="item-value input is-medium"/>
          </div>
          <!-- Complete Button-->
          <p class="control"><a @click="filterAndComplete(todo)" class="button is-warning is-medium">✓</a></p>
          <!-- Delete Button-->
          <p class="control"><a @click="removeTodo(todo)" class="button is-danger is-medium">X</a></p>
        </li>
        <!-- End individual Item-->
      </ul>
      <!-- End list-->
      <div class="total field">
        <p class="control">
          <label class="input is-focused is-large is-disabled">Total: ${{ total }}</label>
        </p>
      </div>
    </section>
    <!-- End List Section-->
  </div>
  <!-- End application div -->
  <script src="https://unpkg.com/vue"></script>
</body>
</html>

Html-webpack-plugin模板文件正在被忽略

0 个答案: