一. 基本用法

1. entry

2. output

{  path: path.join(__dirname, 'dist'),  filename: 'bundle.js'}

{  module: {    rules: [      { test: /\.txt$/, use: 'raw-loader' }    ]  }}

4. plugins

{  plugins: [    new XXXPlugin(),  ]}

5. mode

• development: NODE_ENV设置为development, 并开启NamedChunksPlugin和NamedNamedModulesPlugin

• production: NODE_ENV设置为production, 开启FlagDependencyUsagePlugin, FlagIncudedChunksPlugin ModuleConcatenationPlugin NoEmitOnErrorsPlugin OccurrenceOrderPlugin SideEffectsFlagPlugin TerserPlugin

• None: 不开启任何优化选项

二. 基本使用

1. 解析ES6

{
  module: {
    rules: [{
      test: /\.js$/,
      use: [{ loader: 'babel-loader', options: { presets: ['@babel/preset-env'], }]
    }]
  }
}

2. 解析React

{
  loader: 'babel-loader',
  options: { presets: ['@babel/preset-env', '@babel/preset-react'] }
}

3. 解析CSS SASS LESS等

{ test: /.css$/, use: ['style-loader', 'css-loader'] }

{  test: /.s[ac]ss$/,  use: [    'style-loader',    'css-loader',    'sass-loader'  ]}

{  test: /\.less$/,  use: [    'style-loader',    'css-loader',    'less-loader'  ]}

4. 解析图片和字体

{
	test: /\.(png|svg|jpg|gif|woff|woff2|eot|ttf|otf)$/,
	use: [
		'file-loader'
	]
}

5. HTML压缩

6. CSS压缩

7. JS压缩

8. 构建前清理构建目录

9. CSS样式自动补全

{
	test: /\.less$/,
	use: [
		'style-loader',
		'css-loader',
		'less-loader',
    {
      loader: 'postcss-loader',
      options: {
        plugins: () => {
          require('autoprefixer')({
            browsers: ['last 2 version', '>1%', 'ios 7']
          })
        }
      }
    }
	]
}

10. 移动端rem适配

1. 引入lib-flexiable

2. 使用px2rem-loader

{
	test: /\.less$/,
	use: [
		//...
		{
			loader: 'px2rem-loader',
      options: {
        remUnit: 75,
        remPrecision: 8
      }
		}
	]
}

11. 静态资源内联

<script>${require('raw-loader!babel-loader!./meta.html')}</script>

<script>${require('raw-loader!babel-loader!../node_modules/lib-flexible')}</script>

12. 多页面打包

module.exports = {
  entry: {
    index: './src/index/index.js',
    search: './src/search/index.js'
  }
}

module.exports = {
  entry: glob.sync(path.join(__dirname, './src/*/index.js'))
}

13. sourcemap

• eval: 使用eval包裹模块代码

• sourcemap: 产生.map文件

• cheap: 不包含列信息

• inline: 将.map作为dataURI引入, 不单独生成.map文件

• module: 包含loader的sourcemap

14. 文件指纹策略

• hash: 和整个项目的构建相关, 只要项目文件由修改, 整个项目构建的hash值就会更改

• Chunkhash: 和webpack打包的chunk相关, 不同的entry会生成不同的chunkhash值

• Contenthash: 根据文件内容来定义hash, 文件内容不变, 则contenthash不变

15. 提取页面公共资源

1. 基础库分离

2. 公共脚本分离

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',  // 将选择哪些chunk进行优化
      minSize: 20000,  // 生成 chunk 的最小体积(单位: bytes)
      minRemainingSize: 0, // 避免大小为零的模块
      minChunks: 1,  // 拆分前必须共享模块的最小 chunks 数
      maxAsyncRequests: 30, // 按需加载时的最大并行请求数
      maxInitialRequests: 30, // 入口点的最大并行请求数
      enforceSizeThreshold: 50000, // 强制执行拆分的体积阈值和其他限制
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

module.exports = {
  //...
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
          name: 'vendor',
          chunks: 'all',
        },
      },
    },
  },
};

