webpack五个核心模块

1. Entry

表示从哪个文件为入口起点开始打包，分析构建依赖图，可以定义单个或者多个，对应的，可以构建出单页或者多页应用，一般会跟output成对出现。

//单入口
entry: path.resolve(__dirname, "./src/index.js"),

//多入口
entry: {
  index1: path.resolve(__dirname, "./src/index1.js"),
  index2: path.resolve(__dirname, "./src/index2.js"),
}

2. Output

表示打包后的资源输出到哪里，以及命名规则，对应entry多文件入口的情况写法，如果要支持CJS、UMD、ESM、html页面直接引入，都是在这里通过配置实现的。
这里的[name].js表示出口的文件名和多入口的文件名保持一致，这样的话可以做到不同的页面加载不同的js页面。

//单出口
output: {
  filename: "index.js",
  path: path.resolve(__dirname, "dist"),
}

//多出口
output: {
  filename: "[name].js",
  path: path.resolve(__dirname, "dist"),
}

3. Loader

因为webpack只能处理js/json资源，不能处理类似css/img等其他资源，所以需要通过loader支持来处理其他资源，以下是常用的loader:

• babel-loader：转换es6,es7的语法 --- 文件转换
• css-loader：css文件的加载和解析 --- 文件转换
• less-loader：将less转换成css --- 文件转换
• ts-loader：TS转JS --- 文件转换
• file-loader ：静态资源加载 --- 文件转换
• raw-loader：静态资源内联，读取文件以字符串加载进入首屏，可用于移动端做适配时使用，比如在使用rem时，需要计算根节点的字体大小，计算大小要优先于单页应用的JS执行，可以把计算rem的代码以内联脚本的形式插入到html中优先执行。
• thread-loader：多进程打包提高打包速度 --- build优化

4. Plugins

Plugins可以用于执行范围更广的任务，插件的范围包括，从打包优化到压缩，到定义环境变量等，以下是常用的Plugins：

• CommonsChunkPlugin：将chunk相同的模块代码提取成公共JS（chunk：webpack运行时的各个文件一个状态，之后会组合成最终产物bundle）
• CleanWebpackPlugin：清理构建目录
• ExtractTextWebpackPlugin：将css从bundle文件中提取成一个独立的css文件
• CopyWebpackPlugin：文件或者目录拷贝
• HtmlWebpackPlugin：创建html承载bundle，最终文件无论是JS还是css都需要html来承载展示。

5. Mode

指的是webpack使用相应模式的配置，它有以下两个选项：
（1）development，开发环境，它会默认开启以下选项：

• NamedChunksPlugin ：当开启 HMR 的时候，显示更新包的名字。
• NamedModulesPlugin：当开启 HMR 的时候，显示更新包的相对路径。

（2）production，生产环境，它会默认开启以下选项：

• FlagDependencyUsagePlugin：编译时标记依赖 --- tree-shaking相关
• FlagIncludedChunksPlugin：防子chunks多次加载 --- tree-shaking相关
• ModuleConcatenationPlugin：作用域提升(scope hosting) --- scope hosting
• NoEmitOnErrorsPlugin：在输出阶段时，遇到编译错误跳过 --- 编译优化
• OccurrenceOrderPlugin：给经常使用的ids更短的值 --- 编译优化
• SideEffectsFlagPlugin：识别package.json或者module.rules的sideEffects标志（纯的ES2015模块)，安全地删除未用到的export导出 --- tree-shaking相关
• UglifyJsPlugin：删除未引用代码，并压缩 --- 代码优化