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

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

用旧的基于字符串的loadChildren属性命名块的方法是使用与此类似的自定义角度webpack插件。命名代码拆分块的方法是使用“魔术评论”，特别是webpackChunkName注释--当我测试它时，它适用于我的开发构建，但是一旦我切换到生产构建，它就会消失，我将回到枚举的JavaScript文件。以下是我的进口产品的样子：

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

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

我不认为Google/Angular会发布webpack插件，因为这个问题是1)。并不是真正阻止开发(我们只需要依赖源代码映射)，2。简单来说就是低优先级。为此编写插件意味着支持更多的代码。这里有一个bug报告，它们的状态也是一样的：https://github.com/angular/angular-cli/issues/16697用神奇的注释命名块并不是他们测试的目标，所以它很可能无法工作。

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