使用Webpack将Angular2应用程序拆分为块

如果我想构建angular2项目，它是用Typescript编写的，但我不想将所有内容捆绑到一个捆绑包中，该怎么办。我想将供应商捆绑到vendor.bundle.js中，其他东西保持与项目结构相同的形状

基础结构：

app/
    main-module/
        main-module.ts
        main-module.html
        main-module.css
    page-module/
        page-module.ts
        page-module.html
        page-module.css
   main.ts
   vendor.ts

我们想要的结构是：

app/
    main-module/
        main-module.js
        main-module.html
        main-module.css
    page-module/
        page-module.js
        page-module.html
        page-module.css
    main.js
    vendor.bundle.js

在index.html中，我们可以

<script src="vendor.bundle.js"></script>
<script src="main-module.js"></script>
<script src="page-module.js"></script>

---

网页包需要en入口点，没有入口点会抛出错误。如果你只想编译你的ts文件，那么你不需要webpack pr systemjs，你可以简单地使用typescript编译器，你将保持相同的文件结构。网页包更重要

什么是网页包 webpack是一个模块绑定器

webpack获取具有依赖关系的模块，并生成表示这些模块的静态资产

注意：-如果您想要一个具有sam文件结构但没有ts文件的dist文件夹，那么您可以使用类似gulp的工具来实现此方法

---

我希望有帮助。快乐编码

我有一些使用CommonJS的依赖项。例如，在node_模块中有很多东西，我将如何在SystemJS上管理它？请进一步解释什么样的依赖关系？您想如何管理它们？很抱歉造成混淆。我不太清楚SystemJS是如何工作的。但我必须处理角度，RxJS模块。我不想将整个node_modules文件夹投入生产。相反，我想让vendor.bunle.js包含Angular、RxJS和其他东西以及基础应用程序js文件。我已经更新了应用程序结构，如上所述。指定多个入口点并使用一个公共块似乎是最常用的代码拆分方法。但是如何将Angular应用程序代码分割成块呢？

var path = require('path');
var webpack = require('webpack');

module.exports = {
context: __dirname + '/app',

entry: {
    'vendor': './vendor',
    'main': './main'
},

stats: {
    colors: true,
    reasons: true
},

output: {
    path: path.join(__dirname, '/js'),
    publicPath: 'js/',
    filename: '[name].bundle.js',
    sourceMapFilename: '[name].[chunkhash].bundle.map',
    chunkFilename: '[id].chunk.js'
},

resolve: {
    extensions: ['', '.ts', '.js'],
    modulesDirectories: ['node_modules']
},

module: {
    loaders: [
        {
            test: /\.ts$/, loader: 'ts-loader',
            exclude: /node_modules/
        },

        {
            test: /\.css$/,
            loaders: ['to-string-loader', 'css-loader']
        },

        {
            test: /\.html$/,
            loader: 'raw-loader'
            // exclude: [helpers.root('src/index.html')]
        }
    ]
},

plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: ['vendor']
    })
]
};