您的webpack.config文件可以提供多个入口点吗?

时间:2017-07-11 22:04:46

标签: angular webpack

由于在开发项目时学习了Angular 2,我没有采用路由以及我应该拥有的路由。我有一个main.js文件引导一个组件,另一个main2.js文件引导第二个组件(我现在知道我应该从一个页面路由它们,但我们在项目中很远,它会导致一个备份((必要时会这样做))。我正在尝试使用webpack捆绑“可加载性”的代码(sp?)。

这是我的webpack.config.js文件:

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

module.exports = {
    entry: "./main",
    output: {
        path: __dirname,
        filename: "./dist/bundle.js"
    },
    resolve: {
        extensions: ['.js', '.ts']
    },
    module: {
        loaders: [{
            test: /\.ts/, loaders: ['ts-loader'], exclude: /node_modules/
        }]
    }
};

是否可以像这样定义两个入口点:

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

module.exports = {
    entry: "./main",
    output: {
        path: __dirname,
        filename: "./dist/bundle.js"
    },
    resolve: {
        extensions: ['.js', '.ts']
    },
    module: {
        loaders: [{
            test: /\.ts/, loaders: ['ts-loader'], exclude: /node_modules/
        }]
    }
};

module.exports = {
    entry: "./main2",
    output: {
        path: __dirname,
        filename: "./dist/bundle2.js"
    },
    resolve: {
        extensions: ['.js', '.ts']
    },
    module: {
        loaders: [{
            test: /\.ts/, loaders: ['ts-loader'], exclude: /node_modules/
        }]
    }
};

或者我最好回去重新构建我的项目以使用路由并让一个入口点为我提供组件?

1 个答案:

答案 0 :(得分:5)

简短回答,是的。

您可以拥有多个入口点,并根据需要生成多个输出。
entry属性可以是字符串对象数组

示例:

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

module.exports = {
    entry: {
        "main": "./main.ts",
        "main2": "./main2.ts",
    }
    output: {
        path: path.join(__dirname, './dist'),
        filename: "[name].js"
    },
    // Rest of your config ...
};

使用[name],您将获得入口点的名称,' main' 和' main2'在您的情况下,所以最终的捆绑包将被称为' main.js' ' main2.js'

检查此docs(适用于webpack 1,但在webpack 2/3中几乎相同)。