webpack基础配置
1.安装webpack (3以下版本需要指定版本，不指定默认安装最新版本,4以后还要安装webpack-cli -g)
全局安装：npm i webpack webpack-cli -g
本地安装：npm i webpack@4.21
更改名字后打包需要添加指令 webpack --config webpack.configXXX.js
// cmd规范
module.exports={
// 打包模式
mode:"development",
//配置入口文件
// 对象（推荐）
entry:{
app1:"./app1.js",
app2:"./app2.js"
},
//数组写法，当作一个入口
// entry:["./app1.js","./app2.js"],
//出口
output:{
path:__dirname +'/dist',//输出目录
filename:"[name].[hash:4].bundle.js"//文件名，4位hash，bundle.js
},
//loader(基本格式)
module:{
rules:[
{
},
{
}
]
},
//插件
Plugin:[new Plugin()],
//代码压缩
optimization:{}
}
webpack处理js
一，babel-loader的配置 babel-loader写入webpack配置 ——>定义编译配置（options或.bablerc）
安装 npm i babel-loader @babel/core --save-dev (前者调用后者编译)
{
test:/\.js$/,//正则对什么文件处理
// loader:"bable-loder"//后面只能跟字符串
//use:[],//数组可以配置多个loader,从后往前处理
use:{//对象可以配置
loader:"bable-loader",
//preset-->@bable/preset-env相当于一套集合好的规范
options:{
preset:[
[
'@bable/preset-env',
{
targets:{//目标
browsers:[
">1%",//占有率
"last 2 versions",//最后两个版本
"not ie<=8",//大于ie8
]
}
}
]
]
}
},
},
二，Eslint-loader(5后废弃)Eslint-webpack-plugin ——>定义配置 ——>定义规范
安装 npm i eslint @eslint --save-dev (前者调用后者编译)
.eslintrc
const { sources } = require("webpack");
module.exports= {
env:{
browser:true,
es2021:true,
//集成别人规范
//eslint-config-standard
//eslint-config-airbnb
extends:[
"standard",
//继承vue插件
"plugins:vue/strongly-recommended"
],
//特殊语法支持（如vue）
Plugins:[
//安装npm i eslint-plugin-vue
//注册vue插件
"vue"
],
//解析配置
parserOptions:{
ecmaVersion:6,//es版本
sourceType:"module",//模块
//检查
ecmaFeatrue:{
jsx:true
}
},
//检查细节（重要最高优先级）
rules:{
//eslint官网查看
}
}
}
css与资源文件的处理
webpack不认识css
js中引入css一定会打包失败————>css-loader(让webpack识别css)————> {style-loader(css写入js，执行后作为style标签插入html)}或 {mini-css-extra-plugin(提取css作为独立文件)}
一，安装npm i css-loader style-loader mini-css-extra-plugin --save-dev
less-css处理
一，安装npm i less less-loader
css压缩 一，安装npm i css-minimizer-webpack-plugin --save-dev
处理资源文件
js中引入css————>File-loader,url-loader(webpack5自带对资源文件支持)————>一些优化（hash,base64）
一，安装npm i File-loader url-loader --save-dev
//处理css
{
test:/\.css$/,//正则对什么文件处理
use:[minicss.cssloader,"style-loader","css-loader"],//数组可以配置多个loader,从后往前处理
},
//处理less
{
test:/\.less$/,//正则对什么文件处理
use:[minicss.cssloader,"css-loader","less-loader"],//处理less,css,生成单独文件
},
//处理静态资源
{
test:/\.(jpg|png|svg|gif)$/,//正则对什么文件处理
loader:"url-loader",
options:{
limit:0,//转base64
name:"[name].[hash:4].[ext]"
}
},
//处理静态资源(5以上版本)
{
test:/\.(jpg|png|svg|gif)$/,//正则对什么文件处理
type:"asset",//自定义 asset/inline/ 转base64 asset/inline/resource 作为独立文件
parser:{
dataUrlCondition:{
maxSize:5000
}
},
generator:{
name:"[name].[hash:4][ext]"
}
},
webpack处理html
浏览器———>html———>{js+css}
安装 npm i html-webpack-piugin --save-dev
//html插件
new htmlwebpack({
template:'./index.html',
filename:"index.html",//配置文件名
chunks:["app"],//选项
//压缩相关
minify:{
collapseWhitespace:false,//一行显示
removeComments:false,//移除注释
},
//js插入位置
inject:body,//body header
//模板字符串<% %>
arr:[{}]
}),
代码分割
单入口：runtime+vendor+核心模块+异部模块 多入口：runtime+vendor+每个核心业务代码+common
//代码压缩
optimization:{
//代码分割
splitChunks:{
chunks:"all",
// minChunks:2,//重复次数
// minSize:1000,//文件大小
// name:"a",//拓展文件名字
//指定模块分割特殊需求
cacheGroups:{
vendor:{
test:/[\//]node_modules[\//]/,
filename:"vendor.js",
chunks:all,
minChunks:1
},
//公用文件
Common:{
filename:"common.js",
chunks:all,
minChunks:2,//重复次数
minSize:1000,//文件大小
name:"a",//拓展文件名字
}
}
},
//webpack运行js
runtimeChunk:{
filename:"runtime"
}
},
技巧配置
resolve:{
//路径别名
alias:{
"@css":"/css"
},
extensions:[".js"]//省略后缀
}
开发模式
//源码地图
devtool:"eval-cheap-source-map",
//开发模式
devServer:{
port:1000,
hot:true,
Proxy:{
"https://xxxxxxx":{
targets:"xxxxxxxx",
//路径重写
pathRewrite:{
"^/":""
}
}
},
}