module.exports = {
  //...
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          name: 'commons',
          chunks: 'all',
          minChunks: 2
        },
      },
    },
  },
};

16. 开启ScopeHoisting

// webpack.config.js

// ...
const webpack = require('webpack');
module.exports = {
    // ...
    resolve: {
        // 针对 npm 中的第三方模块优先采用 jsnext:main 中指向的 ES6 模块化语法的文件
        mainFields: ['jsnext:main', 'browser', 'main']
    },
    plugins: [
        new webpack.optimize.ModuleConcatenationPlugin()
    ]
};

17. 代码分割和动态Import

1. CommonJS: require.ensure

2. ES6: 动态import (目前没有原生支持, 需要babel转换)

1. 根据 installedChunks 检查是否加载过该 chunk

2. 假如没加载过，则发起一个 JSONP 请求去加载 chunk

3. 设置一些请求的错误处理，然后返回一个 Promise。

4. 当 Promise 返回之后，就会继续执行我们之前的异步请求回调__webpack_require__.bind(null, */\*! ./async \*/* "./src/async.js")

18. SSR支持

1. 事件绑定问题

2. 全局数据注入和同步的问题

3. componentDidMount(react) / mounted(vue)在SSR的场景下不调用, 那么页面默认的数据应该在哪里处理?

4. 样式在服务端是没有处理的, 如何同步处理样式以规避首次渲染的时候样式缺失导致的闪动问题?

//根目录下创建withStyle.js文件
import React, { Component } from 'react';
//函数返回组件
//需要传入的第一个参数是需要装饰的组件
//第二个参数是styles对象
export default (DecoratedComponent, styles) => {
  return class NewComponent extends Component {
    componentWillMount() {
      //判断是否为服务端渲染过程
      if (this.props.staticContext) {
        this.props.staticContext.css.push(styles._getCss())
      }
    }
    render() {
      return <DecoratedComponent {...this.props} />
    }
  }
}

5. 参考资料

19 组件和基础库打包

• ESM: 新一代模块化标准, 提倡引用提前声明, 能够支持完备的tree-shaking以用于减少包体积和性能优化, ESM一般使用rollup, 或直接使用babel来进行处理打包

• CJS: nodejs的模块化标准, 使用它可以实现在nodejs端进行调用

• UMD: 其实是AMD CJS 浏览器全局对象的集合, 能够支持这三种调用方式

{
	"main": "lib/index.js",
  "module": "es/index.js",
}

module.exports = {
  entry: {
    'test-lib': './src/index.js',
    'test-lib.min': './src/index.js'
  },
  output: {
    filename: '[name].js',
    library: 'testLib',
    libraryTarget: 'umd',
    libraryExport: 'default'
  },
  mode: 'none',
  optimization: {
    minimize: true,
    minimizer: [
      new TersetPlugin({
        include: /\.min\.js$/,
      })
    ]
  }
}

三. 文件监听和热更新

• 运行时带上--watch参数

• 配置webpack.config.js中设置watch: true

1. 轮询判断文件的最后编辑时间是否发生变化

2. 如果文件发生变化, 并不会直接告诉监听者, 而是先缓存起来, 等aggregateTimeout

1. webpack-dev-server

// 在webpack.config.js中引入HotModuleReplacementPlugin
// 同时, 配置devServer中hot为true
{
	plugins: [
		new webpack.HotModuleReplacementPlugin()
	],
	devServer: {
		contentBase: './dist',
		hot: true
	}
}

2. webpack-dev-middleware

const express = require('express')
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')

const app = express()
const config = require('./webpack.config.js')
const compiler = webpacl(config)

app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
}))

app.listen(3000, () => {
  console.log('listening in 3000')
})

3. 热更新的基本原理

1. 启动HMR服务做了什么?

// 修改后的entry入口
{ entry:
    { index:
        [
            // 上面获取的clientEntry
            'xxx/node_modules/webpack-dev-server/client/index.js?http://localhost:8080',
            // 上面获取的hotEntry
            'xxx/node_modules/webpack/hot/dev-server.js',
            // 开发配置的入口
            './src/index.js'
    	],
    },
}

• client其实就是启动WebSocket相关的代码, 通过这段逻辑注入到浏览器端, 就实现了WebSocket的启动, 并对开发阶段无侵入

• dev-server其实就是处理通过WebSocket传输的JS逻辑和进行模块替换的部分逻辑

2. 浏览器是怎么知道要拉取什么热更新包的?

3. 浏览器是怎么应用到这些包的?

appliedUpdate[moduleId] = hotUpdate[moduleId];
for (moduleId in appliedUpdate) {
    if (Object.prototype.hasOwnProperty.call(appliedUpdate, moduleId)) {
        modules[moduleId] = appliedUpdate[moduleId];
    }
}

for (i = 0; i < outdatedSelfAcceptedModules.length; i++) {
    var item = outdatedSelfAcceptedModules[i];
    moduleId = item.module;
    try {
        // 执行最新的代码
        __webpack_require__(moduleId);
    } catch (err) {
        // ...容错处理
    }
}

4. 总结

四. Tree-shaking

1. ESM规范的编码方式

2. 配置optimization.useExports为true, 启动标记功能

3. 启动代码优化功能, 可以配置mode为production, 或optimization.minimize为true, 或提供optimization.minimizer数组

// webpack.config.js
module.exports = {
  entry: "./src/index",
  mode: "production",
  devtool: false,
  optimization: {
    usedExports: true,
  },
};

1. ESM

2. useExports

1. Make阶段, 收集模块导出变量, 并记录到模块依赖关系图ModuleGraph中

2. Seal阶段, 遍历ModuleGraph标记模块导出变量有没有被使用

3. 生成产物时, 若变量没有被其他模块使用则删除对应的导出语句

3. 源码中的实现

1. 收集模块

• 将模块的所有ESM导出语句转换为Dependency对象, 记录到module对象的dependencies集合

• FlagDependencyExportsPlugin插件从 entry 开始读取 ModuleGraph 中存储的模块信息，遍历所有 module 对象

• 遍历 module 对象的 dependencies 数组，找到所有 HarmonyExportXXXDependency 类型的依赖对象，将其转换为 ExportInfo 对象并记录到 ModuleGraph 体系中

2. 标记模块导出

• 从 entry 开始逐步遍历 ModuleGraph 存储的所有 module 对象

• 遍历 module 对象对应的 exportInfo 数组

• 确定其对应的 dependency 对象有否被其它模块使用

• 将被使用到的模块标记为已使用

3. 生成代码

• 读取 ModuleGraph 中存储的 exportsInfo 信息，判断哪些导出值被使用，哪些未被使用

• 对已经被使用及未被使用的导出值，分别创建对应的 HarmonyExportInitFragment 对象，保存到 initFragments 数组

• 遍历 initFragments 数组，生成最终结果

4. 删除DeadCode

4. 最佳实践

1. 避免无意义的赋值

2. 注意副作用

import { bar, foo } from "./bar";

let count = 0;

const mock = {}

Object.defineProperty(mock, 'f', {
    set(v) {
        mock._f = v;
        count += 1;
    }
})

mock.f = foo;

console.log(count);

3. 使用#pure标注纯函数调用

4. 禁止 Babel 转译模块导入导出语句

5. 优化导出值的粒度

export default {
    bar: 'bar',
    foo: 'foo'
}

const bar = 'bar'
const foo = 'foo'

export {
    bar,
    foo
}

6. 使用支持 Tree Shaking 的包

5. 参考

五. 构建优化

1. 构建信息提示优化

• errors-only: 只在错误时输出

• minimal: 发生错误或有新的编译时输出

• none: 没有输出

• normal: 标准输出

• verbose: 全部输出

2. 构建(产物与时间)优化

1. 使用内置的stats

webpack --config webpack.config.js  --json > stats.json

1. 使用speed-measure-webpack-plugin收集构建的耗时情况

1. 使用webpack-bundle-analyzer分析打包产物体积

3. 多进程构建

const HappyPack = require('happypack');

exports.module = {
  rules: [
    {
      test: /.js$/,
      // 1) replace your original list of loaders with "happypack/loader":
      // loaders: [ 'babel-loader?presets[]=es2015' ],
      use: 'happypack/loader',
      include: [ /* ... */ ],
      exclude: [ /* ... */ ]
    }
  ]
};

