没有webpackJsonp的独立自定义webpack配置 [英] Independent custom webpack config without the webpackJsonp

问题描述

我们有一个标准的Angular 8应用程序，但是出于某些与业务相关的特定原因，我们需要公开一些javascript功能.为了使用一种构建并能够重复使用角度应用程序中的代码，我们使用了

We have a standard Angular 8 app, but for some specific business-related reasons we need to have some on-the-side javascript functions exposed. In order to use one build and to be able to reuse code from the angular application, we use a custom webpack config like this:

"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',
  }
};

其他人的 文件仅包含一个导出的函数: export default()=>{'config1':1，1，'config2':2};

The for-others file contains just one exported function: export default () => {'config1': 1, 'config2': 2};

这很好用，并生成一个单独的 for-others.js 文件.问题在于该文件不仅以某种方式公开了该功能，而且还向全局 webpackJsonp 数组中添加了一些内容.这意味着其他外部系统"不能使用我们的配置，因为当评估此 push 时，我们得到一个数字( push 确实是.)

This works quite well and produces a separate for-others.js file. The problem is that this file doesn't just expose the function somehow, but adds something to a global webpackJsonp array. This means that other "external systems" can't use our config, as when this push is evaluated, we as a result we get a number (what the return type of push actually is).

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

我们在另一个使用单独的Webpack构建的项目中处理了此要求.在那里生成的文件就是:

We've handled this requirement in another project where separate webpack builds are used. There the generated file is just:

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

我们使用了一个包装器插件，该插件仅在此代码前添加(()=> {\ nreturn ，并在其后添加 \ n})().default ，因此整个文件的计算结果为默认导出的函数.

There we use a wrapper plugin that just adds (() => {\nreturn before this code and\n})().default after it, so the whole file evaluates to the default-ly exported function.

我已经看到这些 "，但实际上没有人提供解决方案(或者至少我无法解决).

I've seen these questions already, but none actually provides a solution (or at least i can't get a solution out).

推荐答案

我认为您可以利用

I think you can make use of optimization.runtimeChunk webpack option.

默认情况下，Angular CLI将其设置为，它基本上是以下项的别名:

By default Angular CLI sets it to 'single' which is basically alias for:

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 部分.然后，正如您已经提到的，您可以使用包装器插件:

This should remove webpackJsonp part. Then as you have already mentioned, you can use a wrapper plugin:

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

以便您可以随心所欲地导出任何内容.

so that you can export whatever and wherever you want.

这篇关于没有webpackJsonp的独立自定义webpack配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！