webpack中导入vue包的规则 webpack+vue

2023-03-08 学习力0

核心提示：准备工作：webpack需要安装很多东西，为了节省时间，可以将之前做好的复制到新文件夹中。除了node_modules，因为它包含的文件特别多，复制粘贴到另一个项目文件夹下时间比较长，我们可以在终端重新安装。（终端命令：npm i) 由于我们是用vue写代码，所以

准备工作：webpack需要安装很多东西，为了节省时间，可以将之前做好的复制到新文件夹中。除了node_modules，因为它包含的文件特别多，复制粘贴到另一个项目文件夹下时间比较长，我们可以在终端重新安装。（终端命令：npm i)

webpack中导入vue包的规则

由于我们是用vue写代码，所以我们需要安装vue包并导入。

安装vue包命令：npm i vue -S

webpack中导入vue包的规则

安装完成之后，在main.js中导入

webpack中导入vue包的规则

注意：当我们使用这个方式导入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包

webpack中导入vue包的规则

二是在resolve中配置加载包时的加载的是哪个文件

webpack中导入vue包的规则

表示如果import进来的包是以.vue结尾的，那么就去加载冒号后面的这个字符串所指向的那个文件

点赞 0反对 0举报 0 评论 0

免责声明：本文仅代表作者个人观点，与乐学笔记（本网）无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
本网站有部分内容均转载自其它媒体，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责，若因作品内容、知识产权、版权和其他问题，请及时提供相关证明等材料并与我们留言联系，本网站将在规定时间内给予删除等相关处理.

webpack命令局部运行的几种方法 webpack用法

webpack命令局部运行的几种方法 1. 第一种，先全局安装webpack命令：npm install -g webpack然后再在项目内安装命令：npm install webpack --save-dev这样在项目内就可以直接使用webpack命令了，运行的却是局部的webpack 2.第二种，直接在局部安装webpack，

03-08
扩大编译内存 webpack-dev-server --inline --p

verbose stack Error: choreographer@1.0.0 rundev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`扩大编译内存地址 D:\park\node_modules\.bin\webpack-dev-server.cmd@ECHO offSETLOCALCALL :find_dp0IF EXIST "%dp0

03-08
Webpack的安装与使用 webpack安装配置

webpack 常用安装命令webpack 安装及删除命令：npm/cnpm install webpack -g (全局安装)npm/cnpm uninstall webpack -g (全局卸载)npm/cnpm install webpack -s (局部安装)npm/cnpm uninstall webpack -s (局部卸载)安装时，加上 '--save' 安装写在 package.j

03-08
html-webpack-plugin不输出script标签的方法 ht

约550行：if (!this.options.disableScript) {if (this.options.inject === 'head') {head = head.concat(scripts);} else {body = body.concat(scripts);}}然后这样使用：new HtmlWebpackPlugin({disableScript: true,//...})

03-08
gulp与webpack-stream集成配置 grunt gulp webp

webpack非常强大,但是也有不足的地方,批量式处理依然是gulp更胜一筹.我们是否可以将两者的优点结合起来呢? 这篇文章就是讲述如何集成gulp和webpack1.安装webpack-stream很重要的插件,当然也可以直接使用官方的webpack,集成方式可以看webpack官网. 但webpack-s

03-08
【原创】从零开始搭建Electron+Vue+Webpack项目

导航：（一）Electron跑起来（二）从零搭建Vue全家桶+webpack项目框架（三）Electron+Vue+Webpack，联合调试整个项目（四）Electron配置润色（五）预加载及自动更新（六）构建、发布整个项目（包括client和web）摘要：前面两篇介绍了如何启动Electron和Vue项

03-08
【Vue】WebPack 忽略指定文件或目录

前端Vue项目使用 WebPack 打包时，有时候我们需要忽略掉一些文件。比如一些说明文档、ReadMe之类的，我们只希望它存在于源码中，而不是被打包给用户。通过修改 webpack.base.conf.js 配置文件，有以下方式可以达到目的。方法1：使用 null-loadermodule: {rule

03-08
Karma 4 - Karma 集成 Webpack 进行单元测试

可以将 karma 与 webpack 结合起来，自动化整个单元测试过程。1. 首先根据 1 完成基本的 karma 测试环境。2. 安装 webpack 和 webpack 使用的 loader在最简单的情况下，我们只需要 webpack 和 webpack 的 karma 插件 karma-webpacknpm i -D webpack karma-w

03-08
前端工具之webpack webapp前端

1webpack简介：2webpack的使用步骤　　1全局安装：webpack和webpack-cli　　　　　　2创建一个文件夹命名webpack01，项目初始化：（一路enter键即可）　　　　　　3本地项目安装webpack　　　　4

03-08
手把手教你webpack、react和node.js环境配置（

很多人刚学习react的时候，往往因为繁琐的配置而头疼，这里我将手把手教大家怎么用webpack配置react和redux的环境，这篇教程包括前端react和后台node整个网站的环境配置，对node没兴趣的可以只看这篇。这里是下篇链接：手把手教你webpack、react和node.js环境

03-08