exports.plugins = [
  // 2) create the plugin:
  new HappyPack({
    // 3) re-add the loaders you replaced above in #1:
    loaders: [ 'babel-loader?presets[]=es2015' ]
  })
];

4. 多进程压缩

5. 预编译通用模块

{
  // ...
  entry: {
    library: [
      'react',
      'react-dom',
      'redux',
      'react-redux'
    ]
  },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, './build/library'),
    library: '[name]'
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]',
      path: './build/library/[name].json'
    })
  ]
}

module.exports = {
  plugins: {
    new webpack.DllReferencePlugin({
    	manifest: require('./build/library/manifest.json')
  	})
  }
}

6. 使用构建缓存

• babel-loader可以开启babel编译的缓存

• terser-webpack-plugin可以开启压缩阶段缓存

• 使用cache-loader或hard-source-webpack-plugin提升模块转换阶段缓存

1. babel编译缓存

{
	loaders: ['babel-loader?cacheDirectory=true']
}

2. 压缩阶段缓存

new TerserPlugin({
	parallel: true,
	cache: true
})

3. 模块转换阶段缓存

7. 缩小构建目标

rules: {
  test: /\.js$/,
  loader: 'happypack-loader',
  exclude: 'node_modules'
}

modules: [path.resolve(__dirname, 'node_modules')]

