Organize + Automate + Deploy = Webpack Chapter 16Hello {{name}}!
</div>
</template>
<script>
export default {
data () {
return {
name: 'John',
name: 'Jane'
}
}
}
</script>We can already spot a problem--the John name property will be overwritten by the later
property, Jane, with the same key. Let's pretend that we didn't notice this and put the
component inside a web page. For this, we need another file, named index.js, in the src
directory. Write the following code inside it:
import Vue from 'vue'
import MyComp from './MyComp.vue'
new Vue({
el: '#app',
render: h => h(MyComp)
})In the root directory, place an index.html file with the following code:
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>We now need a webpack.config.js file to tell Webpack how to compile our files; write
the following inside it:
module.exports = {
entry: './src/index.js',
module: {
rules: [
{
test: /.vue$/,