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

问题描述

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

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

我也希望这个块是内联的，但似乎找不到办法做到这一点。即使我确实设法使其内联，我如何避免供应商/主 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',{ loader: 'sass-loader',options: { sourceMap: isDev } }
                ],include: helpers.root('src','assets')
            },use: [
                    'to-string-loader','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/])
    ]
};

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

解决方法

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

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