一、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

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

1.2.3 Loader

Loader：让 webpack 能够去处理那些非 JS 的文件，比如样式文件、图片文件(webpack 自身只理解
JS)

1.2.4 Plugins

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

1.2.5 Mode

模式(Mode)：指示 webpack 使用相应模式的配置。

二、Webpack 初始化

2.1 初始化配置

1. 初始化 package.json：npm init -> 生产package.json
2. 下载安装webpack：(webpack4以上的版本需要全局/本地都安装webpack-cli)全局安装：cnpm i webpack webpack-cli -g本地安装：cnpm i webpack webpack-cli -D

   2.2 编译打包应用

   创建 src 下的 js 等文件后，不需要配置 webpack.config.js 文件，在命令行就可以编译打包。
   指令：

• 开发环境：webpack ./src/index.js -o ./build/built.js —mode=developmentwebpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js 整体打包环境，是开发环境
• 生产环境：webpack ./src/index.js -o ./build/built.js —mode=productionwebpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js 整体打包环境，是生产环境

结论：

1. webpack 本身能处理 js/json 资源，不能处理 css/img 等其他资源
2. 生产环境和开发环境将 ES6 模块化编译成浏览器能识别的模块化，但是不能处理 ES6 的基本语法转化为 ES5（需要借助 loader）
3. 生产环境比开发环境多一个压缩 js 代码

   三、Webpack5 介绍和使用

   此版本重点关注以下内容:

• 通过持久缓存提高构建性能.
• 使用更好的算法和默认值来改善长期缓存.
• 通过更好的树摇和代码生成来改善捆绑包大小.
• 清除处于怪异状态的内部结构，同时在 v4 中实现功能而不引入任何重大更改.

• 通过引入重大更改来为将来的功能做准备，以使我们能够尽可能长时间地使用 v5.

  下载

  以前 npm i webpack@next webpack-cli -D
  现在默认下载webpack就是5了

  自动删除 Node.js Polyfills

  早期，webpack 的目标是允许在浏览器中运行大多数 node.js 模块，但是模块格局发生了变化，许多模块用途现在主要是为前端目的而编写的。webpack <= 4 附带了许多 node.js 核心模块的 polyfill，一旦模块使用任何核心模块（即 crypto 模块），这些模块就会自动应用。
  尽管这使使用为 node.js 编写的模块变得容易，但它会将这些巨大的 polyfill 添加到包中。在许多情况下，这些 polyfill 是不必要的。
  webpack 5 会自动停止填充这些核心模块，并专注于与前端兼容的模块。
  迁移：

• 尽可能尝试使用与前端兼容的模块。

• 可以为 node.js 核心模块手动添加一个 polyfill。错误消息将提示如何实现该目标。

Chunk 和模块 ID
添加了用于长期缓存的新算法。在生产模式下默认情况下启用这些功能。
chunkIds: “deterministic”, moduleIds: “deterministic”

Chunk ID

你可以不用使用 import(/ webpackChunkName: “name” / “module”) 在开发环境来为 chunk 命名，生产环境还是有必要的
webpack 内部有 chunk 命名规则，不再是以 id(0, 1, 2)命名了

Tree Shaking

1. webpack 现在能够处理对嵌套模块的 tree shaking

// inner.js export const a = 1; export const b = 2; // module.js import as inner from ‘./inner’; export { inner }; // user.js import as module from ‘./module’; console.log(module.inner.a);
在生产环境中, inner 模块暴露的 b 会被删除

1. webpack 现在能够多个模块之前的关系

import { something } from ‘./something’; function usingSomething() { return something; } export function test() { return usingSomething(); }
当设置了”sideEffects”: false时，一旦发现test方法没有使用，不但删除test，还会删除”./something”

1. webpack 现在能处理对 Commonjs 的 tree shaking

   Output

   webpack 4 默认只能输出 ES5 代码
   webpack 5 开始新增一个属性 output.ecmaVersion, 可以生成 ES5 和 ES6 / ES2015 代码.
   如：output.ecmaVersion: 2015
   SplitChunk
   // webpack4 minSize: 30000; // webpack5 minSize: { javascript: 30000, style: 50000, }

   Caching

   // 配置缓存 cache: { // 磁盘存储 type: “filesystem”, buildDependencies: { // 当配置修改时，缓存失效 config: [__filename] } }
   缓存将存储到 node_modules/.cache/webpack

   监视输出文件

   之前 webpack 总是在第一次构建时输出全部文件，但是监视重新构建时会只更新修改的文件。
   此次更新在第一次构建时会找到输出文件看是否有变化，从而决定要不要输出全部文件。

   默认值

• entry: “./src/index.js
• output.path: path.resolve(__dirname, “dist”)
• output.filename: “[name].js”

  更多内容

  github

  参考

  尚硅谷2020最新版Webpack5实战教程(从入门到精通)