Webpack 如何将网页包生成的JS拆分为多个文件？

以前，我继承的站点将所有JS代码导出到一个文件中，该文件用于所有页面

我添加了一个新页面，当该页面是当前页面时，只加载该特定页面的JS，这将带来好处，因此我想将其拆分为一个单独的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将它们输出为两个独立的文件？

这或多或少是我的建议， 将“./admin”导入index.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'
        },
      }
    },
  }
}