Webpack4 splitChunks & html-webpack-plugin

Question

我有3页。

这是我的dir结构。

第1页和第2页依赖于vue，第2页和第3页依赖于jquery.So --我使用SplitChunksPlugin将块从页面包中分离出来。

但是问题在于使用html-webpack-plugin.Each页面html必须包括js需要的js同时需要main.bundle.js和公共块js(例如，page1~page2.js)，所以我必须将commonChunk名称传递给filter.I，我只能从name函数中获得该信息，但它是异步的。那么，在名称回调结束后，如何生成我的HtmlWebpackPlugin obj .

这是我的webpack配置。

const pageDir = './page';
const indexPage = 'page1';

const pages = fs.readdirSync(pageDir);
console.log('__dirname', __dirname);

let splitChunksName = [];

const getPagesHtmlWebpackPluginList = () => {
    console.log('splitChunksName',splitChunksName); // log [], expect after get splitChunksName to call
    return pages.map( page => {
        let regex = new RegExp(page);
        let commonChunks = splitChunksName.filter(name => regex.test(name));

        return new HtmlWebpackPlugin({
            filename: `${page}/index.html`,
           chunks: [`${page}/main`, ...commonChunks],
        });
    });
};

const getEntryObj = () => {
    let entry = {};
    pages.forEach(page => {
        Object.assign(entry, {
            [`${page}/main`]: [path.resolve(process.cwd(), pageDir, `./${page}/main.js`)]
        })
    });
    return entry;
};

module.exports = {
        mode: 'none',
        entry: getEntryObj(),
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: '[name].bundle.js'
        },
        optimization: {
            splitChunks: {
                chunks: 'all',
                name: module => {
                    // set 'name:true' the output dir becomes ugly, if chunk1 names 'a/b', chunk2 names 'c/d',
                    //then the common chunk12 will be 'venders~a/b~c/d.bundle.js', two ugly folders(venders~a , b~c)generated.
                    //So I write my own name function.
                    let arr = [];
                    module._chunks.forEach(chunk => {
                        arr.push(chunk.name.replace('/main',''));
                    });
                    let splitChunkName = 'vender/' + arr.join('~');
                    splitChunksName.push(splitChunkName);
                    //splitChunksName is needed,I need common chunk info to use with html-webpack-plugin
                    return splitChunkName;
                }

            }
        },
        plugins: [
            ...getPagesHtmlWebpackPluginList()
        ]
};

​

Answer 1

从html到webpack插件版本4，这现在是本地支持的.

如何使用Webpack 4 SplitChunksPlugin与HtmlWebpackPlugin进行多页面应用？