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

Question

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

3

如果我想要构建一个使用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']
    })
]
};

- max_dev

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jorawar Singh · Answer 1

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

什么是webpack

webpack是一个模块打包工具。

webpack接受带有依赖关系的模块，并生成表示这些模块的静态资源。

注意：如果你想要一个带有相同文件结构但没有ts文件的dist文件夹，那么你可以使用像gulp这样的工具来实现这个方法。

希望对你有所帮助。愉快的编码！