webpack4学习

webpack-study-new

更加详细的webpack学习

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

代码：webpack-study-new

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

指令：

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

结论：

1. webpack 本身能处理 js/json 资源，不能处理 css/img 等其他资源
2. 生产环境和开发环境将 ES6 模块化编译成浏览器能识别的模块化，但是不能处理 ES6 的基本语法转化为 ES5（需要借助 loader）
3. 生产环境比开发环境多一个压缩 js 代码
4. 预加载 prefetch：等其他资源加载完毕，浏览器空闲了，再偷偷加载资源
5. PWA: 渐进式网络开发应用程序(离线可访问)
6. 使用dll技术，对某些库（第三方库：jquery、react、vue…）进行单独打包

笔记

1. package.json中，browserslist的环境配置，取决于webpack.config.js中配置的process.env.NODE_ENV = 'development'
2. vscode配置eslint时，第一个时全局下载eslint包，npm i -g eslint,第二个时要在项目中初始化eslint配置文件eslint --init

webpack性能优化

• 开发环境性能优化
• 生产环境性能优化

开发环境性能优化

• 优化打包构建速度
  • HMR(模块热替换，devServer的配置项hot设为true，此时，要在entry中加上index.html,因为热替换导致不能热更新)
• 优化代码调试
  • source-map

生产环境性能优化

• 优化打包构建速度
  • oneOf
  • babel缓存
  • 多进程打包
  • externals
  • dll
• 优化代码运行的性能
  • 缓存(hash-chunkhash-contenthash)
  • tree shaking
  • code split
  • 懒加载/预加载
  • pwa

webpack5

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

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

下载

• npm i webpack@next webpack-cli -D

自动删除 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 会被删除

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

import {
      something } from './something';

function usingSomething() {
     
  return something;
}

export function test() {
     
  return usingSomething();
}

当设置了"sideEffects": false时，一旦发现test方法没有使用，不但删除test，还会删除"./something"

3. 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"

更多内容

https://github.com/webpack/changelog-v5