Как разделить созданный веб-пакет JS на несколько файлов?

Question

Ранее у сайта, который я унаследовал, был экспортирован весь код JS в один файл, который используется на всех страницах.

Я добавил новую страницу, для которой было бы полезно только иметь JS для этой указанной c страницы, загружаемой, когда эта страница является текущей, поэтому я хочу разделить ее на отдельный файл JS.

Наш текущий webpack.config. js содержал это:

var loaders = [
  {
    test: /\.js$/,
    loaders: ['babel'],
    include: __dirname
  }
]

module.exports = {
  entry: {
    admin: './source/admin.js',
    main: '/source/index.js'
  },
  output: {
    filename: 'js/main.js',
    path: path.join(__dirname, 'production.new'),
    publicPath: '/production/'
  },
  module: {loaders: loaders}
};

Раньше мне никогда не приходилось писать файл конфигурации webpack, поэтому, покопавшись в их документации, я попытался добавить это, но это не дало желаемого эффекта. :

module.exports = {
  entry: {
    admin: './source/admin.js',
    main: '/source/index.js',
    newpage: '/source/newpage.js'
  },
  // ...
  // Truncated to remove config as above
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  } 
};

То, что я хочу, - это два. js файла для вывода: main. js и newpage. js. Происходит следующее: содержимое / source / newpage. js просто добавляется в конец main. js.

Как я могу сделать так, чтобы webpack выводил их как два отдельных файла?

Answer 1

Это более или менее мое предложение, импортируйте './admin' в индекс. js файл, это решит вашу проблему.

module.exports = {
  entry: {
    main: './source/index.js', // also includes admin.js
    newpage: './source/newpage.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js'
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all'
        },
      }
    },
  }
}