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

问题描述：

我按照https://angular.io/docs/ts/latest/guide/webpack.html中的步骤操作，并能够正常工作。如何在Angular2 + Webpack中为每个模块创建一个单独的文件？

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

我尝试在每个模块的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' 
    } 
    ..... 
}

有没有办法做到这一点？

答

可以使用的WebPack的code-splitting与路由的配置可angular2的loadChildren方法。像，

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

这里，yourmodule会被加载on-demand当请求yourroute路线。

我试过这个时遇到错误。 '属性'确保'在类型'NodeRequire'上不存在。 '。任何想法如何解决？ – PrinceG

这是webpack编译错误吗？ – Thaadikkaaran

我想这是包括类型问题..你可能已经使用了requirejs d.ts和node.d.ts.删除需要d.ts只使用node.d.ts – Thaadikkaaran

答

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

当使用多个入口点时，您必须覆盖默认的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中为每个模块创建一个单独的文件？

相关推荐