Как отделить webpack-dev-server от моих splitChunks в Webpack? - PullRequest
Новая
       44

Как отделить webpack-dev-server от моих splitChunks в Webpack?

0 голосов
/ 25 сентября 2018

Я пытаюсь получить несколько точек входа, работающих с webpackDevServer.

Для одной точки входа требуется вся моя папка node_modules.Для другого требуется только один файл с одним файлом console.log (файл точки входа).

По какой-то причине мой единственный файл с одним console.log не запускается. См. Также этот вопрос.

Я тестировал эту настройку в WebpackDevServer, поэтому я подозревал, что для работы всех файлов, по крайней мере, необходим WebpackDevServer.Итак, я изменил свой optimization.splitChunks, чтобы он выглядел следующим образом, , основываясь на примере, приведенном в документации на веб-пакете : 

optimization: {
    splitChunks: {
        cacheGroups: {
            commons: {
                test: /[\\/]node_modules[\\/]/,
                name: 'vendor',
                chunks: 'all'
            },
            vendor: {
                test: /[\\/]node_modules[\\/](webpack|webpack-dev-server)[\\/]/,
                name: 'webpack',
                chunks: 'all',
            }
        }
    },
},

Я ожидаю, что будет пакет "vendor" и "пачка "пачка".Существует только «поставщик» (и мои точки входа): 

                                         app.js   6.92 MiB            app  [emitted]  app
                               resetPassword.js   35.2 KiB  resetPassword  [emitted]  resetPassword
                                      vendor.js   14.4 MiB         vendor  [emitted]  vendor

Как я могу получить webpack-dev-server в свой собственный пакет , который затем я могу включить в HtmlWebpackPlugin, чтобы проверитьпосмотреть, что это (или другие node_modules) - это то, что нужно для запуска моего console.log?

Конфигурация Webpack 

module.exports = {
    entry: {
        app: './public/js/ide.js',
        resetPassword: './public/js/reset_password.js'
    },
    output: {
        path: path.resolve(__dirname, '../build'),
        filename: '[name].js',
        publicPath: '/'
    },
    ...
optimization: {
    splitChunks: {
        cacheGroups: {
            commons: {
                test: /[\\/]node_modules[\\/]/,
                name: 'vendor',
                chunks: 'all'
            },
            vendor: {
                test: /[\\/]node_modules[\\/](webpack|webpack-dev-server)[\\/]/,
                name: 'webpack',
                chunks: 'all',
            }
        }
    },
},
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'public/html/ide.html',
            inject: true,
            chunks: ['app', 'vendor']
        }),
        new HtmlWebpackPlugin({
            filename: 'reset_password.html',
            template: 'public/html/reset_password.html',
            inject: true,
            chunks: ['resetPassword'] // this does not work
            //chunks: ['resetPassword', 'vendor'] //this works
        }),
    ],
}

reset_password.js 

console.log('hello')

Конфигурация сервера webpack dev 

devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: true,
    hot: true,
    compress: true,
    host: HOST,
    port: PORT,
    open: config.dev.autoOpenBrowser,
    overlay: false,
    publicPath: '/',
    contentBase: [
        path.join(__dirname, "../../public"), 
        path.join(__dirname, "../../public/js")],
    watchOptions: {
        poll: config.dev.poll,
    },
    disableHostCheck: true,
    https: true,
    noInfo: false,
},

1 Ответ

0 голосов
/ 25 февраля 2019

Добавить атрибут приоритета для каждого из кусков.Из документов .

splitChunks.cacheGroups.priority

число

Модуль может принадлежать нескольким кешамгрупп.Оптимизация предпочтет группу кеша с более высоким приоритетом.Группы по умолчанию имеют отрицательный приоритет, что позволяет настраиваемым группам иметь более высокий приоритет (значение по умолчанию равно 0 для настраиваемых групп).

Таким образом, ваш код будет выглядеть примерно так.Обратите внимание, что приоритет - это наибольшее числовое значение, а не рейтинговое значение. 

optimization: {
  splitChunks: {
    cacheGroups: {
      commons: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendor',
        chunks: 'all',
        priority: 1
      },
      vendor: {
        test: /[\\/]node_modules[\\/](webpack|webpack-dev-server)[\\/]/,
        name: 'webpack',
        chunks: 'all',
        priority: 2
      }
    }
  },
},
...