webpack - 如何解决 webpack.config.js 条目中的“不允许类型”？

Question

我要优化我在 webpack 上的应用程序，我发现的解决方案之一是将我的代码从 webpack 指令（https://webpack.js.org/configuration/entry-context/#dependencies）拆分为不同的实体点，但是代码entry: { app: { import: './app.js', dependOn: 'react-vendors' }}，它告诉我不能使用对象类型，我应该使用字符串或数组。我应该更改我的 webpack 配置中的某些内容吗？还是使用其他版本的 webpack？现在我使用 webpack 4.43。这是我的 webpack.config.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const VueLoaderPlugin = require('vue-loader/lib/plugin')

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

module.exports = {
    // mode:'development',
    entry: {
        main: './src/index.js',
    },
    output: {
        filename: '[name].bungle.js',
        path: path.resolve(__dirname, 'dist'),
        chunkFilename: '[name].bundle.js',
    },
    plugins: [
        new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),

        new HtmlWebpackPlugin({
            title: 'Development',
            template:'./index.html'
        }),
        new VueLoaderPlugin(),
        new VuetifyLoaderPlugin()
    ],
    optimization: {
        splitChunks: {
            chunks: 'all',

        }
    },

    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-proposal-object-rest-spread']
                    }
                }
            },
            {
                //Правила для vue.js
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                // Правила для обработки css стилей
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.s(c|a)ss$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        // Requires sass-loader@^7.0.0
                        // options: {
                        //     implementation: require('sass'),
                        //     fiber: require('fibers'),
                        //     indentedSyntax: true // optional
                        // },
                        // Requires sass-loader@^8.0.0
                        options: {
                            implementation: require('sass'),
                            sassOptions: {
                                fiber: require('fibers'),
                                indentedSyntax: true // optional
                            },
                        },
                    },
                ],
            },

        ]
    },

};

标签： webpackoptimizationconfig

Answer 1

这是您正在使用的 webpack 版本的示例

optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/](vue|vuetify)[\\/]/,
          name: 'vendor',
          chunks: 'all',
        }
      }
    }
  }