webpack配置与使用——配置Vue单文件组件

Vue

安装：安装vue

yarn add vue

依赖包、模块

yarn add 依赖包
一个依赖包里边包含多个模块
模块就是一个js文件，内部有执行 模块化导出 动作，例如module.exports  或 export default {}

Vue模块说明

vue.common.js，基于CommonJS模块化构建的 module.exports = Vue
vue.esm.js，基于ES6模块化构建的 export default Vue
vue.runtime.js，删减版vue的体现，把相同功能的多余实现方式给删除掉,内部只有render，没有template
vue.js、 vue.min.js，通用型的，在浏览器上可以直接使用，完整版的template和render都存在，一个都不少

应用情形

浏览器端可以使用  vue.js  或 vue.min.js
nodejs中可以使用vue.common.js或vue.runtime.common.js(nodejs没有使用vue的必要)

• webpack中使用分为两种情形：
  • 普通容器渲染(new Vue({el:‘xxx’}))，要使用不带runtime系列的(el要通过template渲染实现)
  • el+render方法渲染的，全部模块都可以使用

import Vue from 'vue/dist/vue.common.js'   // 引入完整版的vue  ，适合el渲染容器应用
import Vue from 'vue'  // 引入删减版的Vue，即vue/dist/vue.runtime.common.js  适合el+render方法渲染容器应用

应用单文件组件

• render方法可以使得组件内容对div容器进行覆盖渲染
• 实际项目中，div#app就是一个空容器，不设置任何内容，命运就是被一个指定的组件(一般是App.vue)覆盖的，然后在App.vue里边构建其他业务

单文件组件配置loader

• 安装、配置、应用 组件相关loader
  yarn add -D vue-loader vue-template-compiler

• 在webpack.config.js中做如下配置：

    // vue-loader相关配合使用的模块
  const VueLoaderPlugin = require('vue-loader/lib/plugin'); 
  
    module.exports = {
      module: {
        rules: [
          {
            // vue文件对应的loader配置
            test: /\.vue$/,
            loader: 'vue-loader'
          },
        ]
      }
    }
    plugins: [
      // vue-loader配置的功能插件
      // 把下面语句设置好,作用是：各种loader针对单文件组件内部也是生效的
      // 并且 vue组件内部 的img标签 和 background-image 图片都可以被loader处理
      new VueLoaderPlugin(),
    ]
  }
  
  

• 在vue单文件组件内部设置的css、less、img、es6高级语法、背景图片/img标签图片 都会被相关的loader做处理

• vue-loader：针对vue单文件组件做转码、降级处理，使得编译后的内容可以被浏览器直接运行，vue组件是特殊类型文件，当然需要loader处理