目录
一、相关概念
本质：一个第三方模块包，用于分析，并打包代码
支持所有类型的文件的打包
支持less/sass=>css
支持ES5/7/8=>ES5
webpack打包流程：
初始化包环境 yarn init
安装依赖包 yarn add webpack webpack-cli -D
配置scripts(自定义命令) "scripts":{ "build":"webpack"}
二、相关操作
Ⅰ.两个js文件打包成1个js文件
①新建src下的资源
②add.js定义求和函数并导出
③index.js引入add模块并使用函数输出结果
④执行“yarn build”自定义命令，进行打包(确保终端路径在src的父级文件夹）
webpack再次打包
①src下新建tool/tool.js
②定义数组求和函数导出
③index.js-引入tool模块函数并使用，打印结果
④执行‘yarn build’自定义命令，进行打包
修改webpack默认的入口（src/index.js)和默认的出口（dist/main.js）
①可以在webpack.config.js中配置entry属性，来指定一个或者多个不同的入口起点
②可以在webpack.config.js中指定一个output字段
const path=require('path')
module.exports={
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
}
}Ⅱ.自动生成html文件
①.新建public/index.html
②下载插件 yarn add html-webpack-plugin -D
③webpack.config.js添加配置
const path=require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
plugin:[
new HtmlWebpackPlugin({
template:'./public/index.html'
})
]
}注意：webpack默认只能处理js文件
css-loader 会对@import和url()进行处理，就像解析import/require()一样
style-loader 把css插入到DOM中
Ⅲ.打包css文件
①.新建src/css/index.css
②.在main.js中引入css
import "./css/index.css"③.下载加载器 yarn add css-loader style-loader -D
④.webpack.config.js配置
const path=require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
plugin:[ //plugins插件配置
new HtmlWebpackPlugin({
template:'./public/index.html'//告诉webpack使用插件时，以我们的html文件作为模板去生成dist/html文件
})
],
module:{ //加载器配置
rules:[ //规则
{
test:/\.css$/i,//匹配.css结尾的文件
use:["style-loader","css-loader"]//让webpack使用这两个loader处理css文件
//从右到左，所以不能颠倒顺序
//css-loader：webpack解析css文件-把css代码一起打包进js中
//style-loader:css代码插入到DOM中
}
]
}
}Ⅳ.打包less文件
less-loader:识别less文件
less:将less编译为css
①.新建src/less/index.less
②.在main.js中引入less
import "./less/index.less"③.下载加载器 yarn add less less-loader -D
④.webpack.config.js配置
const path=require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
plugin:[ //plugins插件配置
new HtmlWebpackPlugin({
template:'./public/index.html'//告诉webpack使用插件时，以我们的html文件作为模板去生成dist/html文件
})
],
module:{ //加载器配置
rules:[ //规则
{
test:/\.css$/i,//匹配.css结尾的文件
use:["style-loader","css-loader"],//让webpack使用这两个loader处理css文件
//从右到左，所以不能颠倒顺序
//css-loader：webpack解析css文件-把css代码一起打包进js中
//style-loader:css代码插入到DOM中
},
{
test:/\.less$/i,
use:[
"style-loader",
"css-loader",
"less-loader"
],
}
]
},
}Ⅴ.打包图片文件
①新建src/assets/下准备图片文件
②在index.less对body设置背景图片
body{
background: url('../assets/logo_small.png') no-repeat center;
}③在main.js导入图片文件，设置img标签插入到body
import imObj from './assets/1.gif'
let theImg=document.createElement("img")
theImg.src=imgObj
document.body.appendChild(theImg)④.webpack.config.js配置
const path=require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
plugin:[ //plugins插件配置
new HtmlWebpackPlugin({
template:'./public/index.html'//告诉webpack使用插件时，以我们的html文件作为模板去生成dist/html文件
})
],
module:{ //加载器配置
rules:[ //规则
{
test:/\.css$/i,//匹配.css结尾的文件
use:["style-loader","css-loader"],//让webpack使用这两个loader处理css文件
//从右到左，所以不能颠倒顺序
//css-loader：webpack解析css文件-把css代码一起打包进js中
//style-loader:css代码插入到DOM中
},
{
test:/\.less$/i,
use:[
"style-loader",
"css-loader",
"less-loader"
],
},
{
//图片文件的配置
test:/\.(gif|jpg|jpeg)$/,
type:'asset' //匹配上面的文件后webpack会把他们当作静态资源处理打包
}
]
},
}如果设置的是asset模式
会以8KB大小区分图片文件
小于8KB的，把图片转换成base64打包进出口文件中
大于8KB的，把图片文件直接输出到dist下面
图片转换成base64，放到了js文件中
好处：浏览器不用发请求，直接可以读取，速度快
坏处：图片太大，再转换成base64就会让图片的体积增大30%左右，得不偿失
Ⅵ.处理字体图标
①新建src/assets/下放入fonts字体相关文件夹
②在main.js引入assets/fonts/iconfont.css
③在main.js创建一个i标签，使用字体图标标签添加到body上
import './assets/fonts/iconfont.css'
let theI=document.createElement('i')
theI.className='iconfont icon-qq'
document.body.appendChild(theI)④webpack.config.js配置
const path=require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
plugin:[ //plugins插件配置
new HtmlWebpackPlugin({
template:'./public/index.html'//告诉webpack使用插件时，以我们的html文件作为模板去生成dist/html文件
})
],
module:{ //加载器配置
rules:[ //规则
{
test:/\.css$/i,//匹配.css结尾的文件
use:["style-loader","css-loader"],//让webpack使用这两个loader处理css文件
//从右到左，所以不能颠倒顺序
//css-loader：webpack解析css文件-把css代码一起打包进js中
//style-loader:css代码插入到DOM中
},
{
test:/\.less$/i,
use:[
"style-loader",
"css-loader",
"less-loader"
],
},
{
//图片文件的配置
test:/\.(gif|jpg|jpeg)$/,
type:'asset' //匹配上面的文件后webpack会把他们当作静态资源处理打包
},
{
test:/\.(eot|svg|ttf|woff|woff2)$/,
type:'asset/resource',//所有的字体图标，都输出到dist下
generator:{ //生成文件的名字-定义规则
filename:'fonts/[name].[hash:6][ext]' //[ext]会替换成.eot或.woff
}
}
]
},
}Ⅶ.降级js语法
①在src/main.js中定义箭头函数，并打印箭头函数变量（千万不能调用，为了让webpack打包函数，看降级效果）
①下载加载器 yarn add babel-loader @babel/core @babel/preset-env -D
②webpack.config.js配置
const path=require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
plugin:[ //plugins插件配置
new HtmlWebpackPlugin({
template:'./public/index.html'//告诉webpack使用插件时，以我们的html文件作为模板去生成dist/html文件
})
],
module:{ //加载器配置
rules:[ //规则
{
test:/\.css$/i,//匹配.css结尾的文件
use:["style-loader","css-loader"],//让webpack使用这两个loader处理css文件
//从右到左，所以不能颠倒顺序
//css-loader：webpack解析css文件-把css代码一起打包进js中
//style-loader:css代码插入到DOM中
},
{
test:/\.less$/i,
use:[
"style-loader",
"css-loader",
"less-loader"
],
},
{
//图片文件的配置
test:/\.(gif|jpg|jpeg)$/,
type:'asset' //匹配上面的文件后webpack会把他们当作静态资源处理打包
},
{
test:/\.(eot|svg|ttf|woff|woff2)$/,
type:'asset/resource',//所有的字体图标，都输出到dist下
generator:{ //生成文件的名字-定义规则
filename:'fonts/[name].[hash:6][ext]' //[ext]会替换成.eot或.woff
}
},
{
test:/\.m?js$/,
exclude:/(node_modules|bower_components)/,//不去匹配这些文件下的文件
use:{
loader:'babel-loader',//使用这个loader处理js文件
options:{//加载器选项
presets:['@babel/preset-env']//按照这里的规则降级我们的js语法
}
}
}
]
},
}三、开发服务器
缓存已经打包的内容，只重新打包修改的文件，最终运行在内存中给浏览器使用
①下载模块包 yarn add webpack-dev-server -D
②自定义webpack开发服务器启动命令server在package.json里
"scripts": {
"build":"webpack",
"server":"webpack server"
}③启动当前工程里的webpack开发服务器 yarn server
此时的dist在服务器的内存中
修改开发的服务器的端口
webpack.config.js配置
devServer:{
port:3000
}