【Webpack】Webpack5 学习笔记

Webpack 是一个前端构建工具,项目打包工具,用来管理和打包前端项目

1、Webpack 的核心概念

1、Entry

入口指示,Webpack 以哪个文件为入口起点开始打包,分析构建内部依赖图

2、Output

输出指示,Webpack 打包后的资源 bundles 输出到哪里去,以及如何合并

3、Loader

Loader 让 Webpack 能够处理那些非 js 文件(Webpack 只能理解 js 文件)

4、Plugins

Plugins 让 Webpack 能够做到更强大的功能,扩展了 Webpack 的使用

5、Mode

【Webpack】Webpack5 学习笔记

2、Webpack 的基本使用

1、首先进行环境初始化

npm init

2、引入 Webpack 依赖

npm i webpack webpack-cli

3、打包文件

开发模式:

webpack 入口文件地址 -o 出口文件地址 --mode=development

生产模式:

webpack 入口文件地址 -o 出口文件地址 --mode=production

4、结论

  1. Webpack 能处理 js、json 资源,不能处理 css、img 等其他资源
  2. 生产环境和开发环境将 ES6 模块化编译成浏览器能够识别的模块化
  3. 生产环境比开发环境多一步压缩 js 代码
上一篇:webpack5学习(一)


下一篇:Illustrator绘制传统年画“年年有余”