webpack中导入vue包的规则
Posted 我和我的小生活
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack中导入vue包的规则相关的知识,希望对你有一定的参考价值。
准备工作:webpack需要安装很多东西,为了节省时间,可以将之前做好的复制到新文件夹中。除了node_modules,因为它包含的文件特别多,复制粘贴到另一个项目文件夹下时间比较长,我们可以在终端重新安装。(终端命令:npm i)
由于我们是用vue写代码,所以我们需要安装vue包并导入。
安装vue包命令:npm i vue -S
安装完成之后,在main.js中导入
注意:当我们使用这个方式导入vue的时候,我们使用的跟通过script标签导入vue.js包时的模式不同。这个模式是Vue专门为webpack提供的一种叫做runtime-only的模式。
为什么通过import导入vue,就成了runtime-only模式?
因为我们通过import导入的vue是一个叫做vue.runtime.common.js
vue.runtime.common.js是精简版的vue
import导入包的步骤:
1.在node_modules下,找到包名对应的路径
2.找这个模块的package.json文件
3.找package.json的‘main’配置节
4.去dist目录下,找到main对应的那个文件,然后导入进来
如果想要导入vue包,有两种方法:
一是找到vue包
二是在resolve中配置加载包时的加载的是哪个文件
以上是关于webpack中导入vue包的规则的主要内容,如果未能解决你的问题,请参考以下文章
在 vue-cli webpack 项目中导入 Font Awesome
使用 Webpack 4 在 Javascript 中导入 JSON 文件