webpack
概念
前端资源构建工具/打包工具
webpack 是一个开源的前端包工具。webpack 提供了前端开发缺乏的模块化开发方式,将各种静态资源视为模块,并从它生成优化过的代码。 要使用 webpack 前须先安装 node.js。
作用:
1 转换:把浏览器不能识别的代码转成你能够识别的代码(scss--》css,ts--》js)
2 合并:将同类文件进行合并(文件个数变少)
3 压缩优化代码:将代码进行压缩 (项目体积变小、高级语法--》低级语法)
4 提供了一个思想: 模块化思想 (自由组合--html可以自由引入js/css)
核心属性:
项目根目录必有一个配置文件: webpack.config.js
module.exports={
mode:"", //设置开发模式/生产模式
entry:{}, //配置js的入口
output:{}, //配置js的出口
plugins:[],//插件配置、加载
module:{},//规则
devServer:{}//服务器相关(前端跨域)
}
创建项目
1 新建目录
2 初始化 npm init -y
3 局部下载安装核心插件 npm i webpack webpack-cli -D
-D 会下载到devDependencies中,没有加是下载到Dependencies
Dependencies中的插件打包后依然还有
devDependencies中的插件不会被打包
4 在项目下新建src目录(该目录就是写源码的地方)
5 在项目根目录新建配置文件: webpack.config.js
1 配置 模型、js入口、js出口(mode、entry、output)
//引入path
let path=require('path')
module.exports={
//production 生产版
//development 开发版
mode:"production",
//js入口,需要打包的js
// 自定义名字:需要打包的js路径
entry:{
login:'./src/js/login/login.js',
register:'./src/js/register.js'
},
//js出口,被打包到哪个地方 dist
output:{
//配置出口目录dist
path:path.resolve(__dirname,"dist"),
//配置出口文件名字 [name] 能够动态根据js入口配置的自定义名字生产js文件名
filename:"js/[name].js",
}
}
打包命令:
npx webpack
2 配置html (plugins)
2.1 下载安装插件
npm i html-webpack-plugin -D
2.2 配置
//引入path
let path=require('path')
//引入html插件
let HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
//production 生产版
//development 开发版
mode:"production",
//js入口,需要打包的js
// 自定义名字:需要打包的js路径
entry:{
user:'./src/js/user/user.js'
},
//js出口,被打包到哪个地方 dist
output:{
//配置出口目录dist
path:path.resolve(__dirname,"dist"),
//配置出口文件名字 [name] 能够动态根据js入口配置的自定义名字生产js文件名
filename:"js/[name].js",
},
//配置页面
plugins:[
getHtmlWebpackPlugin("user"),
]
}
//封装
function getHtmlWebpackPlugin(name){
return new HtmlWebpackPlugin({
//页面引入哪些js文件,数组中需要引入入口配置k
chunks:[name],
//需要打包的html
template:`./src/html/user/${name}.html`,
//打包的路径
filename:`html/${name}.html`
})
}
3 配置 css (module)
css只能跟着js走(寄生):如果a.html中引入了a.js,则只能在a.js中引入需要的css
3.1 局部下载安装插件
npm i mini-css-extract-plugin css-loader style-loader -D
css-loader :核心插件
mini-css-extract-plugin :打包成外部样式
style-loader :打包内部样式
3.2 配置 内部样式
module:{
rules:[
//内部样式:
{
//匹配需要打包的css i代表的忽略大小写
test:/\.css$/i,
//使用加载器
use:["style-loader","css-loader"]
}
]
}
3.3 配置外部样式
//引入外部css插件
let MiniCssextractPlugin=require('mini-css-extract-plugin')
module:{
rules:[
//外部样式
{
test:/\.css$/i,
use:[MiniCssextractPlugin.loader,"css-loader"]
}
]
}
4 配置scss
4.1 下载插件
npm i sass-loader -D
npm i node-sass -D (可能会报错,资源在国外)
4.2
内部样式
module:{
rules:[
{
test:/\.scss$/i,
use:["style-loader","css-loader","sass-loader"]
}
]
}
外部样式
plugins:[
//外部样式打包出口
new MiniCssextractPlugin({
filename:"css/[name].css"
})
],
module:{
rules:[
{
test:/\.scss$/i,
use:[MiniCssextractPlugin.loader,"css-loader",'sass-loader']
}
]
}
5 配置图片
1 <img src =""
2 css中的 background-image:url()
5.1 安装插件
npm i url-loader file-loader html-withimg-loader -D
file-loader:核心插件
url-loader:css背景图
html-withimg-loader:页面中img标签
5.2 配置
module:{
rules:[
//内部样式:
{
//匹配需要打包的css i代表的忽略大小写
test:/\.css$/i,
//使用加载器
use:["style-loader","css-loader"]
},
{
test:/\.scss$/i,
use:["style-loader","css-loader","sass-loader"]
},
// css中的背景图
{
test:/\.(png|jpg|jpeg|gif)$/i,
use:[{
loader:"url-loader",
options:{
//如果图片大小<=8KB,则转成base64格式,性能优化
limit:1024*8,
//打包到dist/img中
outputPath:"./img",
//解决最新版兼容问题
esModule:false
}
}]
},
//img中的图片
{
test:/\.html$/i,
use:['html-withimg-loader']
}
]
}
注意:降低css-loader版本为5.2.6:
npm uni css-loader
npm i css-loader@5.2.6 -D
6 配置服务器(devServer)
6.1 下载插件
npm i webpack-dev-server -D
6.2 打包+开服
打包:只会在内存中打包(并不会生产dist)
npx webpack serve
6.3 访问
http://localhost:8080/已进入dist根目录的
http://localhost:8080/html/user.html
6.4 其他配置
devServer:{
port:8000,
//自动打开浏览器
// open:true,
//支持热更新
hot:true
}
6.5 前端跨域 使用代理(只能用于开发环境)
proxy:底层会在开发环境中创建一个代理服务,做ajax的转发(如果打包上线,则失效)
devServer:{
port:8000,
//自动打开浏览器
// open:true,
//支持热更新
hot:true,
proxy:{
"/users":{
//要代理的地址
target:'http://localhost:3000'
},
"/stus":{
target:'http://localhost:3000'
}
//以后通过ajax访问的地址:
// url:"/users" ====> url:"http://localhost:3000/users"
webpack中使用jquery
js:
import $ from '../../js/jquery.min.js' (webpack底层会改变jquery的源码,从return 改为 export default ..)
$(function(){
$("#login").click(function(){
$.ajax({
url:"http://localhost:3000/users/login",
data:{
username:$("#username").val(),
password:$("#password").val()
},
success(res){
if(res.code==200){
alert("ok")
}
}
})
})
})
Webpack是一款流行的前端资源构建工具,支持模块化开发方式,并能转换、合并、压缩代码。本文详细介绍Webpack的安装配置流程,包括核心属性、插件使用及对JS、CSS、SCSS和图片等静态资源的处理。
1万+

被折叠的 条评论
为什么被折叠?



