webpack

nodeJs:fs,path

Webpack :静态资源打包工具。

会以一个或多个文件作为打包入口，将我们整个项目所有文件编译组合成一个或者多个文件输出出去。输出的文件就是编译好的文件，就可以在浏览器端运行了。

1.初始化package.json

npm init -y ,修改name字段和引入文件的入口（通常为main.js）
下载依赖：
npm i webpack wenpack-cli -D

2.启用webpack

开发模式
npx webpack .src/main.js --mode=development
生产模式
npx webpack ./src/main.js --mode==production

3.五大核心概念

Entry（入口）
Output （输出）
Loader（加载器）
Plugins(插件）
Model(两种模式：生产模式:production和开发模式：development）

开发模式：
1.编译代码，是浏览器能识别运行
Loader—处理样式资源

less:

Webpack 文件
在这里插入图片描述

Eslint:错误指示

babel:解析es6
~~

SourceMap:错误行找
HMR：Hot Module Replacement–模块热替换

oneOf：性能提升—文件处理是选一个就退出{oneOf:[]}
Cache:缓存—eslint 和babel–性能提升

提升打包速度：Tree shakeing:
Babel:css
Image Mini

代码分割：多文件导入

Code split:实现–js文件被多次调用，可以直接打包，其他js文件引用；
动态导入js文件：–首页渲染速度更快

单文件导入：

使用的时候加载js文件

WebpackChunkName:

兼容性问题自动处理：

proload立即加载，不展示 和 prefetch:提前加载，不展示