概念
webpack是一个前端打包工具
用它来处理现代前端错综复杂的依赖关系(A插件需要B插件B插件有D插件 F插件需要A插件)生成浏览器可以识别静态资源
Vue 前期脚手架就是用webpack制作
(Vue 开始推荐vite构建工具(更快))
react脚手架
angular等现代框架脚手架都是依赖webpack
webpack核心概念
入口
entry
项目运行的起点
告诉webpack从哪开始打包
出口
output
打包好放入哪
filename 文件名
path 路径
模式
mode
产品模式
production
开发模式
development
loader
加载器
webpack默认只能加载处理js文件
loader让webpack拥有处理其他文件的能力
插件
plugin
webpack运行生命周期过程中做一些其他任务
(压缩,清理)
webpack配置
默认webpack.config.js 配置文件中
devServer
安装:npm i webpack-dev-server -D
作用:开启一个本地服务器
open:true
是否自动打开浏览器
host:“localhost”
域名
port:8080
端口号
hot:true
更新(文件保存,网页自动更新)
package.json
script:{“serve”:"webpack serve"}
npm run serve 运行项目
loader
加载器
css处理
安装:npm i css-loader style-loader -D
作用:css-loader处理.css文件 style-loader把css加载到style标签内
module:{