webpack 合作开发模式初探（一）

一，背景知识

1，webpack。2，react。

二，正文

目前react＋webpack已经成为了很多公司前端架构的选择。前端采用react的优点是模块可服用程度高，异步刷新，合作方便等。webpack打包可以让我们省去压缩，编译等工作，安心写代码。

但是据我目前实践看来，webpack打包模式还是有一些坑的，这里我就据我踩的一些坑探索一下什么是webpack＋react最佳工作模式

1，单页面开发开始

最简单的使用webpack的方式是，一个entry，所有文件打包进来，页面采用react－router路由，优点是打包方便，缺点是代码量大的时候，页面要加载大量js。

栗子：

<pre name="code" class="javascript">module.exports = {
    entry: './entry.js',
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};

那怎么处理呢，最开始我们采用了最最最简单粗暴的方式，多个entry，编译生成不同的js，然后生成不同的html引用它。

        栗子：

module.exports = {
    entry: {
       a:'./a.js',
       b:'./b.js',
       ...
    },
    output: {
        path: __dirname,
        filename: "[name].bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};

对应a.html,b.html...引用生成的a.boudle.js,b.bundle.js...

这样看着并没有什么问题啊，对么？

         经过实践 发现这样做根本就是天坑，当entry的key达到一定数量（我这边是30左右），就会发现巨大的问题，好的电脑编译巨慢（同事macpro），差电脑直接编译挂掉，热编译同样问题。估计有经验的同学，看到刚才那个幼稚粗暴的解决方案下意识就懂了，内存会挂掉。更何况我们项目加了为数众多的loader，webpack大喊，受不了，我泄了，我漏了。

2，怎么办？

         如果退回单页模式，巨麻烦。而且开发同学不适应。既然坑已经存在，只能想办法填，工作要继续，生活要继续。目前我的做法是单独编译，动态生成，具体细节就不介绍了，截个图你们就懂了。具体细节以及新的问题，下节再聊