使用splitChunks之后，打包报错了，求助啊真的是~

Question

我直接复制过来我的pro.config.js的配置：

const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const CleanWebpackPlugin=require('clean-webpack-plugin');
module.exports={
    entry:{
        hotcss:'./app/js/hotcss.js',
        app:'./app/js/main.js',
    },
    module:{
        rules:[
            { test: /\.js$/,
                exclude: /(node_modules|hotcss\.js)/,
                loader: "babel-loader",
            },
            {
                test:/\.html$/,
                use:['html-loader']
            },
        ]
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template:'./app/views/template.html',
        })
    ],
    optimization:{
        usedExports:true,//开发模式也开启Tree Shaking
        splitChunks:{
            chunks:'all',
            minSize: 0,
            maxSize: 0,
            minChunks: 1,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            automaticNameDelimiter: '~',
            name: true,
            cacheGroups:{
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: 2,
                    filename:'vendors.js'
                },
                default: {
                    priority: 1,
                    reuseExistingChunk: true,
                    filename:'default.js'
                },
                styles: {
                    name:'app',
                    test: /\.(css|scss)$/,
                    chunks: 'all',
                    enforce: true,
                    priority: 3,
                }
            }
        }
    },
    output:{
        filename:'[name].js',
        // chunkFilename:'[name].chunk.js',
        path:path.resolve(__dirname,'dist')
    }
};

根据报错，我知道是代码分割的时候有冲突了，会不会是与HtmlWebpackPlugin起了冲突？我不知道。于是我试着将splitChunks下的cacheGroups的default的filename删除掉：

default: {
      priority: 1,
      reuseExistingChunk: true,
      // filename:'default.js'
},

再次打包，成功了倒是，但是：

本来已经有了hotcss.js和app.js了，怎么又多出来了default~ hotcss.js和default~app.js?
还有，我的css怎么也给我打包了，

styles: {
     name:'app',
     test: /\.(css|scss)$/,
     chunks: 'all',
     enforce: true,
     priority: 3,
 }

这段用在cacheGroups配置里面的styles我在官网(英文)里面也没有找到相关的说明。
我想问问当splitChunks走default的时候，设置了filename:default为什么会报错呢？是和HtmlWebpackPlugin起冲突了吗？我该如何解决呢？指我条明路吧，大神们啊，折磨我一下午了~~~~

Answer 1

leolj 2019-05-21 23:44:05

你把filename: 'default.js'====改成name:'default' 应该是没有问题的，应为升级之后，这里面的文件的重命名配置是用的name;;;;;;splitChunks: {
   cacheGroups: {
       commons: {
           test: /[\\/]node_modules[\\/]/,
           name: "vendors",************
           chunks: "all"
       }
   }}

• 提问者 北乔峰27 #1

  filename这里我也采坑了，打包的时候报错了，看了看官网：
  This option can also be set globally in splitChunks.filename, but this isn't recommended and will likely lead to an error if splitChunks.chunks is not set to 'initial'. Avoid setting it globally.
  设置了filename，chunks只能是同步，不然就会报错，不建议这样设定，非常感谢你~

Answer 2

leolj 2019-05-21 23:26:20

minSize: 0这个选项为0的时候就是会将大于0kb的所有js文件都会做代码分割一遍

filename:default.js 我设置了根本不会报错啊，是正常的

styles: {
    name:'app',
    test: /\.(css|scss)$/,
    chunks: 'all',
    enforce: true,
    priority: 3,
}你设置了这个配置之后是会将你的css文件做代码分割

• 提问者 北乔峰27 #1

  我是刻意把minSize设为0的，模拟一下，问题应该就处在entry的设置上了，我之前的写法是entry是两个入口，一个app,一个hotcss,我把这两个放进到一个数组里面就能正确打包了，entry:{
      hotcss:'./app/js/hotcss.js',
      app:'./app/js/main.js',
  },改为了entry:{
     app:['./app/js/main.js','./app/js/hotcss.js']
  },

Answer 3

提问者 北乔峰27 2019-05-21 18:22:46

之前的entry是这样的，

entry:{
    hotcss:'./app/js/hotcss.js',
    app:'./app/js/main.js',
},

我尝试将entry改为这样：

entry:{
   app:['./app/js/main.js','./app/js/hotcss.js']
},

并且将default的filename值放开：

default: {
    priority: 1,
    reuseExistingChunk: true,
    filename:'default.js'
},

再次运行打包：

打开index.html倒运行倒是正常，我想应该是entry的入口文件配置的问题但并不确定，css也走了default的选项。