急急急,在进行按需加载的时候报错了

Question

Dell老师你好,我在进行按需加载的时候报错了
报错的提交: UnhandledPromiseRejectionWarning: Error: SplitChunksPlugin: You are trying to set a filename for a chunk which is (also) loaded on demand. The runtime can only handle loading of chunks which match the chunkFilename schema. Using a custom filename would fail at runtime. (cache group: vendors)
下面的是我的配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
    entry: {
      main:'./src/index.js',
    },
    output: {
        publicPath: './',
        filename: '[name].js',
        path: path.resolve(__dirname, '../dist')
    },
    plugins: [new HtmlWebpackPlugin({
        template: './src/template.html'
    }), new CleanWebpackPlugin()], // htmlwebpackplugins作用是会在打包结束之后自动生成一个html模板，并把打包生成的js文件自动引入到这个html文件中
    optimization: {  //  Tree Shaking 的实现，作用是打包的时候不会打包没有引入的东西，想要实现这个功能还需要在packjson里面设置sideEffects: [''],同时在生产环境已经自动集成了这个功能
      splitChunks: {
           chunks: 'all',
           minSize: 100,
           cacheGroups: { 
             vendors: {
               test: /[\\/]node_modules[\\/]/,
               priority: -10,
               filename: 'vendors.js'
             },
             default: {
                priority: 2,
                reuseExistingChunk: true,
                filename: 'common.js'
             },
           }
      }
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        },{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: 'url-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'images/',
                    limit: 204800
                },
            },
        }, {
            test: /\.scss$/,
            use: [
            'style-loader', {
                loader: 'css-loader',
                options: {
                    importLoaders: 2, // 执行下面两个loader
                    // modules: true, // css 模块化
                },
            },
            'sass-loader',
            'postcss-loader']
        }, {
            test: /\.(eot|ttf|svg|woff)$/,
            use: {
                loader: 'file-loader'
            },
        }, {
            test: /\.css/,
            use: ['style-loader', 'css-loader', 'postcss-loader']
        }]
    },
}

Answer 1

BlueMan_汪汪汪 2020-03-08 00:52:00

   webpack@4.42.0文档:https://webpack.docschina.org/plugins/split-chunks-plugin/

    文档中对filename和name分别做了描述，可以解答你的疑惑

    1.filename:Allows to override the filename when and only when it's an initial chunk(filename只有在模式为initial)模式下才有效

    2.name:Providing a string or function will allow you to use a custom name(在async或者all模式下使用可自定义文件名)

    此问题同https://coding.imooc.com/learn/questiondetail/171965.html是一个问题，链接的问答里有配置后打包的截图。

• 提问者 哈士奇附体 #1

  非常感谢！

Answer 2

提问者 哈士奇附体 2019-12-10 08:16:25

老师，这个问题已经处理好了，把 cacheGroups里面的 vendors的filename改成name就行了，可是为什么呢

• Dell #1

  因为vendor的名字并不一定是文件的名字，可能只是文件名字的一个前缀，所以用filename不是很严谨，webpack就要求你写成name了

• 提问者 哈士奇附体 回复 Dell #2

  那filename和name区别是什么？

• Dell 回复 提问者 哈士奇附体 #3

  name是filename的一部分，你可以这么理解