从零教你使用webpack,从此项目打包不用愁
webpack
- 问题
文件依赖关系错综复杂
静态文件请求效率低
模块化支持不友好
浏览器对高级JS特性兼容性不好
安装和配置
--save-dev 也可以写作 -D,表示是开发依赖(开发阶段需要用到的包,项目上线运行后不需要)
初始化项目 npm init -y
跟目录下新建 src 目录,作为代码文件目录
src 下新建 index.html和index.js
index.html 中编写 html 代码
安装 jquerynpm i jquery
安装 webpack
通过命令npm install webpack webpack-cli --save-dev
来进行安装
webpack 配置
根目录下新建 webpack.config.js
module.exports={mode:'development' // 开发模式
}
配置启动命令
打开 package.json ,在 scripts 属性中加入如下代码
"dev":"webpack"
打包
终端运行如下命令
npm run dev
成功后会在跟目录创建 dist 目录,并生成一个 main.js 文件
运行
在 index.html 中,引入 main.js,再次运行 index.html 即可成功
打包入口文件和出口文件
- 入口文件
就是项目或程序被请求的时候,第一个被访问到的文件,此文件再找相对应的模块进行处理
在当前项目中,index.html 是入口文件,因为我们请求的就是 index.html
但是对于 webpack 来说,打包的入口文件是 index.js,因为 index.js 中引入了其他程序需要的模块,并编写了相应的逻辑代码
- 出口文件
打包之后的文件目录以及名称
webpack 有一些默认配置
入口文件:src/index.js
出口文件:/dist/main.js
重新配置入口文件和出口文件
const path=require('path')
module.exports={mode:'development', // 开发模式entry:path.resolve(__dirname,'./src/index.js'),output:{path:path.resolve(__dirname,'./dist'),filename:"bundle.js"}
}
运行 npm run dev
命令查看结果
根目录下会自动创建一个dist文件中,里面生成bundle.js文件
自动打包
安装
npm install --save-dev webpack-dev-server
修改 pacjkage.json 中的启动命令
"dev":"webpack serve --open"
或者使用(–open 是自动打开浏览器,可以不加)
"dev":"webpack serve"
运行
npm run dev
打开地址为:http://localhost:8080/
原index.html中引入js文件为下图:
运行后在http://localhost:8080/
不需要做任何更改,浏览器会根据内容做更改的
生成预览页面
当前存在的问题:localhost:8080 对应的是网站跟目录,index.html 在 src 目录下,访问起来比较麻烦
解决方案:可以将 src 目录下的 index.html 拷贝一份到根目录下,这样访问 localhost:8080 时,就会默认渲染 index.html
但是如果修改完 index.html 后还需要手动拷贝比较麻烦,可以使用插件:HtmlWebpackPlugin
安装
npm install --save-dev html-webpack-plugin
安装完成后在webpack.config.js 中编写如下代码
重新运行npm run dev
后会报如下错误
报此错误是我们缺少loader-utils依赖
执行如下代码则可以解决以上报错问题
npm install loader-utils -D
再次重新运行 npm run dev后
访问:http://localhost:8080/,就会运行index.html
但是跟目录下并没有 index.html ,因为其仍然创建在内存中
但是你会发现有一个自己引入的js文件(无效了),系统会自动将根目录下的bundle.js文件给你引入进来
加载器
webpack 默认只能打包 .js 模文件,其他静态文件,如 .css,图片等默认不能处理,如果不加载对应的加载器,则会报错
webpack 支持使用 loader对文件进行预处理。你可以构建包括 JavaScript 在内的任何静态资源。并且可以使用 Node.js 轻松编写自己的 loade
下面的图说明了webpak如何处理各种文件类型
处理css文件
src 目录下新建 css 目录,新建 index.css
编写样式
* {margin: 0;padding: 0;
}ul {list-style-type: none;
}li {line-height: 45px;
}
但是在打包时会报如下错误
由此可见,没有对应的 loader,webpack 打包时无法处理 css 文件
安装处理css样式对应的 loader
npm install --save-dev css-loader style-loader
配置 webpack.config.js
配置完以后重新运行 npm run dev即可
注意:
这两个不可反写(loader 的调用是从后往前掉)
处理less文件
安装
npm install less-loader less -D
rules 中增加一条
css 目录中新建 inde.less
body {background-color: #ccc;ul {list-style-type: none;li {line-height: 35px;}}}
我们的vscode中可能添加了某些使less文件自动转换为css文件的插件,可以取关掉它,效果更佳
index.js中引入inde.less
重新运行 npm run dev
图片处理
安装
npm i url-loader url-loader -D
配置 webpack.config.js
{test: /\.jpg|png|gif|bmp|jfif|ttf|eot|svg|woff|woff2$/,use: [{loader: 'url-loader',options: {limit: 614400 // 代码中使用的图片为500k}}]
}
在src中新建文件夹images中放入一张图片
将此图片给body设置为背景
配置完一定要重新运行npm run dev
如果图片大于我们设置的大小,返回的则是资源文件
如果图片小于我们设置的大小,返回的则是base64 编码
关于图片的 base64 编码
图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址
.
这样做有什么意义呢?我们知道,我们所看到的网页上的每一个图片,都是需要消耗一个 http 请求下载而来的(所有才有了 csssprites技术的应运而生,但是 csssprites 有自身的局限性,下文会提到)
.
没错,不管如何,图片的下载始终都要向服务器发出请求,要是图片的下载不用向服务器发出请求,而可以随着 HTML的下载同时下载到本地那就太好了,而 base64 正好能解决这个问题
处理高级js语法
babel 用于将js的新语法和特性转换为浏览器支持的语法
安装babel转换器相关包
npm install -D babel-loader @babel/core @babel/preset-env
webpack.config.js 中添加如下规则
{test: /\.m?js$/,exclude: /(node_modules|bower_components)/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']}}
}
在 index.js 中编写如下代码
class Person {static age = 20
}
console.log(Person.age);
重新运行npm run dev
进行打包
会报如下错误
错误原因在于没有安装babel 语法的相关插件
安装
npm i -D @babel/plugin-proposal-class-properties
然后在上面规则的 option 属性中添加配置
options: {presets: ['@babel/preset-env'],plugins: ['@babel/plugin-proposal-class-properties'] // 新加的配置
}
再次重新运行npm run dev
进行打包就可以了
从零教你使用webpack,从此项目打包不用愁相关推荐
- vue html引入资源dev下404,webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)...
最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下 一.首先修改c ...
- 教你如何在vue-cli项目打包时避免踩雷(一)【早看早受益】
前言 不管迎面来的是什么,我们都能坦然面对.且不管前路如何,今天有阳光,那么我们就拥抱温暖;当风雨来临的时候,我们已经储备了迎接寒冷的能量.等待生命的即便是命运的魔咒,至少我们享受了现 ...
- 解决webpack vue 项目打包生成的文件,资源文件均404问题
最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下 一.首先修改c ...
- 手摸手教你vite + vue3 + tsx 项目打包后动态路由无法加载页面问题
今天在部署项目到服务器后,发现动态路由失效,测试开发环境时路由都可以正常跳转,生产环境控制台报错: 原代码如下: 查看了官方文档,并没有找到合适的方案,后百度查看了一些解决方案,但都没有解决实际问题, ...
- 运行 npm run dev 命令,启动 webpack 进行项目打包出现问题opensslErrorStack: [ ‘error:03000086:digital envelope routine
webpack打包出现了以下问题: 经过经过查阅发现是因为node版本的问题,可以在终端执行以下命令解决这个问题: set NODE_OPTIONS=--openssl-legacy-provider ...
- 阿里云的oss看这一篇就够,手把手教你,上传下载速度再也不用愁了,个人网站速度太慢,一定要看!
OSS对象存储是什么? 举个栗子,我的个人学生分享资源网站,用的是阿里的ESC服务器,给的宽带是1M,在这里普及一下宽带和下载的速度比是8:1,也就是最多只有100左右KB ,而且如果我把所有的资源文 ...
- 图解toB项目管理标准流程实例--让你做项目流程不用愁
交付实施类项目标准流程 产品研发类项目标准流程 应广大粉丝要求,我们建立了一个[PMO前沿交流群],小伙伴们热情踊跃,目前人数已经上万人了,不能直接进群啦,想要进群的添加小编微信,拉你进群.两个添加其 ...
- 肝了三天,万字长文教你玩转 tcpdump,从此抓包不用愁
图源 | 视觉中国 来源|Python编程时光(ID: Cool-Python) 今天要给大家介绍的一个 Unix 下的一个 网络数据采集分析工具 -- Tcpdump,也就是我们常说的抓包工具. 与 ...
- Python学习笔记9-爬花瓣网指定图片,从此找图不用愁
花瓣网,是国内著名的图片阅览网.有很多极具设计想法的图片,设计师可以在这里查找灵感. 今天,就来做一个爬虫,爬指定的图片. 第一步,分析花瓣网的AJAX 进入花瓣网,是个搜索框. 输入一个" ...
最新文章
- debian 语言配置
- linuxg下c++ 类导出_为什么PDF导出功能在SOLIDWORKS Electrical中不起作用?
- (转载)FPGA基础知识------PS/2基础知识
- 局域网一点通之组网、管网、用网1000问
- 关于return的用法
- shell中日期的使用当前日期的加减
- MySql安装错误代码1045的解决方案
- Python 第七篇:socket编程
- 机器学习-西瓜书、南瓜书第五章
- Redis windows端连接虚拟机内Redis各种问题
- python-16: time 模块 之一
- 使用samba完成Linux服务器与Windows之间的映射
- 查找与清除线程插入式木马(转)
- B站左程云算法视频中级班01
- gmail注册方法_如何在Gmail中释放空间:5种回收空间的方法
- Android 直接拨号和调用拨号盘
- libdrm学习-dumb buffer
- 淘宝网禁售无证食品和保健品 问题商品将被屏蔽
- 2022 Gartner RPA魔力象限发布,两家国产厂商入选,超自自动化成重点
- 【JSON快速入门】使得XML被人们淘汰的技术,你还不知道?
热门文章
- [运维]它给我带来了什么
- java对sha1的解密_Java实现文件的加密解密功能示例
- java毕业设计葡萄酒销售管理系统(附源码、数据库)
- list 分批_List集合数据太多进行分批,List的subList方法应用
- 数据库linux安装prm,在Ubuntu 18.04服务器上安装Monica PRM的步骤
- linux 忘记某网络,linux 常用网络命令
- react学习—PureComponent纯组件
- putty打包下载——程序、字体、配色方案
- [转神帖一篇][中年男子困惑]该不该让女儿玩魔兽
- 云联会企业认证_“云联惠”到底是不是传销?法官评析传销罪名的主体认定问题...