angular - 使用 Webpack 将 Angular2 应用拆分成 block

Question

如果我想构建用 Typescript 编写的 angular2 项目，但我不想将所有项目打包成一个包怎么办？我想将 vendor 捆绑到 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 需要入口点，没有入口点会抛出错误。如果你只想编译你的 ts 文件那么你不需要 webpack pr systemjs 你可以简单地使用 typescript 编译器并且你将保持相同的文件结构。 Webpack 远不止于此。

什么是webpack

webpack 是一个模块打包器。

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

NOTE:- If you want a dist folder with sam file structure but without ts files then you may use tools like gulp for this approach.

希望对你有所帮助。快乐编码