chunkName 未显示在带有 webpack 4 的 angular 8 延迟加载中

Question

LazyLoading 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是使用与此类似的自定义 Angular webpack 插件。使用直接 webpack 完成命名代码分割块的方式是使用“Magic Comments” ，特别是webpackChunkName注释 - 当我测试它时，它适用于我的开发构建，但是一旦我切换到生产构建，它就会消失，我我回到枚举的 JavaScript 文件。这是我的导入的样子：

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

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

I do not think that Google/Angular will publish a webpack plugin because this problem is 1.) not really blocking development (we can just rely on source maps), 2.) simply low priority. Writing a plugin for this means supporting even more code. Here is a bug report where they state as much: https://github.com/angular/angular-cli/issues/16697 named chunks with magic comments is not something they test for, so it will likely not work.

While the string method of async loading children of a route is deprecated, it still works and we can still use it to name chunks.