Organize + Automate + Deploy = Webpack Chapter 16Let's also take this opportunity to install Vue itself:
npm install --save vueNow our Vue component is ready. We need to write a page in which to place it and try it.
Create a file called index.js inside the app folder. We will instantiate the component in a
Vue instance. Inside index.js, write the following:
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})This will mount the Vue instance inside an element with id="app", and it will contain a
single component--our App.vue.
We need one more file--an HTML file. In the root directory, create index.html with this
code:
<!DOCTYPE html>
<html>
<head>
<title>Webpack 2 demo</title>
</head>
<body>
<div id="app"></div>
<script src="dist/bundle.js"></script>
</body>
</html>We don't want to refer to app/index.js directly here; this is because index.js itself
doesn't contain much. It has an import statement that won't be recognized by the browser.
Webpack can instead easily create dist/bundle.js with index.js inside, along with all
its dependencies. To do it, run this command:
./node_modules/webpack/bin/webpack.js app/index.js dist/bundle.js