webpack简介
webpack是一个前端打包工具
用它来处理现代前端错综复杂的依赖关系(A插件需要B插件B插件有D插件 F插件需要A插件)生成浏览器可以识别静态资源
Vue 前期脚手架就是用webpack制作
(Vue 开始推荐vite构建工具(更快))
react脚手架
angular等现代框架脚手架都是依赖webpack
核心感念
入口entry
项目运行的起点 告诉webpack从哪开始打包
entry:'./src/index.js', //入口
出口output
打包好放入哪 filename 文件名 path 路径
output:{ //出口
filename:"main-[hash].js",//文件名
// path:path.resolve(__dirname,'/dist')
path:__dirname+'/dist' //文件夹 __dirname 当前目录
},
模式 mode
产品模式production
开发模式development
mode:"production",//模式:开发模式 production产品模式
loader 加载器 需要提前安装 url-loader file-loader
webpack默认只能加载处理js文件
loader让webpack拥有处理其他文件的能力
{test:/\.(png|jpg|jpeg|webp|ico|gif|bmp)$/,
use:[{
loader:"url-loader", //使用url加载器
options:{limit:5000,name:'images/[hash].[ext]'},
// 选项,当图片小于5000字节时候,转换base64(小图片减少一次http请求)
// 文件命名 images文件夹,hash值(计算出图片的名称) ext 后缀名
}]
},
插件 plugin
webpack运行生命周期过程中做一些其他任务(压缩,清理)
plugins:[
// 实例化插件,指定template模板的位置
new HtmlWebpackPlugin({
template:'./public/index.html'
}),
// 实例化好清理
new CleanWebpackPlugin()
],
webpack配置
默认webpack.config.js 配置文件中