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

Question

如果我想构建用 Typescript 编写的 angular2 项目怎么办，但我不想将所有内容捆绑到一个包中。我想将供应商捆绑到 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>

我的 webpack.config.js

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']
    })
]
};

Answer 1

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

什么是 webpack

webpack 是一个模块打包器。

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

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

我希望它有所帮助。快乐编码