Webpack integrates custom utilities separately from application code

I would like to link my TypeScript ReactJs project using webpack. Since my project is quite large, I want to bundle utils separately from the main application code, so I can keep them separate.

I have the following folder structure:

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

ComponentOneimports IHelperInterfacewith an import statementimport { IHelperInterface } from '../../Utilities/Interfaces/IHelperInterface';

Along with my regular Utils, I also use npm for various packages.

So my current webpack configuration looks like this:

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

My producer files (npm packages) are combined together, and the rest are then inserted into 1 file. How can I change the configuration to combine my utils?

I tried to add a second entry point;

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

, , utils.bundle.js, app.bundle.js .

+4

Source: https://habr.com/ru/post/1673978/


All Articles