Question

我按照https://angular.io/docs/ts/latest/guide/webpack.html中的步骤操作，并且能够使其正常工作。

但我想要的是每个模块都有一个单独的文件。

我尝试在每个模块的webpack.common.js中添加一个新的入口点，但在构建应用时会返回错误。

module.exports = {
    entry: {
        'polyfills': './src/polyfills.ts',
        'vendor': './src/vendor.ts',
        'app': './src/main.ts',
        'test': './src/app/test/test.module.ts'
    }
    .....
}

有没有办法实现这个目标？

Answer 1

您可以在路由配置中使用webpack＆＃39} code-splitting angular2 loadChildren方法。像，

{
    path: 'yourroute', loadChildren: () => require.ensure('./yourmodule', (comp: any) => {
      return comp.default;
    }),
    ....
    ...
}

此处，请求yourmodule路由时，on-demand将被加载yourroute。

Answer 2

要使用多个入口点，您可以将对象传递给入口选项。每个值都被视为一个入口点，键代表入口点的名称。

使用多个入口点时，必须覆盖默认的output.filename选项。否则，每个入口点将写入相同的输出文件。使用[name]获取入口点的名称。

例如

entry: {
    polyfills: './src/polyfills.ts',
    vendor: './src/vendor.ts',
    app: './src/main.ts',
    test: './src/app/test/test.module.ts'
}
output: {
    path: path.join(__dirname, "dist"),
    filename: "[name].entry.js"
}

尝试不使用左侧的引号。另请注意输出

有关详细信息，请参阅Webpack multiple entry points

如何在Angular2 + Webpack中为每个模块创建单独的文件？

2 个答案: