引入vue单文件组件

首先安装vue，执行 npm install --save vue（此处是save不是save-dev，我所理解的只要是在你代码文件中有import或者require引用的就要用save，其他的都放在开发环境下就可以了），接着修改src/index.js文件如下

import vue from 'vue'
import App from './app.vue'
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

接着在src目录下新增文件app.vue，内容如下

<template>
    <div>{{name}}</div>
</template>
<script>
    export default {
        name: 'app',
        data () {
            return {
                name: '我是张三'
            }
        }
    }
</script>
<!--注意下面的我们暂时先注释掉-->
<!--<style>
</style>-->

接着在根目录下的index.html文件加入app的挂载点 <div id="app"></div> 由于webpack打包vue文件需要专门的loader，所以这里先安装vue-loader，执行 npm install --save-dev vue-loader，接着安装npm install --save-dev vue-template-compiler（这个是解析vue文件的依赖不安装会报错），然后命令行里执行 C:\Users\Administrator\Desktop\app>webpack --mode development --module-bind "vue=vue-loader" qq 20180409231412 发现报错这种问题直接百度搜一下就知道了，大意思是说使用import引入的vue.js并不能解析template模板，需要使用单独的'vue/dist/vue.js'，那么直接定义一下vue别名就可以了，接下来我们修改一下打包参数： C:\Users\Administrator\Desktop\app>webpack --mode development --module-bind "vue=vue-loader" --resolve-alias "vue=vue/dist/vue.js"执行后打包成功直接在浏览器里打开index.html发现成功

打包css

我们发现上面的单文件组件app.vue中我们是把部分注释掉了，现在我们去掉注释接着打包会发现说明vue单文件如果使用css还是要借助css的打包工具，那么我们先安装css的打包工具css-loader，执行npm install --save-dev css-loader 接着改一下app.vue加入样式如下

<template>
    <div class="redClass">{{name}}</div>
</template>
<script>
    export default {
        name: 'app',
        data () {
            return {
                name: '我是张三'
            }
        }
    }
</script>
<style>
    .redClass{
        color: red
    }
</style>

然后执行上述打包命令，打包成功而且字体也变颜色了，如下

hxkuc / webpack

webpack4打包之路--打包.vue文件 #2

引入vue单文件组件

打包css