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

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

我有以下文件夹结构;

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

ComponentOne import { IHelperInterface } from '../../Utilities/Interfaces/IHelperInterface';一个导入语句import { IHelperInterface } from '../../Utilities/Interfaces/IHelperInterface';

随着我的自定义实用程序,我也使用npm的各种软件

所以我目前的webpackconfiguration看起来像这样;

 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包)被捆绑在一起,其余的被捆绑成1个文件。 我如何修改configuration来捆绑我的Utils?

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

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

希望这可以工作,但是它创build了utils.bundle.js文件,但是app.bundle.js文件仍然包含了所有的代码。

       

网上收集的解决方案 "Webpack将自定义实用程序与应用程序代码分开捆绑"