15、WebPack 项目构建与优化全解析

WebPack 项目构建与优化全解析

1. WebPack 插件与 Visual Studio 调试器

WebPack 插件能够介入 WebPack 的打包过程并对其进行修改，与仅对文件进行预处理的加载器不同。部分插件包含在 WebPack 包中，而其他插件则是独立的 npm 包。插件本质上是 JavaScript 构造函数，需要使用 require(...) 指令进行加载。在创建插件实例时，插件选项会作为构造函数的参数传入，然后将插件实例作为数组元素插入到 WebPack 配置的 plugins 属性中，示例代码如下：

const pluginConstructorFunction = require('<plugin name');
module.exports = {
    ...
    plugins: [
        ...
        new pluginConstructorFunction(...<options>...),
        ...
    ],
    ...
}

用于自定义 WebPack 源映射的插件是 SourceMapDevToolPlugin ，它并非存在于外部包中，而是作为 'webpack' 对象的一个属性可用，代码示例如下：

const webpack = require('webpack');
const