javascript - 使用 Webpack 为移动设备和桌面设备提供单独的 bundle

Question

我试图通过使两个入口点指向同一个文件来从单个代码库构建两个单独的包。区别在于名称中带有 .mobile 的所需文件不应包含(noops)在桌面包中，反之亦然。
通过运行 webpack 两次并使用基于两个单独配置的 null-loader 可以很容易地做到这一点，但我想知道出于性能原因，它是否可以在单次运行中以某种方式实现。有什么想法吗？

Answer 1

好吧，我迟到了一年多，但如果您仍然想知道这是如何完成的，那么我是通过以下方式实现的:

{

  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
    })
  ]

};

我made a repo您可以克隆以查看此工作。请注意，目前您必须手动更改 .html 文件中 script 标记的 src。