您的webpack.config文件可以服务多个入口点吗? [英] Can your webpack.config file serve multiple entry points?

问题描述

由于在开发项目时学习了Angular 2，所以我并没有像我应该的那样引入路由.我有一个main.js文件，它引导了一个组件，另一个main2.js文件，它引导了第二个组件(我现在知道我应该从一个页面路由它们，但是我们进入项目很远，它将导致备份((如果需要，可以这样做).)我正在尝试使用webpack捆绑代码以实现可加载性"(sp?).

Due to learning Angular 2 while developing the project, I did not incorporate routing as well as I should have. I have a main.js file that bootstraps one component, and another main2.js file that bootstraps a second component (I know now that I should have routed them from one page, but we are very far into the project that it will cause a backup ((will do if necessary however)). I am trying to use webpack to bundle the code for 'loadability' (sp?).

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

Here is my webpack.config.js file:

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/
        }]
    }
};

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

Would it be possible to define two entry points like so:

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/
        }]
    }
};

还是我最好回去重新组织我的项目以使用路由，并让一个入口点为我提供组件?

OR am I better off going back and re-structuring my project to use routing and have one entry point serve me components?

推荐答案

简短的回答，是的.

您可以有多个入口点，并根据需要生成多个输出.
entry属性可以是 string ， object 或 array .

You can have multiple entry points and will generate multiple outputs if you want.
The entry property could be a string, an object or an array.

示例:

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'

With [name] you will get the name of the entry point, 'main' and 'main2' in your case, so you final bundles will be called 'main.js' and 'main2.js'

检查此文档(适用于webpack 1 ，但在webpack 2/3中几乎是相同的.)

Check this docs (is for webpack 1, but in webpack 2/3 is almost the same).

这篇关于您的webpack.config文件可以服务多个入口点吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！