使用Webpack为移动设备和桌面设备单独捆绑

Separate bundles for mobile and desktop with Webpack

本文关键字：桌面 单独捆 Webpack 移动 使用      更新时间：2023-09-26

我试图通过两个指向同一文件的入口点，从一个代码库构建两个独立的bundle。不同之处在于，名称中包含.mobile的必需文件不应包含在桌面捆绑包中（noops），反之亦然
这很容易做到，只需运行两次webpack，并基于两个独立的配置使用null-loader，但出于性能原因，我想知道是否可以在一次运行中实现。有什么想法吗？

好吧，我迟到了一年多，但如果你仍然有兴趣知道这是如何做到的，下面是我实现这一点的方法：

{
  entry: {
    'desktop/index': './js/desktop/index.js',
    'desktop/post': './js/desktop/post.js',
    'desktop/vendor': [
      'jquery'
    ],
    'mobile/index': './js/mobile/index.js',
    'mobile/vendor': [
      'jquery'
    ]
  },
  output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: 'chunk.[chunkhash].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['desktop/common', 'desktop/vendor'],
      chunks: ['desktop/common', 'desktop/index', 'desktop/post'],
      minChunks: 2
    }),
    new webpack.optimize.CommonsChunkPlugin({
      names: ['mobile/common', 'mobile/vendor'],
      chunks: ['mobile/common', 'mobile/index'],
      minChunks: 2
    })
  ]
};

我做了一个repo，你可以克隆它来查看它的工作。请注意，目前，您必须手动更改.html文件中script标记的src。

相关文章：