8. 压缩图片

9. CSS tree-shaking

1. PurifyCSS

1. UnCSS

10 . 动态Polyfill

六. webpack执行机制

1. 初始阶段: 通过webpack-cli或webpack-command运行启动webpack命令, 并在webpack-cli/webpack-command中进行命令的序列化和装载, 将调用参数传递给webpack包中暴露的webpack对象

2. 准备阶段: 将调用参数与默认参数, 各种配置来进行拼接, 根据mode来判断要装载的plugin, 例如production会装载terserPlugin, 而其他mode则不会. 同时会装载传入的自定义插件, 然后使用new Webpack来完成webpack对象的初始化

3. 开始构建: 开始构建阶段(run)会启动一个当前任务下唯一的compiler来进行构建任务的调度, 在make阶段查找入口文件, 然后根据入口文件来进行模块和依赖的构建关系, 同时相互之间的依赖关系通过graph来进行记录

4. 执行构建: 执行构建过程中, 每一个构建关系的构建都会启动一个compilation对象来进行构建执行

5. 完成构建: 完成构建(seal)阶段会对每个构建进行整理和优化, 合并等处理

6. 生成产物: 生成产物(emit)阶段会将构建内容, 变成通过webpack require可以调用的一个个模块的数组, 最后进行产物输出

七. Loader

1. Loader的执行机制

2. Loader的实现机制

1. Loader使用loader-runner来进行运行, 运行loader的入口在runLoaders.js

2. runLoaders将静态资源进行解析处理, 进行参数初始化, 然后调用了iteratePitchingLoaders

3. iteratePitchingLoaders会首先判断是否已经将loader走完(下标大于等于loader的总数), 走完就调用processResource来开始进行正式的右往左的loader执行

4. 如果非此情况, 则进行pitch函数的执行, 调用iteratePitchingLoaders并让下标加一

5. 否则, 用loadLoader加载Loader模块

1. loadLoader会将模块进行加载, 通过handleResult进行标准化方便后续调用

2. 之后iteratePitchingLoaders会加载当前loader的pitch函数, 通过runSyncOrAsync来进行执行, 如果执行返回有参数, 且非undefined, 则下标减一, 开始执行iterateNormalLoaders来开始迭代loaders, 否则, 继续迭代执行iteratePitchingLoaders, 也就是往下执行pitch

