Question

我想使用webpack捆绑我的TypeScript ReactJs项目。由于我的项目相当大，我想将utils与主应用程序代码分开捆绑，因此我可以将它们分开。

我有以下文件夹结构;

Scripts
    - App
        - Components
            - ComponentOne.tsx
        - App.tsx
    - Utilities
        - Interfaces
            - IHelperInterface.ts
        - Interfaces.ts

ComponentOne使用导入语句IHelperInterface

导入import { IHelperInterface } from '../../Utilities/Interfaces/IHelperInterface';

除了我的自定义Utils，我还使用npm用于各种包。

所以我当前的webpack配置看起来像这样;

var webpack = require('webpack'),
    pkg = require('./package.json');

module.exports = {
    entry: {
        app: './scripts/app/app',
        vendor: Object.keys(pkg.dependencies)
    },

    output: {
        filename: '[name].bundle.js',
        path: __dirname + '/wwwroot/js/app'
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js' })
    ],

    // Enable sourcemaps for debugging webpack's output.
    devtool: 'source-map',

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: ['.ts', '.tsx', '.js', '.json']
    },

    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.tsx?$/, loader: 'awesome-typescript-loader' },

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' }
        ]
    }
};

我的供应商文件（npm包）被捆绑在一起，目前其余部分捆绑在一个文件中。如何修改配置以捆绑我的Utils？

我尝试添加第二个入口点;

entry: {
    app: './scripts/app/app',
    utils: './scripts/interfaces',
    vendor: Object.keys(pkg.dependencies)
},

希望这可行，但是它创建了utils.bundle.js文件，但app.bundle.js文件仍然包含其中的所有代码。

Webpack将自定义实用程序与应用程序代码分开捆绑

0 个答案: