html-webpack-plugin child compilation syntax error

Question

I'm using html-webpack-plugin for my index.html, but when I run npm run build , I get the error:

ERROR in   Error: Child compilation failed:
  Module build failed: SyntaxError: Unexpected token )

It continues on with a trace about lodash and /lib/compiler.js within html-webpack-plugin.

I've looked through my index.html (hasn't been changed in awhile, especially since I added html-webpack-plugin, which I'll post below, but I can't find an error involving ')' if it exists. Any ideas on where this error may be?

<!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 grocery list without the need to sign up and is completely free.">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
  <link rel="stylesheet" href="dist/css/style.css">
</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>

Webpack config:

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({
      title: 'Squash Tomato',
      filename: '../index.html',
      template: 'src/html/srcindex.html',
      minify: {
        collapseWhitespace: true
      }
    }),
    uglifyJS
  ],
  module: {
    rules: [
      {
        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'
        ]
      }
    ]
  }
};

Answer 1

The answer is to add the following to webpack's config rules:

{
  test: /\.html$/,
  loader: 'html-loader'
}

html-webpack-plugin child compilation syntax error

Question

1 answers

solution1
0 2017-09-09 04:33:44

html-webpack-plugin child compilation syntax error

Question

1 answers

solution1 0 2017-09-09 04:33:44

solution1
0 2017-09-09 04:33:44