Question

以前，我继承的网站已将所有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将它们输出为两个单独的文件？

Answer 1

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

如何将webpack生成的JS拆分为多个文件？

1 个答案: