webpack核心模块

entry

entry：入口起点开始打包，分析构建依赖图，可以定义单个或者多个

output

打包后的资源输出到哪里（位置path），以及命名规则（filename）
输出格式[name].js表示出口的文件名和多入口的文件名保持一致，这样的话可以做到不同的页面加载不同的js页面。

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时，需要计算根节点的字体大小，计算rem的代码以内联脚本的形式插入html中优先执行

Plugins

插件的范围包括，从打包优化到压缩，到定义环境变量等
CommonsChunkPlugin：将chunk相同的模块代码提取成公共Js
CleanWebpackPlugin：清理构建目录
ExtractTextWebpackPlugin：将css从bundle文件中提取成一个独立的css文件
CopyWebpackPlugin：文件或者目录拷贝
HtmlWebpackPlugin：创建html承载bundle，最终文件无论是JS还是css都需要html来承载展示。
minimizer：压缩代码 ，css-minimizer-webpack-plugin 这个插件也可以用来压缩 css 文件。和 optimize-css-assets-webpack-plugin 加 cssnano 的效果是一样的。

Mode

配置环境
UglifyJsPlugin：删除未引用代码，并压缩 — 代码优化（webpack4中已废除）

devServer

自动构建，自动刷新浏览器显示改动内，生产环境不需要

devtool

devtool: 配置source-map（决定使用7种中的哪一种）
精准追踪报错行数，生产环境不需要

使用预加载

设置webpackPrefetch:true
在index.js中的import方法中的魔法注释中，添加webpackPrefetch:true 或 webpackPreload：true
prefetch（预获取） 与 preload 的区别为 prefetch 是等浏览器将主文件下载完后，在下载 prefetch 的文件，
而 preload 则是一起下载（结果要在控制台的 NetWork 下的 All 查看， js 下是查看不到的）

preload主要用于预加载当前页面需要的资源；而prefetch主要用于加载将来页面可能需要的资源；

preload的特点：
preload加载的资源是在浏览器渲染机制之前进行处理的，并且不会阻塞onload事件；
preload可以支持加载多种类型的资源，并且可以加载跨域资源；
preload加载的js脚本其加载和执行的过程是分离的。即preload会预加载相应的脚本代码，待到需要时自行调用；