webpack多页面不执行入口文件

Question

我参照网上的教程,搭建了一个多页面的webpack管理程序.
在业务代码里我新建了三个页面,每个页面都要引用公共的样式文件,
header.css,nav.css,border.css,当我新建第四页面的时候问题出现了,开发环境的页面不显示样式了,然后我删掉了第四个页面,在前面三个页面又同时多加了一个css文件,结果问题又出现了,页面的样式还是无法加载.尝试改了下webpack配置,把splitChunks中的minChuncks改成4,页面又能正常显示了,哪位大神帮忙看看是什么问题,感谢.
这是我的配置webpack.common.js
const path = require('path');
const fs = require('fs');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const filePath = path.resolve(__dirname, '../src');
const cssCacheGroups = {};

function recursiveIssuer(m) {

if (m.issuer) {
  return recursiveIssuer(m.issuer);
} else if (m.name) {
  return m.name;
} else {
  return false;
}

}

const makePlugins = () => {

const plugins = [
]
const fileNames = fs.readdirSync(filePath);
fileNames.forEach( fileName => {
    if (/.html$/.test(fileName)) {
        let name = fileName.replace('.html', '');
        plugins.unshift(new HtmlWebpackPlugin({
            template: `src/${fileName}`,
            filename: fileName,
            chunks: ['runtime', 'vendors', name]
        }));
        cssCacheGroups[`${name}Styles`] = {
            name: name,
            test: (m, c, entry = name) =>
                m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
            chunks: 'all',
            enforce: true,
        }
    }
})
return plugins;

}

const config = {

entry: {
    index: './src/js/index.js',
    monitor: './src/js/monitor.js',
    trackInfo: './src/js/trackInfo.js'
},
resolve: {
    extensions: ['.js', '.jsx'],
},
module: {
    rules: [{ 
        test: /\.jsx?$/, 
        include: path.resolve(__dirname, '../src'),
        use: [{
            loader: 'babel-loader'
        }]
    }, {
        test: /\.(jpg|png|gif)$/,
        use: {
            loader: 'url-loader',
            options: {
                name: '[name]_[hash].[ext]',
                outputPath: 'images/',
                limit: 10240
            }
        } 
    }, {
        test: /\.(eot|ttf|svg)$/,
        use: {
            loader: 'file-loader'
        } 
    }]
},
optimization: {
    runtimeChunk: {
        name: 'runtime'
    },
    usedExports: true,
    splitChunks: {
        chunks: 'all',
        cacheGroups: {
            vendors: {
                test: /[\\/]node_modules[\\/]/,
                priority: -10,
                name: 'vendors',
            },
            default: {
                minChunks: 4,
                priority: -20,
                reuseExistingChunk: true
            }
        }
}
},
performance: false,
output: {
    path: path.resolve(__dirname, '../dist')
}

}

config.plugins = makePlugins();
config.optimization.splitChunks.cacheGroups = Object.assign(config.optimization.splitChunks.cacheGroups, cssCacheGroups)

module.exports = config;

这是开发环境的配置
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');

const plugins = [new webpack.HotModuleReplacementPlugin()];
const files = fs.readdirSync(path.resolve(__dirname, '../dll'));
files.forEach(file => {

if(/.*\.dll.js/.test(file)) {
    plugins.push(new AddAssetHtmlWebpackPlugin({
        filepath: path.resolve(__dirname, '../dll', file)
    }))
}
if(/.*\.manifest.json/.test(file)) {
    plugins.push(new webpack.DllReferencePlugin({
        manifest: path.resolve(__dirname, '../dll', file)
    }))
}

})

const devConfig = {

mode: 'development',
devtool: 'cheap-module-eval-source-map',
devServer: {
    host: '0.0.0.0',
    contentBase: './dist',
    open: true,
    port: 8080,
    hot: true
},
module: {
    rules: [{
        // test: /\.scss$/,
        // use: ExtractTextPlugin.extract({
        //     fallback: 'style-loader',
        //     use: ['css-loader', 'sass-loader', 'postcss-loader']
        // })
        test: /\.scss$/i,
        use: [
            'style-loader', 
            {
                loader: 'css-loader',
                options: {
                    importLoaders: 2
                }
            },
            'sass-loader',
            'postcss-loader'
        ]
    }, {
        test: /\.css$/,
        use: [
            'style-loader',
            'css-loader',
            'postcss-loader'
        ]
    }]
},
plugins,
output: {
    filename: '[name].js',
    chunkFilename: '[name].js',
}

}

module.exports = merge(commonConfig, devConfig);

Answer 1

已解决,我在写HtmlWebpackPlugin这个插件的时候少写了一个default,导致代码分割的时候不会把分割的代码加入html中.