webpack介绍

一．什么是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：指定端口