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需要入口点，没有入口点会抛出错误。如果您只想编译ts文件，那么您不需要webpack pr systemjs，您只需使用typescript编译器，您将保持相同的文件结构。 Webpack更多。

什么是webpack

webpack是一个模块捆绑器。

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

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

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

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

1 个答案:

什么是webpack