webpack学习（5）

区别webpack中导入Vue 和普通页面中导入Vue 的区别

1. 在普通网页中如何使用Vue

• 使用 script标签，引入 vue包

• 在 index页面中，创建一个 id=‘app’ 的div容器

• 通过 new Vue() 得到一个 VM实例

  2.在 webpack 中导入 Vue包两种方式

• 方式1：

在 main.js 文件中导入vue.js
import Vue from '../node_modules/vue/dist/vue.js'

• 方式2：

main.js中导入vue
import Vue from 'vue'

webpack.config.js配置文件中设置修改vue包路经地址
resolve:{
        alias:{// 方式2：修改 Vue 被导入时候包的路径
            "vue$":"vue/dist/vue.js"
        }
    }

说明：
包的查找规则如下：

1. 找 项目根目录中有没有 node_modules 的文件夹
2. 在 node_modules 中 根据包名，找对应的 vue 文件夹
3. 在 vue 文件夹中，找 一个叫做 package.json 的包配置文件
4. 在 package.json 文件中，查找 一个 main 属性【main属性指定了这个包在被加载时候，的入口文件】

main.js 中导入的 vue 和普通网页中引入的 vue.js 不同，它实际是一个 dist 文件加下的vue.runtime.common.js。这个JS文件是一个功能不全的vue文件，只提供了 runtime-only 方式。