当前位置: 首页 > news >正文

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.lryc.cn/news/115286.html

相关文章:

  • springboot房地产管理java购房租房二手房j客户sp源代码mysql
  • Gartner 发布影响数据科学和机器学习未来方向重要趋势
  • 72. 编辑距离
  • Android12.0 原生系统SystemUI下拉状态栏和通知栏视图之锁屏通知布局
  • 周末在家值班,解决几个月前遗忘的Bug
  • Shell编程基础(十五)文本三剑客(sed)
  • 5,二叉树【p6-p7】
  • 【Spring】如果你需要使用重试机制,请使用Spring官方的Spring Retry
  • pagehelper 优化自定义分页和排序位置
  • Linux下查询文件夹中文件数量的方法
  • PS透明屏,在科技展示中,有哪些优点展示?
  • Hbase-面试题
  • 图的宽度优先深度优先遍历
  • redis Set类型命令
  • Netty框架自带类DefaultEventExecutorGroup的作用,用来做业务的并发
  • TCP的四次挥手与TCP状态转换
  • 【网络编程】实现一个简单多线程版本TCP服务器(附源码)
  • centos离线部署docker
  • ffmpeg使用滤镜对视频进行处理播放
  • Ansible Handlers模块详解,深入理解Ansible Handlers 自动化中的关键组件
  • threejs点击模型实现模型边缘高亮的选中效果--更改后提高帧率
  • RocketMQ 主备自动切换模式部署
  • 【MySQL】select相关
  • 在Python中应用RSA算法实现图像加密:基于Jupyter环境的详细步骤和示例代码
  • Prometheus Blackbox Exporter 的 HTTP 探测指标中各个阶段的时间统计信息
  • 数据结构之时间复杂度-空间复杂度
  • 新一代构建工具 maven-mvnd
  • 构建Docker容器监控系统(2)(Cadvisor +Prometheus+Grafana)
  • Leetcode.995 K 连续位的最小翻转次数
  • PHP8的跳转语句-PHP8知识详解