webpack
概念
前端资源构建工具 / 前端打包工具
它做的事情：
1 把代码进行压缩 (jquery.js--->jquery.min.js)
2 合并 （把多个js合并成一个js）
3 转换(scss-->cs,ts---》js,es6-->ES5)
买点：模块化思想 （复用性）
他把每一个资源(html、css、js)都当成一个模块,模块之间是可以在自由组合（通过配置文件进行组合）
核心属性：
webpack.config.js:
module.exports={
mode:"开发/生产模式",
entry:{打包js入口}
output:{打包js的出口},
plugins:[插件加载],
module:{
//规则
rules:[]
},
devServer:{
//前端服务器,前端跨域
}
}
前置：
步骤1：
局部下载安装核心插件
npm i webpack webpack-cli -D
-D：代表的是所下载的插件不会被打包(打包之后是不含该插件的)
打包前：叫做开发版
打包后：叫做生产版(上线)
普通下载列表：
"dependencies": {
"jquery": "^3.6.1"
}
-D下载列表
"devDependencies": {
"multer": "^1.4.5-lts.1"
}
步骤2：
在项目的根目录新建src目录，我们以后的源码全部放在该目录中
步骤3：
在项目的根目录新建 webpack.config.js 配置文件,编辑：
module.exports={
}
打包命令：
npx webpack
打包js
webpack默认只能打包js
let path=require("path")
module.exports={
// mode:"production/development"
//打包模式
mode:"production",
//打包入口
entry:{
//自定义属性:"js的路径"
login:"./src/user/login/login.js",
register:"./src/user/register/register.js"
},
//打包出口
output:{
// path:"C:/83/code1/webpack_83/dist"
path:path.resolve(__dirname,"dist"),
// [name]是关键词，代表动态
filename:"js/[name].js"
}
}
注意：
1 如果某个模块中有多个js，比如login模块有login.js、a.js、b.js,则我们无需把三个js都打包，而是选择用login.js引入其他两个js，最终只需要打包login.js即可 2 webpack可以让我们使用import命令时不用写后缀.js
打包html
1 局部下载插件
npm i html-webpack-plugin -D
2 配置
let path=require("path")
//页面插件
let HtmlWebpackPlugin =require('html-webpack-plugin')
module.exports={
// mode:"production/development"
//打包模式
mode:"production",
//打包入口
entry:{
//自定义属性:"js的路径"
login:"./src/js/user/login/login.js",
register:"./src/js/user/register/register.js",
},
//打包出口
output:{
// path:"C:/83/code1/webpack_83/dist"
path:path.resolve(__dirname,"dist"),
// [name]是关键词，代表动态
filename:"js/[name].js"
},
//插件
plugins:[
// new HtmlWebpackPlugin({
// //当前页面引入哪些js文件
// chunks:['login'],
// //打包html的入口
// template:"./src/html/user/login.html",
// //打包html的出口
// filename:"html/login.html"
// }),
getHtmlWebpackPlugin('login'),
getHtmlWebpackPlugin('register')
]
}
function getHtmlWebpackPlugin(name){
return new HtmlWebpackPlugin({
//当前页面引入哪些js文件
chunks:[name],
//打包html的入口
template:`./src/html/${name}.html`,
//打包html的出口
filename:`html/${name}.html`
})
}
补充：打包前自动删除dist目录插件
下载：
npm i clean-webpack-plugin -D
配置：
//引入清理插件
let {CleanWebpackPlugin}=require('clean-webpack-plugin')
plugins:[
//清理插件
new CleanWebpackPlugin()
]
打包css
下载插件
npm i mini-css-extract-plugin css-loader style-loader -D css-loader:核心插件 mini-css-extract-plugin： 外部样式 style-loader 内部样式 外部样式和内部样式，只能选择一个
切记：
样式css必须在某个js文件中引入
1 内部样式：
//模块以及规则
module:{
rules:[
//内部样式规则
{
//匹配的文件才会被打包
test:/\.css$/i,
//使用
use:['style-loader','css-loader']
},
]
}
2 外部样式：
//引入外部css插件
let MiniCssExtractPlugin=require('mini-css-extract-plugin')
plugins:[
//外部css插件
new MiniCssExtractPlugin({
//打包的出口
filename:"css/[name].css"
})
],
module:{
rules:[
//外部样式规则
{
//匹配的文件才会被打包
test:/\.css$/i,
//使用
use:[MiniCssExtractPlugin.loader,'css-loader']
},
]
}
打包scss (得基于css的插件和相关配置)
1 下载
npm i sass-loader -D npm i node-sass -D 资源在国外，如果失败，多操作几遍
2
内部样式
module:{
rules:[
//外部样式规则
{
//匹配的文件才会被打包
test:/\.scss$/i,
//使用
use:['style-loader','css-loader','sass-loader']
},
]
}
外部样式
module:{
rules:[
//scss外部样式
{
//匹配的文件才会被打包
test:/\.scss$/i,
//使用
use:[MiniCssExtractPlugin.loader,'css-loader','sass-loader']
},
]
}
打包图片 （依赖css配置和插件）
情况
1 标签：<img src=""
2 css:background-image:url('')
下载插件
npm i url-loader file-loader html-withimg-loader -D
注意：
需要降低css-loader 版本为 5.2.6 npm uni css-loader npm i css-loader@5.2.6 -D
配置：
module:{
rules:[
//css图片
{
test:/\.(jpeg|png|jpg|gif)$/i,
use:[{
loader:"url-loader",
options:{
//图片<8kb则会自动转成base64字符串
limit:1024*8,
//大于8kb的图片的出口
outputPath:"./img",
//解决最新版bug
esModule:false
}
}]
},
//html标签图片 依赖css配置
{
//匹配哪些页面
test:/\.html$/i,
use:["html-withimg-loader"]
}
]
}
devServer服务器
1 下载插件
npm i webpack-dev-server -D
2 使用：
打包:npx webpack 打包+开服： npx webpack serve 解释打包：只会打包到内存，不会真正的打包到dist硬盘---用于开发
3 特点：
热更新，方便程序员，增加了开发效率
4 其他配置
devServer:{
//改变端口
port:8888,
//自动打开浏览器
open:true,
//热更新
hot:true,
//前端处理跨域,内嵌一个代理服务器
proxy:{
// "/标识":{target:"代理的地址"}
// "/stus":{
// target:"http://localhost:3000"
// },
// "/clas":{
// target:"http://localhost:3000"
// },
// "/users":{
// target:"http://localhost:3000"
// },
"/":{
target:"http://localhost:3000"
},
/*
1 在ajax中的url必须以/stus开头，代理才能生效
2 /stus ---相当于---- http://localhost:3000/stus
/stus/getStus ---相当于---- http://localhost:3000/stus/getStus
*/
}
}
5 使用jquery
//引入jquery
import $ from '../../jquery.min.js'
//自己的业务
$("#btn").click(function(){
$.ajax({
url:"/stus/getStus",
success(res){
console.log(res);
}
})
})
面试题：webpack属性的理解
1 mode 设置开发/生产模式 2 entry js入口 3 output js出口 4 plugins 打包页面、外部css的插件 5 module 样式（scss、css）、图片的规则 --->匹配正则+使用xx加载器 6 devServer 内嵌服务器,自己开服不依赖其他服务器,核心解决前端跨域 npx webpack -->打包 npx webpack serve --》开服
283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
