一.什么是webpack
webpack是前端的项目构建工具,可以实现对项目静态资源的合并,压缩,打包等功能。
核心:
1. 入口entry
2.出口output
3.模式mode
4.插件plugin
5 加载器loader
二.webpack的安装
目前最新的版本是5.x.x 后续会继续升级
项目安装
npm i webpack webpack-cli -D
三.Webpack的基本使用
(1) 基本使用案例
第一步:创建一个项目文件夹并进入文件夹中创建src文件夹
第二步:初始化项目生成package.json文件
npm init -y
第三步:项目中安装webpack
第四步:创建并编写webpack配置文件webpack.config.js
第五步:在src文件夹下创建自已的文件main.js并编写业务逻辑代码。如:
第六步:可以编译main.js文件自动生成dist/bundle.js文件,
在package.json文件中的scripts节点中添加 “build”:"webpack"并在终端中运
行
npm run build
在dist文件夹中就会生成编译后的bundle.js文件
四.webpack-dev-server的使用
作用:可以实现开发即时查看代码的实现效果
本质上是安装了express服务器
一.在项目中局部安装webpack-dev-server
第二步:在package.json文件中加入以下代码,可以实现npm启动webpack-dev-server
第三步:启动webpack-dev-server
但是这种方式,每次修改main.js文件时需要再次启动,不方便
可以在webpack serve加入常用的参数
–open:自动打开浏览器
–port:指定端口