3. 迭代执行完iteratePitchingLoaders之后, 就会开始执行iterateNormalLoaders, iterateNormalLoaders会从当前的下标的loader开始执行, 执行完之后下标减一, 迭代执行下一个loader, 并将参数传递到下一个loader

3. 关于Acorn

• @babel/parser不支持第三方的插件。

• acorn只支持第四阶段的提案(基本等于写入标准了，只是时间的问题 见此)。

• AST的格式不同，不过可以启动@babel/parser的estree插件来和acorn的AST格式匹配

3. Loader开发

import { runLoaders } from "loader-runner";

runLoaders({
	resource: "/abs/path/to/file.txt?query",
	// String: Absolute path to the resource (optionally including query string)

	loaders: ["/abs/path/to/loader.js?query"],
	// String[]: Absolute paths to the loaders (optionally including query string)
	// {loader, options}[]: Absolute paths to the loaders with options object

	context: { minimize: true },
	// Additional loader context which is used as base context

	processResource: (loaderContext, resourcePath, callback) => { ... },
	// Optional: A function to process the resource
	// Must have signature function(context, path, function(err, buffer))
	// By default readResource is used and the resource is added a fileDependency

	readResource: fs.readFile.bind(fs)
	// Optional: A function to read the resource
	// Only used when 'processResource' is not provided
	// Must have signature function(path, function(err, buffer))
	// By default fs.readFile is used
}, function(err, result) {
	// err: Error?

	// result.result: Buffer | String
	// The result
	// only available when no error occured

	// result.resourceBuffer: Buffer
	// The raw resource as Buffer (useful for SourceMaps)
	// only available when no error occured

	// result.cacheable: Bool
	// Is the result cacheable or do it require reexecution?

	// result.fileDependencies: String[]
	// An array of paths (existing files) on which the result depends on

	// result.missingDependencies: String[]
	// An array of paths (not existing files) on which the result depends on

	// result.contextDependencies: String[]
	// An array of paths (directories) on which the result depends on
})

// 配置loader
{
  loader: 'xxx-loader',
    options: {
      name: 'name'
    }
}

// 获取入参
const loaderUtils = require('loader-utils')
module.exports = function(source) {
  const { name } = loaderUtils.getOptions(this)
  // do sth.
  return source;
}

const loaderUtils = require('loader-utils')
module.exports = function(source) {
  const { name } = loaderUtils.getOptions(this)
	const callback = this.async()
  fs.readFile('./xxx.txt', 'utf-8', (err, data) => {
    if (err) {
      callback(err, '')
    }
    callback(null, data)
  })
}

八. Plugin插件

1. 插件的基本结构

class MyPlugin {
  constructor(options) {
    this.options = options
  }
	apply(compiler) {
    compiler.hooks.done.tap('My Plugin', (stats) => {
      console.log('MyPlugin executed')
    })
  }
}

module.exports = MyPlugin

// usage
plugins: [new MyPlugin({ ...OPTIONS })]

2. 插件的错误处理

1. 通过throw的方式抛出

2. 通过compilation对象的warnings和errors接收

compilation.warnings.push('warning')
compilation.errors.push('error')

1. 通过compilation进行文件写入

const { RawSource } = require('webpack-sources')

module.exports = class DemoPlugin {
	constructor(options) {
		this.options = options
	}
	apply(compiler) {
		const { name } = this.options
		compiler.plugin('emit', (compilation, cb) => {
			compilation.assets[name] = new RawSource('demo')
			cb()
		})
	}
}

1. 编写插件的插件

// If your plugin is direct dependent to the html webpack plugin:
const HtmlWebpackPlugin = require('html-webpack-plugin');
// If your plugin is using html-webpack-plugin as an optional dependency
// you can use https://github.com/tallesl/node-safe-require instead:
const HtmlWebpackPlugin = require('safe-require')('html-webpack-plugin');

class MyPlugin {
  apply (compiler) {
    compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
      console.log('The compiler is starting a new compilation...')

      // Static Plugin interface |compilation |HOOK NAME | register listener
      HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(
        'MyPlugin', // <-- Set a meaningful name here for stacktraces
        (data, cb) => {
          // Manipulate the content
          data.html += 'The Magic Footer'
          // Tell webpack to move on
          cb(null, data)
        }
      )
    })
  }
}

