check-inline-loader-plugin for Webpack

通过白名单形式来检测是否存在未知内联loader，用于避免黑客通过内联loader的形式向系统注入恶意脚本。

什么场景下需要使用 check-inline-loader-plugin

1. 在线版自定义组件: 用户在线开发自定义组件；
2. NPM版自定义组件: 用户通过NPM包的形式注入自定义组件；
3. 云构建: 使用webpack构建用户提交的自定义代码；
4. 待补充。

check-inline-loader-plugin的使用方法

1. 安装:

$ npm install --save-dev check-inline-loader-plugin

或者：

$ yarn add check-inline-loader-plugin --dev

2. 在 webpack 中添加 check-inline-loader-plugin

配置 你的webpack.config.js:

// 导入 check-inline-loader-plugin
const CheckInlineLoaderPlugin = require('check-inline-loader-plugin');

module.exports = {
  // ...
  plugins: [
    new CheckInlineLoaderPlugin({
      allowLoaders: [ // 设置loader白名单
        'html-webpack-plugin/lib/loader.js',
        'html-loader/dist/cjs.js',
        'babel-loader/lib/index.js',
        'vue-loader/dist/index.js',
        'vue-loader/dist/templateLoader.js',
        'vue-style-loader/index.js',
        'vue-loader/dist/stylePostLoader.js',
        'sass-loader/dist/cjs.js',
        'css-loader/dist/cjs.js',
        'postcss-loader/dist/cjs.js',
        'mini-css-extract-plugin/dist/loader.js',
        'params-replace-loader/index.js',
        // 'test-custom-loader/index.js',
      ],
      showUsedLoaders: true, // 是否输出当前已用到的loader
      showUnknownLoaders: true, // 是否输出当前检测到的未知loader
      errorMsg: '如需添加自定义loader，请联系平台管理员', // 错误提示内容
      exitMode: 'exit', // 出现未知loader时的退出程序模式，exit 或 throwError
    }),
  ],
}

注意事项

1、初次使用CheckInlineLoaderPlugin时，您可能并不太清楚当前项目中已经用到了哪些loader，您可以先在allowLoaders添加一个已知的loader，通过设置showUsedLoaders为true来测试输出当前已经用到的loader（可能需要多次执行构建才能获取完整的loader列表）。