如何避免从 webpack 中的块加载？ [Angular] [内联 js]

Question

我正在尝试将 angular 项目捆绑到一个文件中（js、css 和 html）。我已经设法使 html 和 css 正常工作，并且 js 现在也是内联的（使用 HtmlWebpackInlineSourcePlugin）。压缩后生成的js文件如下：

vendor、main 和 polyfill 内嵌在 index.html 中。但是我看到为 main 和 vendor js 生成的 js 正在尝试从块 3.js 加载（这有为应用程序编写的实际 js）。

我希望这个块也是内联的，但似乎找不到实现它的方法。即使我确实设法使其内联，我如何避免 vendor/main js 加载这个块。 webpack 配置如下。

'use strict';

const webpackMerge         = require('webpack-merge');
const ngw                  = require('@ngtools/webpack');
const HtmlWebpackPlugin    = require('html-webpack-plugin');
var HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
const isDev                = process.env.NODE_ENV !== 'production';

//just a wrapper for path
const helpers              = require('./helpers');

module.exports = {
    mode: 'production',

    output: {
        path: helpers.root('dist'),
        filename: '[name].js',
    },

    resolveLoader: {
        modules: [helpers.root('node_modules')]
    },

    entry: {
        vendor: './src/vendor.ts',
        polyfills: './src/polyfills.ts',
        main: './src/main.ts'
    },

    resolve: {
        extensions: ['.ts', '.js', '.scss']
    },

    module: {
        rules: [
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.(scss|sass)$/,
                use: [
                    { loader: 'style-loader', options: { sourceMap: isDev } },
                    { loader: 'css-loader', options: { sourceMap: isDev } },
                    { loader: 'sass-loader', options: { sourceMap: isDev } }
                ],
                include: helpers.root('src', 'assets')
            },
            {
                test: /\.(scss|sass)$/,
                use: [
                    'to-string-loader',
                    { loader: 'css-loader', options: { sourceMap: isDev } },
                    { loader: 'sass-loader', options: { sourceMap: isDev } }
                ],
                include: helpers.root('src', 'app')
            },
            {
                test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
                loader: '@ngtools/webpack'
            }
        ]
    },

    plugins: [
        new ngw.AngularCompilerPlugin({
            tsConfigPath: helpers.root('tsconfig.json'),
            entryModule: helpers.root('src', 'app', 'app.module#AppModule')
        }),
        new HtmlWebpackPlugin({
            template: 'src/index.html',
            inlineSource: '.(js|css)$',
        }),
        new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
       // new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/chunk/])
    ]
};

仅供参考 - 我希望它是一个内联文件，因为我需要在 google 应用程序脚本（编辑器插件）中使用。

Answer 1

我最终使用 webpack 中的 libraryTarget 编译为 umd 解决了这个问题。

output: {
    path: helpers.root('dist'),
    publicPath: '/',
    filename: '[name].js',
    libraryTarget: "umd",
    globalObject: 'this'
}

如何避免从 webpack 中的块加载？ [Angular] [内联 js]

How to avoid loading from chunk in webpack? [Angular] [inline js]

javascript

inline

webpack

html-webpack-plugin

angular