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

时间:2015-10-30 16:26:40

标签: javascript webpack

我正在尝试通过指向同一文件的两个入口点从单个代码库构建两个单独的包。不同之处在于,名称中​​包含.mobile的必需文件不应包含在桌面捆绑包中(noops),反之亦然。
这很容易通过运行webpack两次并使用null-loader基于两个单独的配置来做,但我想知道是否因为性能原因在一次运行中是否可能。 有什么想法吗?

1 个答案:

答案 0 :(得分: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 文件中脚本标记的 src