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"
                ]
相关推荐
Senar10 分钟前
Web端选择本地文件的几种方式
前端·javascript·html
烛阴28 分钟前
UV Coordinates & Uniforms -- OpenGL UV坐标和Uniform变量
前端·webgl
姑苏洛言32 分钟前
扫码小程序实现仓库进销存管理中遇到的问题 setStorageSync 存储大小限制错误解决方案
前端·后端
烛阴42 分钟前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
lh_12541 小时前
ECharts 地图开发入门
前端·javascript·echarts
jjw_zyfx1 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
Mikey_n2 小时前
前台调用接口的方式及速率对比
前端
周之鸥2 小时前
使用 Electron 打包可执行文件和资源:完整实战教程
前端·javascript·electron
我爱吃朱肉2 小时前
HTMLCSS模板实现水滴动画效果
前端·css·css3
机器视觉知识推荐、就业指导2 小时前
开源QML控件:进度条滑动控件(含源码下载链接)
前端·qt·开源·qml