Vue——webpack

webpack

一、Install

1.全局安装

bash 复制代码
npm install webpack webpack-cli -g

2.局部安装

以项目为单位,一个项目一个webpack版本

如果文件里有中文使用npm init ,如果没有使用npm init -y

进入项目目录

bash 复制代码
//当在开放环境使用这个
npm install webpack webpack-cli -D

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

二、总结

1.打包

对项目进行打包

bash 复制代码
//可以这样使用,但很奇怪
npx webpack

2.定义脚本

bash 复制代码
//执行脚本
npm run build

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

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

4.项目重新加载依赖

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

bash 复制代码
//直接使用指令
npm install

5.webpack打包Css

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

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

6.style-loader

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

那么就需要来引入style-loader

bash 复制代码
npm install style-loader -D

修改配置文件

bash 复制代码
                use:[
                    "style-loader",
                    "css-loader"
                ]
相关推荐
然我27 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子32 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹35 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器42 分钟前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss