webpack_05 (vue)

Vue打包后不同版本解析

vue(.runtime).global(.prod).js：
　　通过浏览器中的 <script src=“...”> 直接使用；
　　我们之前通过CDN引入和下载的Vue版本就是这个版本；
　　会暴露一个全局的Vue来使用；
vue(.runtime).esm-browser(.prod).js：
　　用于通过原生 ES 模块导入使用 (在浏览器中通过 <script type="module"> 来使用)。
vue(.runtime).esm-bundler.js：
　　用于 webpack，rollup 和 parcel 等构建工具；
　　构建工具中默认是vue.runtime.esm-bundler.js；
　　如果我们需要解析模板template，那么需要手动指定vue.esm-bundler.js；
vue.cjs(.prod).js：
　　服务器端渲染使用；
　　通过require()在Node.js中使用；

运行时+编译器 vs 仅运行时

 

在Vue的开发过程中我们有三种方式来编写DOM元素：
　　方式一：template模板的方式（之前经常使用的方式）；
　　方式二：render函数的方式，使用h函数来编写渲染的内容；
　　方式三：通过.vue文件中的template来编写模板；
它们的模板分别是如何处理的呢？
　　方式二中的h函数可以直接返回一个虚拟节点，也就是Vnode节点；
　　方式一和方式三的template都需要有特定的代码来对其进行解析：
　　　　方式三.vue文件中的template可以通过在vue-loader对其进行编译和处理；
　　　　方式一中的template我们必须要通过源码中一部分代码来进行编译；
所以，Vue在让我们选择版本的时候分为 运行时+编译器 vs 仅运行时
　　运行时+编译器包含了对template模板的编译代码，更加完整，但是也更大一些；
　　仅运行时没有包含对template版本的编译代码，相对更小一些；

 

vue-loader

#安装
npm install vue-loader -D
#配置
{
        test: /\.vue$/,
        use: ['vue-loader']
      }

打包vue文件必须添加@vue/compiler-sfc来对template进行解析

#安装
npm install @vue/compiler-sfc -D
#配置
 plugins: [
    new VueLoaderPlugin()
  ]