跳转至
本文阅读量 77 次

1. Webpack 介绍

1.1 基本概念

基本概念

  • Entry
  • Output
  • Loaders
  • Plugins
  • Mode

1.1.1 target

告诉 webpack 要输出的 js 是运行在哪些环境，如 web, node, electron 等，可用的列表定义参考这里 https://webpack.js.org/configuration/target/ ⧉

1.2 webpack-cli 主要命令

命令 用法 说明
init init\|create\|c\|new\|n [generation-path] [options] 初始化一个 webpack 项目及配置
version version\|v [commands...] 查看 webpack, webpack-cli 等版本信息
build build\|bundle\|b [entries...] [options] 打包，默认命令
help help\|h [command] [option] 输出命令的帮助信息
info info\|i [options] 输出本机系统信息
serve serve\|server\|s [options] 运行 webpack-dev-server
watch watch\|w [entries...] [options] 运行 webpack 并监控文件变化
configtest configtest\|t [config-path] 验证 webpack 配置
loader loader\|l [output-path] [options] 创建 loader 脚手架项目
plugin plugin\|p [output-path] [options] 创建 plugin 脚手架项目

1.3 Asset 管理

webpack 4 的时候使用 raw-loader, url-loader, file-loader 加载不同的资源文件，webpack 5 引入了 asset-module ⧉ 可以替代这些 loader 进行资源的加载

1.4 输出管理

1.5 备注

  • laoder 可以指定多个，执行是顺序相关的

1.5.1 Chunk Loading Operation

1.6 参考