Vue——webpack

news2024/11/24 5:00:15

webpack

  • 一、Install
    • 1.全局安装
    • 2.局部安装
  • 二、总结
    • 1.打包
    • 2.定义脚本
    • 3.配置文件定义(webpack.config.js)
    • 4.项目重新加载依赖
    • 5.webpack打包Css
    • 6.style-loader

一、Install

1.全局安装

npm install webpack webpack-cli -g

2.局部安装

以项目为单位,一个项目一个webpack版本
如果文件里有中文使用npm init ,如果没有使用npm init -y

进入项目目录

//当在开放环境使用这个
npm install webpack webpack-cli -D

//当在生产环境后
npm install webpack webpack-cli

二、总结

1.打包

对项目进行打包

//可以这样使用,但很奇怪
npx webpack

2.定义脚本

在这里插入图片描述

//执行脚本
npm run build

3.配置文件定义(webpack.config.js)

打包会默认的入口文件是src/index.js文件,出口文件是dist。当想要修改名字时可以自行修改
在这里插入图片描述

4.项目重新加载依赖

删掉node_module复制一份,然后不需要在安装webpack,因为在package.json里有依赖项

//直接使用指令
npm install

5.webpack打包Css

webpack本身并不认识css,需要借助loader

  1. 安装Css loader
npm install css-loader -D
  1. 无法直接使用,需要设置关联loader,在webpack.config.js中添加或者修改关联
    module:{
        rules:[
            {
                test:/\.css$/,
                loader:"css-loader"
            }
        ]
    }

6.style-loader

如果只引入关联css-loader,那么无法生效,因为它只负责解析,并不会将css插入页面
那么就需要来引入style-loader

npm install style-loader -D

修改配置文件

                use:[
                    "style-loader",
                    "css-loader"
                ]

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/841740.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2023中国数字人力峰会|用「消失的Ta」解读数字化人效管理

7月28日,DHR公会主办的「2023中国数字人力峰会」在北京顺利举办。盖雅工场联合创始人兼CEO章新波带来主题为「消失的它」的精彩分享。以下为分享内容: 近期,大家都在讨论消失的Ta,我也想借此话题举几个例子,聊聊对于企…

thinkphp8.0多应用模式下提示控制器不存在

thinkphp 8.0 开启多应用模式 1、按照官方文档说明 ,已经安装了 think-multi-app composer require topthink/think-multi-app 2、控制器的命名空间也没写错。 3、访问路径与目录名、控制器、方法名一样,访问地址是没错的。 4、网上有说,在…

实现vscode上用gdb调试stm32

实现vscode上用gdb调试stm32 这周负责编写设备的某个模块,其中遇到了一些变量地址不正确的错误,按理这种底层变量错误用gdb一类的调试器就能很快查到,可是初入嵌入式一行,此C语言非彼C语言,对于gdb怎么对接到项目上根…

冠达管理投资前瞻:三星加码机器人领域 大信创建设提速

上星期五,沪指高开高走,盘中一度涨超1%打破3300点,但随后涨幅收窄;深成指、创业板指亦强势震动。截至收盘,沪指涨0.23%报3288.08点,深成指涨0.67%报11238.06点,创业板指涨0.95%报2263.37点&…

vue 在方法里用字符串赋值图片路径获取不到,提示找不到图片

原因 直接通过字符串赋值命名路径是不会生效的,如 this.file1"../assets/addmodel/TAR.png" 因为在Vue模板中直接使用字符串赋值的方式不会被解析为正确的资源路径。 你可以使用动态绑定(v-bind 或简写为 :)来设置图片的路径。…

基于Spring Boot的医院预约挂号网站设计与实现(Java+spring boot+MySQL)

获取源码或者论文请私信博主 演示视频: 基于Spring Boot的医院预约挂号网站设计与实现(Javaspring bootMySQL) 使用技术: 前端:html css javascript jQuery ajax thymeleaf 微信小程序 后端:Java spring…

边写代码边学习之LSTM

1. 什么是LSTM 长短期记忆网络 LSTM(long short-term memory)是 RNN 的一种变体,其核心概念在于细胞状态以及“门”结构。细胞状态相当于信息传输的路径,让信息能在序列连中传递下去。你可以将其看作网络的“记忆”。理论上讲&a…

K8S系列文章之 使用Kind部署K8S 并发布服务

简单介绍 kind 即 Kubernetes In Docker,顾名思义,就是将 k8s 所需要的所有组件,全部部署在一个docker容器中,是一套开箱即用的 k8s 环境搭建方案。使用 kind 搭建的集群无法在生产中使用,但是如果你只是想在本地简单…

从零开始学Python(Ⅰ)基本变量与数据类型

🥳🥳Welcome Huihuis Code World ! !🥳🥳 接下来看看由辉辉所写的关于Python的相关操作吧 目录 🥳🥳Welcome Huihuis Code World ! !🥳🥳 一.关于Python的基本知识(变量…

python爬虫之scrapy框架介绍

一、Scrapy框架简介 Scrapy 是一个开源的 Python 库和框架,用于从网站上提取数据。它为自从网站爬取数据而设计,也可以用于数据挖掘和信息处理。Scrapy 可以从互联网上自动爬取数据,并将其存储在本地或在 Internet 上进行处理。Scrapy 的目标…

ffmpeg+nginx实现rtsp协议摄像头web端播放

ffmpegnginx实现rtsp协议摄像头web端播放 环境准备准备nginx环境添加rtmp模块添加hls转发 使用ffmpeg,将摄像头rtsp转为rtmp并推送到nginxVLC播放验证 环境准备 nginx(需要安装rtmp模块)ffmpeg 6.0vlc播放器(本地播放验证&#x…

这个酒店管理方法太酷了!赶紧试试吧

安全是酒店管理中最重要的优先事项之一,酒店保障住客和员工的生命安全是不可妥协的责任。为了有效预防和应对潜在的火灾风险,引入烟感监控系统是一种普遍且高效的解决方案。 烟感监控系统通过及时检测烟雾和火源,及时发出警报和采取措施&…

Nacos单点部署

文章目录 一、Nacos概述二、部署Nacos(1)容器部署 三、注册服务四、整合外部的Mysql(单节点) 一、Nacos概述 Nacos是什么? Nacos的全称是Dynamic Naming and Configuration Service,是阿里巴巴推出来的一个…

系统函数和状态方程的转换

1.问题介绍 之前碰到这样一个问题:给定一个正弦信号以及系统传递函数,利用该系统传递函数进行卡尔曼滤波。 利用卡尔曼进行滤波首先要知道系统的状态方程,那么题目只给了系统传递函数,如何能够得到状态方程呢? 首先…

C++ 多线程:std::future

std::future std::future 简介示例1博客引用来源 std::future 简介 我们前面介绍的std::thread 是C11中提供异步创建多线程的工具,只能是异步运行任务,却无法获取任务执行的结果,一般都是依靠全局对象,全局对象在多线程下是及其不…

Python连接Hive实例教程

一 Python连接hive环境实例 经在网络查询相关的教程,发现有好多的例子,发现连接底层用的的驱动基本都是pyhive和pyhs2两种第三方库的来连接的 hive,下面将简介windows 10 python 3.10 连接hive的驱动程序方式,开发工具:pycharm …

API接口统一管理

API接口统一管理 在开发项目的时候,接口可能很多需要统一管理。在src目录下去创建api文件夹去统一管理项目的接口;这样便于后期维护和团队开发。 axios二次封装 对于axios不熟悉的话,建议先学习这篇文章:Axios的基本使用 在开发项目的时候避免不了与后…

日销千单!TikTok Shop正成为部分东南亚卖家的首选平台...

TikTok Shop 正在成为一些东南亚卖家首选的电商平台,凭借娱乐购物模式获得年轻消费者青睐,他们已经可以通过该平台实现日销 5000 单。 作为字节跳动旗下全球短视频平台,TikTok 的电商功能可能会撼动这个拥有 6.7 亿人口、目前由 Shopee、Laz…

[Docker实现测试部署CI/CD----构建成功后钉钉告警(7)]

目录 15、钉钉告警创建项目群,然后添加机器人添加机器人Jenkins 系统配置项目配置修改Jenkinsfile文件,添加钉钉提示信息测试 不修改Jenkinsfile文件,添加钉钉提示信息测试 15、钉钉告警 创建项目群,然后添加机器人 首先需要在钉…

探索Python数据容器之乐趣:列表与元组的奇妙旅程!

文章目录 零 数据容器入门一 数据容器:list(列表)1.1 列表的定义1.2 列表的下表索引1.3 列表的常用操作1.3.1 列表的查询功能1.3.2 列表的修改功能1.3.3 列表常用方法总结 1.4 补充:append与extend对比1.5 list(列表)的遍历1.6 补…