Webpack5学习笔记（一）：初识Webpack

Webpack5学习笔记（一）：初识Webpack

Author: 哇哇小仔
Date: 2021-03-18
Webpack版本：webpack 5.24.4 webpack-cli 4.5.0
说明：尚硅谷webpack视频教程总结的原创笔记

第1章：webpack简介

1.1 webpack是什么

• webpack是一种前端资源构建工具，一个静态模块打包器（module bundler）。
• 在webpack看来，前端多有的资源文件（js/json/css/img/less/…）都会作为模块处理。
• 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）。

1.2 webpack五个核心概念

1.2.1 Entry

入口（entry）指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。

1.2.2 Output

输出指示webpack打包后的资源bundles输出到哪里去，以及如何命名。

1.2.3 Loader

Loader让webpack能够去处理那些非Javascript文件（webpack自身只理解Javascript）。

1.2.4 Plugins

插件可以用于执行范围更广的任务，插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。

1.2.5 Mode

• 模式指示webpack使用相应模式的配置。
  • development：会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为development，启用 NamedChunksPlugin 和 NamedModulesPlugin。
  • production：会将 DefinePlugin 中 process.env.NODE__ENV 的值设置为production。启用 FlagDependencyUsagePlugin，FlagIncludedChunksPlugin ModuleConcatenationPlugin，NoEmitOnErrorsPlugin，OccurrenceOrderPlugin， SideEffectsFlagPlugin 和 TerserPlugin。

第2章：webpack的初体验

2.1 初始化配置

1. 初始化 package.json
   • 输入指令：npm init
2. 下载并安装webpack
   • 输入指令：npm i webpack webpack-cli -g
   • 输入指令：npm i webpack webpack-cli -D

2.2 编译打包应用

1. 创建文件
2. 运行指令
   • 开发环境
     • 指令：webpack ./src/index.js -o ./build/built.js --mode=development
     • 功能：webpack能够编译打包js和json文件，并且能够将es6的模块化语法转换成浏览器能识别的语法。
   • 生产环境
     • 指令：webpack ./src/index.js -o ./build/built.js --mode=production
     • 功能：在开发配置功能上多一个功能，压缩代码
3. 结论
   • webpack能处理js和json文件，不能处理css/img等其他资源
   • 生成环境和开发环境将ES6模块化编译成浏览器能识别的module
   • 生产环境比开发环境多一个压缩js代码