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

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

git 报错 protocol ‘https‘ is not supported解决

报错原因:选择不了其他分支代码,甚至都看不到其他分支,我这边解决了两次报错,情况如下: 第一种报错: idea中刷新分支报错如下: Fetch Failed protocol https is not supported 话不多说&#…

爬虫013_函数的定义_调用_参数_返回值_局部变量_全局变量---python工作笔记032

然后再来看函数,可以避免重复代码 可以看到定义函数以及调用函数

HCIA---路由器--静态路由

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 目录 一.路由器简介 二.路由器转发原理 三.骨干链路 四.路由分类 五.静态路由 总结 一.路由器简介 路由器是一种网络设备,用于将数据包从一个网络发送…

最大子数组和——力扣53

文章目录 题目描述解法一 动态规划题目描述 解法一 动态规划 int maxSubArray(vector<int>& nums){int pre=0, res=nums

探索ES高可用:滴滴自研跨数据中心复制技术详解

Elasticsearch 是一个基于Lucene构建的开源、分布式、RESTful接口的全文搜索引擎&#xff0c;其每个字段均可被索引&#xff0c;且能够横向扩展至数以百计的服务器存储以及处理TB级的数据&#xff0c;其可以在极短的时间内存储、搜索和分析大量的数据。 滴滴ES发展至今&#xf…

windows配置git公钥,读写远程git项目

首先Windows电脑需要下载并安装git&#xff1a; 从官网直接下载然后安装即可&#xff1a;https://git-scm.com/download/win 添加公钥 ssh-keygen -t rsa -C "xxxxxxx.com"注意&#xff1a;这个xxxxxxx.com与github注册的邮箱一致 然后一路回车&#xff0c;生成完…

uniapp支付宝微信支付功能实现

大纲&#xff1a; 具体实现逻辑如下&#xff1a; 页面初始化时&#xff0c;通过onLoad方法获取传入的钱包(wallet)信息。 用户输入充值金额&#xff0c;使用watch监听输入值的变化&#xff0c;并更新选中的充值金额选项。判断金额是否大于0&#xff0c;若是小于0&#xff0c;则…

CTF之Web安全SSI注入

前言 如何从外部进入主机&#xff1f; SSI注入攻击介绍 SSI(server side inject)的出现是为了赋予HTML静态页面动态的效果&#xff0c;通过SSI来执行系统命令&#xff1b;并返回对应的结果。 如果再网站目录中发现了.stm&#xff1b;.shtm&#xff1b;.shtml&#xff1b;这…

【Three.js】遮挡剔除

背景 考虑到场景中模型顶点过多会让fps过低&#xff0c;所以想把相机看不到的模型从场景中移除&#xff0c;来提高渲染性能&#xff0c;但是后续测试结果让我恍然大悟。虽然场景中的顶点数降低了很多&#xff0c;但是每次渲染检查遮挡的过程本身就是一个消耗性能的行为&#x…

Python批量查字典和爬取双语例句

最近&#xff0c;有网友反映&#xff0c;我的批量查字典工具换到其它的网站就不好用了。对此&#xff0c;我想说的是&#xff0c;互联网包罗万象&#xff0c;网站的各种设置也有所不同&#xff0c;并不是所有的在线字典都可以用Python爬取的。事实上&#xff0c;很多网站为了防…

汉字形近字(OCR)

近期做中文OCR识别的优化&#xff0c;抓破头皮却收获甚微。 为了百尺竿头更进一步&#xff0c;遂将目光聚焦在中文汉字特有的形近字和生僻字问题上&#xff0c;于是怒发整理形近字大全&#xff08;花了不少刀&#xff09;&#xff0c;希望对同行朋友们也有帮助&#xff1a; 地表…

【LeetCode 75】第二十三题(2352)相等行列对

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码运行结果&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 题目很简洁&#xff0c;就是要我们寻找行与列相同的对数。相同行与列不仅是要元素相同&#xff0c;还需要顺序也一样&#xff08…