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

2024-05-18 • 问答

未显示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)   
            }

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

Angular使用基于旧字符串的loadChildren属性命名块的方式是使用a custom Angular webpack plugin similar to this one。使用直接的Webpack完成命名代码拆分块的方式是使用"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带有魔术注释的命名块不是他们要测试的东西，因此可能无法正常工作。

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

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

webpack.config.js

app.routing.ts

z442820293 回答：webpack 4的角度8延迟加载中未显示chunkName

大家都在问