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

Question

我们有一个标准的 Angular 8 应用程序，但出于某些特定的业务相关原因，我们需要公开一些侧边的 javascript 函数。为了使用一个构建并能够重用 Angular 应用程序中的代码，我们使用 custom webpack config，如下所示：

"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，因此整个文件的计算结果为默认导出的函数。

我见过thesequestionsalready，但实际上没有一个提供解决方案（或者至少我无法找到解决方案）。

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;'
    })
  ]
};

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