angular 8 延迟加载 webpack 4 中未显示 chunkName

Question

未显示延迟加载的 chunkName

webpack.config.js

const webpack = require('webpack');
const path = require('path');

var PROD = JSON.parse(process.env.PROD_ENV || '0');

module.exports = {
    entry: {
        clientApp: "./App/Modules/main",
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "[name].bundle.js",
        chunkFilename: '[name]-[chunkhash].js',
        publicPath: '/dist/',
    },
    resolve: {
        extensions: ['.js']
    },
    module: {
        loaders: [ 
            'angular-router-loader'
        ]
    },

    plugins: [
    ]
}

app.routing.ts

{
                path: 'about',     
                loadChildren: () => import('../Features/about/about.module').then(m => m.AboutModule)   
            }

它没有显示块的模块名称。我在这里做错了什么？

Answer 1

Angular 使用基于旧字符串的 loadChildren 属性命名块的方式是 a custom Angular webpack plugin similar to this one. The way that named code spliting chunks is done with straight webpack is with "Magic Comments" 特别是 webpackChunkName 注释 - 当我测试它时，它有效对于我的开发版本，但是一旦我切换到生产版本，它就会消失，我又回到枚举的 JavaScript 文件。这是我导入的样子：

{
  path: 'account',
  loadChildren: () => import(/* webpackChunkName: "account" */ './account/account.module')
    .then((m) => m.AccountModule)
}

完成此操作后，我的块在为开发构建时获得名称 account.js，但在为生产构建时，它仍然是 1.js。我不知道生产构建不同的确切原因，可能与另一个 webpack 插件冲突，可能与 AOT 有关，很难确定。

我认为 Google/Angular 不会发布 webpack 插件，因为这个问题是 1.) 不会真正阻碍开发（我们可以只依赖源映射），2.) 只是低优先级。为此编写插件意味着支持更多代码。这是一个错误报告，他们在其中陈述了很多：https://github.com/angular/angular-cli/issues/16697 带有神奇注释的命名块不是他们测试的东西，因此它可能无法工作。

虽然不推荐使用异步加载子路由的字符串方法，但它仍然有效，我们仍然可以使用它来命名块。

angular 8 延迟加载 webpack 4 中未显示 chunkName

chunkName not displayed in angular 8 lazy loading with webpack 4

lazy-loading

angular-routing

angular8

webpack-4

webpack.config.js

app.routing.ts