Question

• loader: 加载器，定义规则处理 js/json 之外的文件要用到的 loader。打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个。

• plugin: 插件，主要处理 loader 无法解决的事情，如压缩、优化、调试等等。插件可分为内置插件和第三方插件。

  • 内置插件和 webpack 一起安装。内置插件作为 webpack 的静态属性存在的。

    const webpack = require('webpack');
    
    // 定义： new webpack.PLUGIN(options)
    // 示例：DefinePlugin  expose mode variable to other modules
    new webpack.DefinePlugin({
        'process.env.WEBPACK_MODE': JSON.stringify(mode),
    }),
    

  • 第三方插件需要额外安装。使用高频的第三方插件有可能在 webpack 后续版本中成为内置插件，如 webpack-dev-server。

• 模块：离散功能块(discrete chunks of functionality)。每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易举。

表格 webpack 常用内置插件

插件英文名	插件中文名	详述
BannerPlugin	横幅	为每个 chunk 生成的文件头部添加一行注释，一般用于添加作者、公司、版权等信息
DefinePlugin	定义	全局常量定义插件，使用该插件通常定义一些常量值
DllPlugin DllReferencePlugin	分离公共库和业务库	DllPlugin 插件用来把需要独立打包的第三方库分离出来单独打包最后会输出两个文件，一个是打包好的第三方库 bundle；还有一个是用来给 DllReferencePlugin 映射依赖的 manifest.json。
EnvironmentPlugin	环境
ProgressPlugin	进度
ProvidePlugin	提供	全局自动加载模块，而不必到处 import 或 require
uglifyjs-webpack-plugin	js 压缩	单线程压缩文件。通过 UglifyJS2 来完成代码压缩。
webpack-dev-server	http 服务器	webpack-3.0+内置此插件。会加载代理配置文件 webpack.proxy-config.js

表格 webpack 常用第三方插件/模块

插件/模块名称	简述	详述
autoprefixer	自动补全 css3 前缀	自动检测兼容性给各个浏览器加个内核前缀的插件。
clean-webpack-plugin	清理文件	每次打包的时候，就会自动清除 webpaco.config.js 中 output 下的文件夹。
CommonsChunkPlugin	提取公共模块
copy-webpack-plugin	复制
extract-text-webpack-plugin	分离 CSS	Extract text from bundle into a file. 把额外的数据加到编译好的文件中。Webpack 打包默认会把 css 和 js 打包在一块，然而我们通常习惯将 css 代码中放在标签中，而将 js 引用放在页面 底部。将 css 代码放在页面头部可以避免 FOUC 问题。同时如果 css 和 js 分离也有利于这加强样式的可缓存性。用此插件来分离 js 与 css 使得样式文件单独打包。
fork-ts-checker-webpack-plugin	多进程 ts 检查
html-webpack-plugin	HTML 打包	简化了 HTML 文件的创建
mini-css-extract-plugin	迷你 css 抽取
optimize-css-assets-webpack-plugin	css 优化
speed-measure-webpack-plugin	加速计量	--measure=true
terser-webpack-plugin	压缩代码	webpack-4.0 默认
webpack-bundle-analyzer	打包分析
webpack-manifest-plugin
webpack-parallel-uglify-plugin	并行压缩	多进程并行运行 UglifyJS 插件。
...

备注：1. FOUC - flash of unstyled content，指的是网页渲染时，外部样式还没加载好，就以浏览器默认样式短暂地展示了部分内容，等到外部样式加载完成，又恢复正常的这个页面闪烁的过程。