没有webpackJsonp的独立自定义Webpack配置

Question

我们有一个标准的Angular 8应用程序，但是由于某些与业务相关的特定原因，我们需要公开一些javascript功能。为了使用一种构建并能够重复使用角度应用程序中的代码，我们使用了一个自定义的webpack配置，如下所示：

"customWebpackConfig": {
  "path": "./webpack.exposed.js",
  "replaceDuplicatePlugins": true,
  "mergeStrategies": {
    "module.rules": "append"
  }
}

的内容webpack.exposed.js：

module.exports = {
  entry: {
    'for-others': './src/for-others/for-others.ts',
  },
  output: {
    filename: '[name].js',
  }
};

该for-others文件仅包含一个导出的函数：export default () => {'config1': 1, 'config2': 2};

这样效果很好，并生成了一个单独的for-others.js文件。问题在于该文件不仅以某种方式公开了该函数，而且还向全局webpackJsonp数组添加了一些内容。这意味着其他“外部系统”不能使用我们的配置，因为当push对其进行评估时，我们得到一个数字（push实际上返回类型是什么）。

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["for-others"],{
},[["./src/for-others/for-others.ts","runtime","vendor"]]]);

我们已经在另一个使用单独的Webpack构建的项目中处理了此要求。生成的文件在那里：

/******/ (function(modules) { // webpackBootstrap
/******/ ...
/******/ })({<code>})

在那里，我们使用了一个包装器插件，(() => {\nreturn该插件仅在此代码之前和\n})().default之后添加，因此整个文件将评估为默认导出的函数。

我已经看到了这些 问题， 已经，但没有实际提供的解决方案（或至少我不能得到一个解决方案出来）。

Answer 1

我认为你可以利用optimization.runtimeChunk webpack 选项。

默认情况下，Angular CLI 将其设置为“single”，这基本上是以下别名：

optimization: {
  runtimeChunk: {
    name: 'runtime'
  }
}

所以我会尝试这样的事情：

module.exports = {
  entry: {
    'for-others': './src/for-others/for-others.ts',
  },
  output: {
    filename: '[name].js',
  },
  optimization: {
    runtimeChunk: {
      name: entryPoint => entryPoint.name === 'for-others' ? 'for-others' : 'runtime'
    },
  }
};

这应该删除webpackJsonp部分。然后正如您已经提到的，您可以使用包装器插件：

const WrapperPlugin = require('wrapper-webpack-plugin');

module.exports = {
  entry: {
    'for-others': './src/for-others/for-others.ts',
  },
  output: {
    filename: '[name].js',
  },
  optimization: {
    runtimeChunk: {
      name: entryPoint => entryPoint.name === 'for-others' ? 'for-others' : 'runtime'
    },
  },
  plugins: [
    new WrapperPlugin({
      test: /for-others\.js$/,
      header: '(() => {\nreturn ',
      footer: '\n})().default;'
    })
  ]
};

这样您就可以随时随地导出任何内容。