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'
]
}
]
}
};
The answer is to add the following to webpack's config rules: