Vue——webpack

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"
                ]

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

skywalking日志收集

文章目录 一、介绍二、添加依赖三、修改日志配置1. 添加链路表示traceId2. 添加链路上下文3. 异步日志 四、收集链路日志 一、介绍 在上一篇文章skywalking全链路追踪中我们介绍了在微服务项目中使用skywalking进行服务调用链路的追踪。 本文在全链路追踪的基础上&#xff0c…

QT生成Debug和Release发布版后,运行exe缺少dll问题

在QT Creator生成debug和release的exe执行文件后,运行时,报错缺少*.dll.解决办法1: 在系统环境变量中添加D:\Qt\Qt5.13.2\Tools\mingw730_64\bin后,即可运行。 当使用此方法时,将exe拷贝到其他电脑中运行时&#xff0c…

科技感响应式管理系统后台登录页ui设计html模板

做了一个科技感的后台管理系统登录页设计,并且尝试用响应式布局把前端html写了出来,发现并没有现象中的那么容易,chrome等标准浏览器都显示的挺好,但IE11下面却出现了很多错位,兼容起来还是挺费劲的,真心不…

《吐血整理》高级系列教程-吃透Fiddler抓包教程(36)-掌握Fiddler中FiddlerScript用法你会有多牛逼-上

1.简介 Fiddler是一款强大的HTTP抓包工具,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发还是测试来说,都有很大的帮助。Fiddler提供的功能基本上能…

全网最全Linux 运行jar包的几种方式

一、Linux 运行jar包的几种方式 方式一: java -jar xxx.jar 最常用的启动jar包命令,特点:当前ssh窗口被锁定,可按CTRL C打断程序运行,或直接关闭窗口,程序退出 方式二: java -jar xxx.jar &…

复原 IP 地址——力扣93

文章目录 题目描述回溯题目描述 回溯 class Solution{public:static constexpr int seg_count=4<

使用Python + Flask搭建web服务

示例脚本 from flask import Flask# 获取一个实例对象 app Flask(__name__)# 1、注册 app.route(/reg, methods[get]) def reg():return {code: 200,msg: reg ok!}# 2、登录 app.route(/login, methods[get]) def login():return login ok&#xff01;if __name__ __main__:…

防火墙第五次作业

1. 什么是恶意软件&#xff1f; 恶意软件官方的一个定义&#xff1a;恶意软件 (Malware) 从“恶意”(malicious) 和“软件”(software) 这两个词合并而来&#xff0c;是一个通用术语&#xff0c;可以指代病毒、蠕虫、特洛伊木马、勒索软件、间谍软件、广告软件和其他类型的有害…

【vue】vue基础知识

1、插值表达式&属性绑定 <!--template展示给用户&#xff0c;相当于MVVM模式中的V--> <template><div class"first_div">//插值表达式<p>{{ message }}</p>//这里的参数是从父组件的template里传过来的<p>{{data_1}}</p…

深度学习——全维度动态卷积ODConv

ODConv(OMNI-DIMENSIONAL DYNAMIC CONVOLUTION)是一种关注了空域、输入通道、输出通道等维度上的动态性的卷积方法&#xff0c;因此被称为全维度动态卷积。 part1. 什么是动态卷积 动态卷积就是对卷积核进行线性加权 第一篇提出动态卷积的文章也是在SE之后&#xff0c;他提出…

uni-app:实现数字文本框,以及左右加减按钮

效果 代码 <template><view><view classline3><view classline3_position><view classleft>数量<text>*</text></view> <view class"right"><view class"quantity_btn"><view class"…

【知网检索稳定】第八届现代管理和教育技术国际学术会议(MMET2023)

第八届现代管理和教育技术国际学术会议&#xff08;MMET 2023&#xff09;将于2023年09月22-24日在中国上海召开。会议由四川大学、泰国程逸皇家大学、泰国程逸皇家大学中泰同文同学国际交流中心主办、乐山师范学院、四川职业技术学院、AEIC学术交流中心协办。会议主要围绕会议…

TechTool Pro for mac(硬件监测和系统维护工具)

TechTool Pro 是为 Mac OS X 重新设计的全新工具程序&#xff0c;不但保留旧版原有的硬件侦测功能&#xff0c;还可检查系统上其他重要功能&#xff0c;如&#xff1a;网络连接&#xff0c;区域网络等。 TechTool Pro for mac随时监控和保护您的电脑&#xff0c;并可预设定期检…

【Linux取经路】冯诺依曼结构体系与操作系统的碰撞

文章目录 一、冯诺依曼体系结构1.1 硬件介绍1.2 内存的重要性 二、操作系统2.1 设计操作系统的目的2.2 操作系统是如何进行管理的&#xff1f; 一、冯诺依曼体系结构 我们现在常见的计算机&#xff0c;如笔记本&#xff0c;以及我们不常见的计算机&#xff0c;如服务器&#x…

【ES】笔记-let 声明及其特性

let 声明及其特性 声明变量 变量赋值、也可以批量赋值 let a;let b,c,d;let e100;let f521,giloveyou,h[];变量不能重复声明 let star罗志祥;let star小猪;块级作用域&#xff0c;let声明的变量只在块级作用域内有效 {let girl周杨青;}console.log(girl)注意&#xff1a;在 i…

18 | 基于DDD的微服务设计实例

为了更好地理解 DDD 的设计流程&#xff0c;这篇文章会用一个项目来带你了解 DDD 的战略设计和战术设计&#xff0c;走一遍从领域建模到微服务设计的全过程&#xff0c;一起掌握 DDD 的主要设计流程和关键点。 项目基本信息 项目的目标是实现在线请假和考勤管理。功能描述如下…

springboot房地产管理java购房租房二手房j客户sp源代码mysql

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 springboot房地产管理 系统1权限&#xff1a;管理员 …

回归决策树模拟sin函数

# -*-coding:utf-8-*- import numpy as np from sklearn import tree import matplotlib.pyplot as pltplt.switch_backend("TkAgg") # 创建了一个随机数生成器对象 rng rngnp.random.RandomState(1) print("rng",rng) #5*rng.rand(80,1)生成一个80行、1列…

MongoDB文档-进阶使用-MongoDB索引-createindex()与dropindex()-在MongoDB中使用正则表达式来查找

阿丹&#xff1a; 之前研究了MongoDB的基础增删改查。在学会基础的数据库增删改查肯定是不够的。这个时候就涉及到了数据库搜索的时候的效率。需要提高数据的搜索效率。 MongoDB索引 在所以数据库中如果没有数据索引的时候。如果需要查找到一些数据。都会去主动扫描所有可能存…

一键翻译,实现文件名简体中文转日语的便捷改名!

您是否曾经遇到过想要将文件名从简体中文翻译成日语&#xff0c;却苦于没有合适的工具&#xff1f;现在&#xff0c;让我们为您介绍一款便捷的解决方案——文件名简体中文转日语翻译工具&#xff01; 首先&#xff0c;第一步&#xff0c;我们需要打开文件批量改名&#xff0c;…