I'm using html-webpack-plugin to use a template index.html file (using html-loader as well). Everything is being rendered on npm run build. The outputed index.html is all good, but when I open it in the browser, everything in the tag is replaced with an empty HTML comment except the scripts. if I refresh, I can see the HTML elements for for half a second and then they disappear.
Any ideas? I can add any code needed to help with answer.
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({
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>