module.exports = MyPlugin

1. ShowCase: 编写一个生成产物zip包的插件

const JSZip = require('jszip')
const path = require('path')
const RawSource = require('webpack-source').RawSource
const zip = new JSZip()

module.exports = class ZipPlugin {
  constructor(options) {
    this.options = options
  }
  apply(compiler) {
   	compiler.hooks.emit.tapAsync('ZipPlugin', (compilation, callback) => {
			// 创建一个zip的容器
      const folder = zip.folder(this.options.filename)
      // 遍历compilation的静态产物
      for (let filename in compilation.assets) {
        // 获取每个文件名称的源内容
        const source = compilation.assets[filename].source()
        // 放入zip容器
        folder.file(filename, source)
      }
      // 调用命令生成zip buffer
      zip.generateAsync({
        type: 'nodebuffer'
      }).then((content) => {
        // 通过compilation的option中的输出路径来拿到输出位置
        const outputPath = path.join(compilation.options.output.path. this.options.filename)
        // 根据输出位置得到当前相对的输出位置
        const outputRelativePath = path.relative(compilation.options.output.path, outputPath)
        // 注入到assets静态资源中, 等待webpack构建完成后生成
        compilation.assets[outputPath] = new RawSource(content)
        // 调用回调, 代表异步的hook结束
        callback()
      })
    })
  }
}

九. ModuleFederation 模块联邦

1. 是什么

2. 使用示例

// STEP1: 配置MF的暴露和共享模块规则
const { ModuleFederationPlugin } = require('webpack').container;
new ModuleFederationPlugin({
  // 输出的模块名
  name: 'app2',
  // 构建输出的文件名
  filename: 'remoteEntry.js',
  // 被远程引用时可暴露的资源路径及其别名
  exposes: {
    './App': './src/App',
  },
  // 与其他应用之间可共享的依赖
  shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
})

// STEP2: 设置动态启动项目(使用动态的import)
import("./bootstrap");

// STEP3: 项目正常运行
...

// STEP1: 配置MF的引入规则和远端模块地址
const {ModuleFederationPlugin} = require("webpack").container;
new ModuleFederationPlugin({
  // 输出的模块名
  name: "app1",
  // 远程引用的应用名及其别名的映射
  remotes: {
    // 远程引用的路径
    app2: "app2@[app2Url]/remoteEntry.js",
  },
  // 与其他应用之间可共享的依赖
  shared: {react: {singleton: true}, "react-dom": {singleton: true}},
})

// STEP2: 动态启动项目, 并设置app2远程路径
window.app2Url = "http://localhost:3002" // 演示需要, 这个应该是判断环境进行动态的
import("./bootstrap");

// STEP3: 使用远端模块
import React, {Suspense} from "react";
const RemoteApp = React.lazy(() => import("app2/App"));

const App = () => {
  return (
    <Suspense fallback={"loading..."}>
    	<RemoteApp/>
    </Suspense>
	)
}
export default App;

3. 实现核心

1. 同步共享模块

new ModuleFederationPlugin({ shared: { react: { 一些配置 } }})

2. 异步远端模块

import('remote-app/async-component')

3. 模块执行时机

1. require模块并执行（第一个模块是入口模块），执行过程中

2. 如果遇到静态import

3. 如果这个模块是非共享同步模块，回到1如果这个模块是共享同步模块，前往4

4. 如果遇到动态import

5. 如果这个模块是本地异步模块，前往4如果这个模块是远端异步模块，也前往4

6. 先require.ensure把异步模块相关的异步模块加载到modulesMap

7. 如果是来自2.b，会初始化shared-scope，用来处理依赖共享相关逻辑如果是来自3.a，没有额外操作如果是来自3.b，会利用shared-scope来复用依赖，实现依赖共享

4. 实现原理

1. 动态启动

1. 加载依赖项

1. 下载远程依赖项定义的入口文件

1. 加载远程expose的内容

1. 继续后续流程