Organize + Automate + Deploy = Webpack Chapter 16Create a file named index.html in the same directory and write the following code:
<!DOCTYPE html>
<html>
<head>
<title>Swear Jar Page</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>The bundle.js file will be created (in memory) by Webpack for us.
The last app file you need is a JavaScript file that will contain our Vue root instance. Create
it in the same directory and name it index.js; put the following content in it:
import Vue from 'vue'
import SwearJar from './SwearJar.vue'
new Vue({
el: '#app',
render: h => h(SwearJar)
})Now you need to create a file, webpack.config.js, to tell Webpack a couple of things.
The first thing is the entry point of our application (index.js) and where we would like to
place the compiled files:
module.exports = {
entry: './index.js',
output: {
path: 'dist',
filename: 'bundle.js'
}
}Next, we will tell Webpack to turn .vue files into JavaScript with vue-loader:
module.exports = {
entry: './index.js',
output: {
path: 'dist',
filename: 'bundle.js'
},
module: {
rules: [
{