[toc]

介绍

本项目主要包含一些自定义 webpack 和 enhanced-resolve 插件，方便跨项目共享构建插件

命名约定

所有 webpack 插件都以 webpackplugin 结尾，所有 enhanced-resolve 插件都以 resolveplugin 结尾

插件列表

InsertHbsCodeWebpackPlugin

依赖于 html-webpack-plugin，主要作用是在最终生成的 html 文档中加入一段自定义代码片段。

• 使用场景 比如说我们可以区分环境在最终生成的 html 文件里面添加不同的数据，开发环境填充 mock 数据，生产环境填充占位符，丢给 node 层做服务端渲染的时候填充数据

• 使用示例

// 需要预先在模板html中放置此占位符
const placeholder='placeholder';
const hbsCode='<script>console.log("hello world")</script>'

module.exports={
    plugins: {
      new InsertHbsCodeWebpackPlugin({
        placeholder,
        hbsCode,
      });
    }
}

ReplaceModuleResolvePlugin

构建时动态替换 module

• 使用场景 区分环境编译不同的依赖包，比如说我们基于 soundmanager2 写个播放器组件，写代码的时候可以直接引用 soundmanager2 包（源码，包含了调试功能），然后在生产环境构建配置中使用此插件动态将 soundmanager2 替换为 soundmanager2-nodebug-jsmin.js

• 使用示例

module.exports = {
  resolve: {
    plugins: [
      new ReplaceModuleResolvePlugin({
        sourceModule: 'soundmanager2',
        destModule: 'soundmanager2-nodebug-jsmin.js',
      }),
    ],
  },
};

DefineGlobalsWebpackPlugin & FallbackResolvePlugin

找不到某些文件的时候使用默认路径查找文件

• 使用场景 比如说我们写了个 vue 组件包，组件引用了样式和图片文件，然后我们在业务端使用的时候借助此插件组合可以实现业务端未提供样式表和图片的时候直接使用组件包里面默认的样式表和图片

• 使用示例

module.exports = {
  plugins: [DefineGlobalsWebpackPlugin],
  resolve: {
    plugins: [
      new FallbackResolvePlugin({
        pattern: /~?@.*\.(less|css|scss|sass|png|jpg|gif|jpeg)/,
        fallbackPath: path.resolve(__dirname, '../ring-component/src'),
      }),
    ],
  },
};

ChangeAssetsPathWebpackPlugin

webpack 构建完成后修改 assets 输出路径

• 使用场景 使用 vue-cli 构建 vue 项目时如果直接使用 assetsDir 改变 assets 输出路径会导致最终生成的 html 模板文件中的资源路径也发生改变，但是出于某种原因我们可能又不希望最终生成的 html 文件中资源路径发生改变。（比如说做服务端渲染，资源都放在指定路径下）

• 使用示例

new ChangeAssetsPathWebpackPlugin({
  assetsPath: `../../../ring-proxy/public/`,
  ignore: /index\.(?:html|hbs)/,
}),