Многократная запись в Webpack

Question

Я пытаюсь создать пакет, но мне нужно, чтобы некоторые файлы .js были загружены ранее с папками "vendor".Структура выглядит следующим образом:

 -> assets
     ->js
         ->controller
         ->services
         ->directives
         ->vendor
         app.js

, когда я создаю пакет, файл app.js ставится первым, но мне нужно, чтобы файл .js папки vendor был первым.

const webpack = require('webpack')
const path = require('path')
module.exports = {
  mode: "development",
  entry: {
      main:[path.resolve(__dirname, 'assets/js/vendor/jquery.min.js'),
        path.resolve(__dirname, 'assets/js/vendor/sha256.min.js'),
        path.resolve(__dirname, 'assets/js/vendor/bootstrap.min.js'),
        path.resolve(__dirname, 'assets/js/vendor/angular.js'),
        path.resolve(__dirname, 'assets/js/vendor/smoothscroll.min.js'),
        path.resolve(__dirname, 'assets/js/vendor/jquery.mask.min.js'),
        path.resolve(__dirname, 'assets/js/vendor/cpf.min.js'),
        path.resolve(__dirname, 'assets/js/vendor/clipboard.min.js'),
        path.resolve(__dirname, 'assets/js/vendor/angular-animate.min.js'),
        path.resolve(__dirname, 'assets/js/vendor/angular-cookies.min.js'),
        path.resolve(__dirname, 'assets/js/vendor/angular-locale_pt-br.js'),
        path.resolve(__dirname, 'assets/js/vendor/angular-ui-router.min.js'),
        path.resolve(__dirname, 'assets/js/vendor/bootstrap-angular-validation-all.min.js'),
        path.resolve(__dirname, 'assets/js/vendor/loading-bar.min.js'),
        path.resolve(__dirname, 'assets/js/vendor/nya-bs/nya-bs-select.js'),
        path.resolve(__dirname, 'assets/js/vendor/slick/slick.min.js'),
        path.resolve(__dirname, 'assets/js/vendor/ngCpfCnpj.js'),
        path.resolve(__dirname, 'assets/js/vendor/match-media.js'),
        path.resolve(__dirname, 'assets/js/app.js'),
        path.resolve(__dirname, 'assets/js/services/message.js'),
        path.resolve(__dirname, 'assets/js/services/settings.js'),
        path.resolve(__dirname, 'assets/js/services/urlRedeSocial.js'),
    ]
},
output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'temp/builder'),

    }
}

Answer 1

Я могу ошибаться, но я думаю, что вы ищете это:

entry: {
  app: [
    path.resolve(__dirname, 'assets/js/app.js'),
    path.resolve(__dirname, 'assets/js/services/message.js'),
    path.resolve(__dirname, 'assets/js/services/settings.js'),
    path.resolve(__dirname, 'assets/js/services/urlRedeSocial.js'),
  ],
  vendor: [
    path.resolve(__dirname, 'assets/js/vendor/jquery.min.js'),
    path.resolve(__dirname, 'assets/js/vendor/sha256.min.js'),
    path.resolve(__dirname, 'assets/js/vendor/bootstrap.min.js'),
    path.resolve(__dirname, 'assets/js/vendor/angular.js'),
    path.resolve(__dirname, 'assets/js/vendor/smoothscroll.min.js'),
    path.resolve(__dirname, 'assets/js/vendor/jquery.mask.min.js'),
    path.resolve(__dirname, 'assets/js/vendor/cpf.min.js'),
    path.resolve(__dirname, 'assets/js/vendor/clipboard.min.js'),
    path.resolve(__dirname, 'assets/js/vendor/angular-animate.min.js'),
    path.resolve(__dirname, 'assets/js/vendor/angular-cookies.min.js'),
    path.resolve(__dirname, 'assets/js/vendor/angular-locale_pt-br.js'),
    path.resolve(__dirname, 'assets/js/vendor/angular-ui-router.min.js'),
    path.resolve(__dirname, 'assets/js/vendor/bootstrap-angular-validation-all.min.js'),
    path.resolve(__dirname, 'assets/js/vendor/loading-bar.min.js'),
    path.resolve(__dirname, 'assets/js/vendor/nya-bs/nya-bs-select.js'),
    path.resolve(__dirname, 'assets/js/vendor/slick/slick.min.js'),
    path.resolve(__dirname, 'assets/js/vendor/ngCpfCnpj.js'),
    path.resolve(__dirname, 'assets/js/vendor/match-media.js')
  ]
},
output: {
  filename: '[name].bundle.js',
  path: path.resolve(__dirname, 'temp/builder'),
}

Это даст два отдельных пакета. app.bundle.js и vendor.bundle.js. И затем, если вы используете HtmlWebpackPlugin, вы можете сделать что-то вроде этого, чтобы контролировать порядок:

new HtmlWebpackPlugin({
    chunks: ['vendor', 'app'],
    chunksSortMode: 'manual'
})