文章目录
一:了解webpack
一：网页中引入的静态资源多了之后会有什么问题？
1.网页加载速度慢，因为我们要发起很多的而此请求
2.要处理错综复杂的依赖关系
二：如何解决上述两个问题
1.合并，压缩，精灵图，图片的Base64编码
2.可以使用之前学过的requireJS，也可以使用webpack可以解决各个包之间的复杂关系
三：什么是webpack
webpack是前端的一个项目构建工具，它是基于Node.js开发出来的一个前端工具
四：如何完美实现上述的两种解决方案
1.使用Gulp，是基于task任务的，只能处理一小圈的
2.使用webpack，是基于整个项目进行构建的
五：安装webpack
运行npm i webpack -g
二:webpack最基本使用方式
首先打开终端,
输入npm init -y,文件夹会出现一个package.json
再输入npm i jquery -S
文件夹会出现一个node_modules
在终端输入webpack .\src\main.js -o .\dist\bundle.js
.\src\main.js 是我们自己写的main.js, .\dist\bundle.js这是我们要创建的目标文件以及所在目录,输入这行命令之后,会出现文件bundle.js,这样就可以运行浏览器页面了
但是这种方式很麻烦,我们可以配置一个命名webpack.config.js的文件,这样在终端只需要输入webpack就行了
配置入口出口
终端ctrl+c终止批处理操作
,这样每次修改代码,就得重新在终端输入webpack打包,也很麻烦,怎样在浏览器刷新就可以呢
1.使用webpack-dev-server这个工具来实现自动打包编译的功能,先在项目中下载
运行npm i webpack-dev-server -D把这个工具安装到项目的本地开发依赖
由于我们是在项目中本地安装的webpack-dev-server,所以无法把它当做脚本命令,在powershell终端中直接运行,(只有那些安装到全局-g的工具,才能在终端中正常执行)
注意:webpack-dev-server这个工具如果想要正常运行,要求在本地项目中必须安装webpack
在package.json种配置 “dev”: “webpack-dev-server”
终端运行npm run dev,如果没有错就代表成功了,一直在监听项目的实时改变
要把webpack在项目中安装一下
在package.json中出现这个就代表成功
我们也可以直接从这个端口号进浏览器
点击就能进去了
再点击src
要把bundle.js的路径改下,如图
改成下面这个才行
三:webpack-dev-server的常用命令参数
1.配置命令的第一种方式(推荐第一种)
1.如果想要自动打开浏览器,加上空格–open就行了
2.修改端口号 --port 3000
修改完这些配置代码后,要重启服务器,npm run dev
3.以src作为根路径,直接打开页面,而不需要手动点击进入src --contentBase src
4.热重载,热更新 减少不必要的代码更新,可以实现浏览器的无刷新重载 --hot 适用于样式改变
2.配置命令的第二种方式
在webpack.config.js里配置
四:webpack-plugin的作用
先下载插件,生成内存里的页面
五:配置处理css样式表的第三方loader
在src下的css文件夹中创建一个index.css
终端输入cnpm i style-loader css-loader -D
//注意:webpack默认只能打包处理js类型的文件,无法处理其他非js类型的文件
//如果要处理非JS类型的文件,我们需要手动安装一些合适的第三方loader加载器
//1.如果想要打包处理css文件,需要安装cnpm i style-loader css-loader -D
//2.打开webpack.config.js这个配置文件,在里面新增一个配置节点叫做module,它是一个对象,在这个module对象身上,有个rules属性,这个rules属性是个数组,这个数组中存放了所有第三方文件的匹配和处理规则
/*注意:webpack处理第三方文件类型的过程是
1.发现这个要处理的文件不是JS文件,就去配置文件中查找有没有对应的第三方loader原则
2.如果能找到对应的规则,就会调用对应的loader处理这种文件类型
3.在调用loader的时候,是从后往前调用的 先调用的css-loader
4.当最后一个的loader调用完毕,会把处理的结果,直接交给webpack进行打包合并,最终输出到bundle.js中
六:配置处理less文件的loader
在src下的css文件夹中创建一个index.less
终端安装 cnpm i less-loader -D
再安装cnpm i less -D
运行npm run dev
七:配置处理scss文件的loader
在src下的css文件夹中创建一个index.scss
终端安装 cnpm i sass-loader -D,安装后
提示需要一个node-sass依赖项,一般用npm装不下来,所以用cnpm
安装依赖项cnpm i node-sass -D,这个是内部依赖,不需要配置,
两个都安装完成后在webpack.config.js中配置sass-loader
八:url-loader的使用
在Iamges里放图片
终端安装 cnpm i url-loader file-loader -D
webpack.config.js里配置
还可以传参,设置图片大小
我们来看看本来图片的大小
九:使用url-loader处理字体文件
先安装bootstrap
终端输入
在main.js中引入
webpack.config.js里配置
十:babel的配置
终端安装
webpack.config.json中配置
项目中创建文件夹.babelrc
写上代码
十一：全部代码
1.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 注意不推荐直接在这里引用任何包和任何css文件 -->
<!-- 因为main中的代码涉及到了ES6新语法,但是浏览器不识别 -->
<!-- 通过webpack这个前端构建工具,把main.js做了一下处理,生成了一个bundle.js的文件 -->
<!-- <script src="../dist/bundle.js"></script> -->
<!-- 当使用html-webpack-plugin之后,我们不再需要手动处理bundle.js的引用路径了,因为
这个插件已经帮我们自动创建了一个合适的script标签,并且引用了正确的路径,我们就不再需要纠结路径是写根路径还是../ -->
<!-- <script src="/bundle.js"></script> -->
</head>
<body>
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
<li>这是第6个li</li>
<li>这是第7个li</li>
<li>这是第8个li</li>
</ul>
<!-- <div class="box"></div> -->
<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
</body>
</html>
2.main.js
//这是main.js是项目的js入口文件
//由于ES6的代码太高级,浏览器解析不了,所以这一行执行会报错
import $ from 'jquery'
//使用import语法,导入css样式表
import './css/index.css'
//注意:webpack默认只能打包处理js类型的文件,无法处理其他非js类型的文件
//如果要处理非JS类型的文件,我们需要手动安装一些合适的第三方loader加载器
//1.如果想要打包处理css文件,需要安装cnpm i style-loader css-loader -D
//2.打开webpack.config.js这个配置文件,在里面新增一个配置节点叫做module,它是一个对象,在这个module对象身上,有个rules属性,这个rules属性是个数组,这个数组中存放了所有第三方文件的匹配和处理规则
/*注意:webpack处理第三方文件类型的过程是
1.发现这个要处理的文件不是JS文件,就去配置文件中查找有没有对应的第三方loader原则
2.如果能找到对应的规则,就会调用对应的loader处理这种文件类型
3.在调用loader的时候,是从后往前调用的 先调用的css-loader
4.当最后一个的loader调用完毕,会把处理的结果,直接交给webpack进行打包合并,最终输出到bundle.js中
*/
import './css/index.less'
import './css/index.scss'
/*注意:如果要通过路径的形式去引入node_modules中相关的文件,可以直接省略路径前面的
node_modules这一层目录,直接写包的名称,然后后面跟上具体的文件路径,不写这层目录默认就会去node_modules中查找*/
import 'bootstrap/dist/css/bootstrap.css'
$(function(){
$('li:odd').css('backgroundColor','red')
$('li:even').css('backgroundColor',function(){
return '#'+'D97634'
})
})
/*1.webpack能够处理js文件的互相依赖关系
2.webpack能处理js的兼容问题,把高级的浏览器不识别的语法,转为低级的,浏览器能正常识别的语法
运行的命令格式是: webpack 要打包的文件路径 打包好的输出文件的路径*/
/*使用webpack-dev-server这个工具来实现自动打包编译的功能
1.运行npm i webpack-dev-server -D把这个工具安装到项目的本地开发依赖
2.安装完毕后,这个工具的用法和webpack命令的用法完全一样
3.由于我们是在项目中本地安装的webpack-dev-server,所以无法把它当做脚本命令,在powershell终端中直接运行,(只有那些安装到全局-g的工具,才能在终端中正常执行)
4.注意:webpack-dev-server这个工具如果想要正常运行,要求在本地项目中必须安装webpack
5.webpack-dev-server帮我们打包生成的bundle.js文件并没有存放到实际的物理磁盘上,而是直接托管到了电脑的内存中,所以我们在项目根目录中根本找不到这个打包好的bundle.js
6.我们可以认为,webpack-dev-server把打包好的文件,以一种虚拟的形式,托管到了项目的根目录中,虽然我们看不到它,但是可以认为,和dist src node_modules平级,
有一个看不见的文件叫做bundle.js
*/
3.package.json
json代码不能写注释
{
"name": "we",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev2": "webpack-dev-server --open --port 3000 --contentBase src --hot",
"dev": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"bootstrap": "^4.5.0",
"jquery": "^3.5.1"
},
"devDependencies": {
"css-loader": "^3.6.0",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"less": "^3.12.2",
"less-loader": "^6.2.0",
"node-sass": "^4.14.1",
"sass-loader": "^9.0.2",
"style-loader": "^1.2.1",
"url-loader": "^4.1.0",
"webpack": "^4.43.0",
"webpack-dev-server": "^3.11.0"
}
}
4.webpack.config.js
const path=require('path')
//启用热更新的第二步
const webpack=require('webpack')
//导入在内存中生成HTML页面的插件
//只要是插件,都一定要放到plugins节点中去
/*这个插件的两个作用:
1.自动在内存中根据指定页面生成一个内存的页面
2.自动把打包好的bundle.js追加到页面中去
*/
const htmlWebpackPlugin=require('html-webpack-plugin')
//这个配置文件,起始就是一个JS文件,通过Node中的模块操作,向外暴露了一个配置对象
module.exports={
//在配置文件中,需要手动指定入口和出口
//__dirname这里是两个下划线
entry:path.join(__dirname,'./src/main.js'),//入口,表示要使用webpack打包哪个文件
output:{//输出文件相关的配置
path:path.join(__dirname,'./dist'),//出口,指定打包好的文件输出到哪个目录中
filename:'bundle.js'//这是指定输出的文件的名称
},
devServer:{//这是配置dev-server命令参数的第二种形式,相对来说,这种方式麻烦一些
open:true,//自动打开浏览器
port:3000,//设置启动时候的运行端口
contentBase:'src',//指定托管的根目录
hot:true,//启用热更新
},
plugins:[//配置插件的节点
new webpack.HotModuleReplacementPlugin(),//new一个热更新的模块对象,这是启用热更新的第三步
new htmlWebpackPlugin({//创建一个在内存中生成html页面的插件
template:path.join(__dirname,'./src/index.html'),//指定模板页面,将来会根据指定的页面路径去生成内存中的页面
filename:'index.html'//指定生成页面的名称
})
],
module:{//这个节点,用于配置所有第三方模块加载器
rules:[//所有第三方模块的匹配规则
//配置处理.css文件的第三方loader规则
{test:/\.css$/,use:['style-loader','css-loader']},//所有以css结尾的文件,\是转义符,$是结尾
{test:/\.less$/,use:['style-loader','css-loader','less-loader']},//配置处理.less文件的第三方loader规则
{test:/\.scss$/,use:['style-loader','css-loader','sass-loader'] },//配置处理.scss文件的第三方loader规则
// {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader'},//处理图片路径的loader
{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=7955&name=[hash:8]-[name].[ext]'},//传参和url地址传参一样
//limit给定的值是图片的大小,单位是byte,如果我们引用的图片大于或等于给定的limit值,则不会被转为base64格式的字符串
//如果图片小于给定的limit值,则会被转为base64的字符串
//name=[name].[ext]是name是图片名,ext是图片格式的意思,防止系统给图片重命名,保持自己原来的名字和格式
//[hash:8]-代表每个图片名字放一个哈希值的前八位,因为图片哈希值不同,这样既可以保证自己的名称不变,又可以防止带有同样名称的图片会只显示其中一张图片
{test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'}//这是处理字体文件的loader
]
}
}
/*
当我们在控制台直接输入webpack命令执行的时候,webpack做了一下几步
1.首先,webpack发现我们并没有通过命令的形式给它指定入口和出口
2.webpack就会去项目的根目录中,查找一个叫做webpack.config.js的配置文件
3.当找到配置文件后,webpack会去解析执行这个配置文件,当解析执行完配置文件后,就得到了配置文件中,导出的配置对象
4.当webpack拿到配置对象后,就拿到了配置对象中,指定的入口和出口,然后进行打包构建
*/
5.index.css
li{
list-style: none;
}
6.index.less
ul{
padding: 0;
margin: 0;
}
7.index.scss
html,body{
margin: 0;
padding: 0;
li{
font-size: 12px;
line-height: 30px;
}
//默认情况下,webpack无法处理css文件中的url地址,不管是图片还是字体库,只要是url地址,都处理不了
.box{
width:300px;
height: 500px;
background: url('../images/R.jpg');
background-size: cover;
}
.box1{
}
}