Множественная точка входа Webpack с разным пакетом

Я использую webpack 4, и у меня есть две точки входа, и я использую HtmlWebpackPlugin для вставки файлов пакета, используя <%=htmlWebpackPlugin.files.webpackManifest%> в html.

конфигурация webpack:

const path = require('path')

// initialize version.js
require('child_process').exec('node ' + path.resolve('./../scripts/setAppVersion.js'), {cwd: '../'}, function (err, stdout, stderr) {
    console.log(err)
})

module.exports = {
    mode: 'development',
    devtool: 'source-map',
    entry: {
        main: './src/main.js',
        loginPage: './src/components/loginPage/loginPage.js',
    },
    plugins: [
        new CleanWebpackPlugin(['dist'], {
            root: path.join(__dirname, '..'),
        }),
        new extractTextPlugin({
            filename: 'bundle.css',
            disable: false,
            allChunks: true,
        }),
        new HtmlWebpackPlugin({
            template: './src/index.ejs',
            hash: true,
            // inject: false,
            chunks: ['main'],
        }),
        // generate Login Page
        new HtmlWebpackPlugin({
            // inject: false,
            template: './src/components/loginPage/index.ejs',
            hash: true,
            chunks: ['loginPage'],
            filename: 'loginPage.html',
        }),
    ],
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, '../dist'),
        publicPath: '/',
    },
    module: {
        rules:[
            {
                test: /\.js$/,
                use: 'eslint-loader?{fix:true}',
                exclude: /node_modules/,
                enforce: 'pre',
            },
            {
                test: /\.html$/,
                exclude: /node_modules/,
                use: 'file-loader?name=[name].[ext]',
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader',
            },
            // TODO remove extractTextPlugin after delete all .scss in react-components
            {
                test: /\.scss$/,
                use: extractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader!sass-loader',
                }),
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader',
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader?name=fonts/[name].[ext]',
            },
            {
                test: /\.(png|mp4)$/,
                use: 'file-loader',
            },
        ],
    },
    performance: {hints: false},
    optimization: {splitChunks: {chunks: 'all'}},
}

Когда я использую chunks:['loginpage'], я получаю в html только один файл пакета без поставщика, если я не получаю пакеты для main точки входа внутри loginPage точки входа.

введите описание изображения здесь


person Palaniichuk Dmytro    schedule 12.06.2018    source источник
comment
Для чего нужны множественные записи? Вы пытаетесь выполнить разделение кода?   -  person Dominic    schedule 12.06.2018
comment
У меня есть страница входа, на которой мне не нужны пакеты с главной страницы.   -  person Palaniichuk Dmytro    schedule 12.06.2018


Ответы (1)


Попробуйте изменить параметр оптимизации на

splitChunks: {
    chunks: "initial",
    name: 'commons'
}

Затем настройте параметры HtmlWebpackPlugin следующим образом

new HtmlWebpackPlugin({
        template: './src/index.ejs',
        hash: true,
        // inject: false,
        chunks: ['main','commons'],
    }),
    // generate Login Page
    new HtmlWebpackPlugin({
        // inject: false,
        template: './src/components/loginPage/index.ejs',
        hash: true,
        chunks: ['loginPage','commons'],
        filename: 'loginPage.html',
    }),
person David Meck    schedule 13.09.2018