Question

我们有一个传统的多页应用程序，其中每个页面都有自己的js文件。我们使用Webpack 4，现在我们也开始使用react。我想将React Bundle与我们自己的代码分开。因此，每个页面都加载其自己的旧版pageXJS.js文件，新的pageXReact.js文件和react.bundle.js

我们下面有一个webpack配置，可以正常工作。

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

const jsModuleFolder = './src/main/resources/static/js/module/';

module.exports = {
    mode: 'development',
    devtool: 'inline-source-map',
    entry: {
        'pageA/pageAJS': jsModuleFolder + 'pageA/pageAJS.js',
        'pageB/pageBJS': jsModuleFolder + 'pageB/pageBJS.js',
        'pageC/pageCJS': jsModuleFolder + 'pageC/pageCJS.js',
        'pageC/PageCReact': jsModuleFolder + 'pageC/pageCReact.js',
        vendor: ['react', 'react-dom']
    },
    output: {
        filename: '[name].bundle.js',
        path: path.join(__dirname, jsModuleFolder )
    },
    optimization: {
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                vendor: {
                    chunks: 'initial',
                    test: 'vendor',
                    name: '../react/react',
                    enforce: true
                }
            },
        },
    },
};

它在react文件夹中生成react.bundle.js。但是，它还会在模块文件夹中生成vendor.bundle.js文件。 vendor.bundle.js只是一个webpackBoostrap文件，没有实际内容。 webpackBootstrap也是生成的PageCReact.bundle.js的一部分，因此似乎没有必要vendor.bundle.js。（而且我的网站没有它也可以正常工作。）

如何防止此文件也生成？

Answer 1

这是运行时文件，Webpack需要它。

您可以像这样将文件包括在入口点文件中：

optimization: {
            runtimeChunk: false // <-- set to false

我建议像这样配置它：

optimization: {
        runtimeChunk: 'single', // creates a single runtime chunk for all entry points.

使用Webpack 4进行捆绑拆分-复制供应商捆绑

1 个答案: