使用Webpack为移动和桌面分离捆绑包

Question

I'm trying to build two separate bundles from a single code base by having two entry points that point to the same file. The difference is that required files with .mobile in their name should not be included (noops) in the desktop bundle and vice-versa.
This is pretty easy to do do by running webpack two times and using the null-loader based on two separate configs but I was wondering if it would somehow be possible in a single run for performance reasons. Any ideas?

Answer 1

Well, I'm more than a year late, but if you are still interested in know how this is done, here is the way I achieved this:

{

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

};

I made a repo you can clone to see this working. Just be aware that, for now, you'll have to manually change the src of the script tags in the .html files.