coolie PK webpack 之模块构建

终于到了重头戏啦？本文主要说明的是这两款构建工具（coolie 和 webpack），是分别如何完成模块化构建的，以及它们之间的优缺点。

预备

首先准备以下文件和目录，基本是承接上文的。

- demo
|-- src
|	|-- body.png
|	|-- entry1.js
|	|-- entry2.js
|	|-- module1.js
|	|-- module2.js
|	|-- single1.css
|	`-- single2.css
|-- coolie.json
|-- index.html
`-- weboack.config.js

entry1.js 的内容为：

define(function(require){
    require('./module.js');
    require('./single1.css');
    require('./single2.css');
});

引用关系为

entry1.js => module1.js + single1.css + ( single2.css => body.png )

entry2.js 的内容为：

define(function(require){
    require('./module.js');
    require('./single1.css');
});

引用关系为，惟独缺少了 single2.css

entry1.js => module1.js + single1.css

其他文件内容都在前文说到。

webpack

webpack.config.js

修改 webpack.config.js 为（可能作者对 webpack 的使用和配置可能不当，若有错误欢迎指正）：

var path = require("path");

module.exports = {
    entry: {
        entry1: './src/entry1.js',
        entry2: './src/entry2.js'
    },
    output: {
        path: path.join(__dirname, '../out'), 
        filename: '[name].js'
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};

loader 插件

需要先安装以下两个插件：

npm i -SD style-loader css-loader

构建

然后再执行：

➜  webpack
Hash: 55a90533e92c37e40c33
Version: webpack 1.9.11
Time: 441ms
    Asset     Size  Chunks             Chunk Names
entry1.js  13.7 kB       0  [emitted]  entry1
entry2.js  13.5 kB       1  [emitted]  entry2
   [0] ./src/entry1.js 131 bytes {0} [built]
   [0] ./src/entry2.js 94 bytes {1} [built]
   [1] ./src/module.js 49 bytes {0} {1} [built]
   [2] ./src ^\.\/.*$ 360 bytes {0} {1} [built] [5 warnings]
   [3] ./src/body.png 0 bytes [built] [failed]
   [4] ./src/single1.js 24 bytes {0} {1} [optional] [built]
   [9] ./src/single2.js 24 bytes {0} {1} [optional] [built]
    + 6 hidden modules

WARNING in ./src/entry2.js
Critical dependencies:
3:4-11 require function is used in a way in which dependencies cannot be statically extracted
 @ ./src/entry2.js 3:4-11

WARNING in ./src/entry1.js
Critical dependencies:
3:4-11 require function is used in a way in which dependencies cannot be statically extracted
4:4-11 require function is used in a way in which dependencies cannot be statically extracted
 @ ./src/entry1.js 3:4-11 4:4-11

WARNING in ./src ^\.\/.*$
Module not found: Error: a dependency to an entry point is not allowed
 @ ./src ^\.\/.*$

WARNING in ./src ^\.\/.*$
Module not found: Error: a dependency to an entry point is not allowed
 @ ./src ^\.\/.*$

WARNING in ./src ^\.\/.*$
Module not found: Error: a dependency to an entry point is not allowed
 @ ./src ^\.\/.*$

WARNING in ./src ^\.\/.*$
Module not found: Error: a dependency to an entry point is not allowed
 @ ./src ^\.\/.*$

WARNING in ./src/body.png
Module parse failed: /path/to/demo/src/body.png Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./src ^\.\/.*$

呵呵，无法正常处理 css 引用的图片。

结果

看下目标目录的 entry1.js

// 省略...

// 注意点 1
var map = {
	"./module": 1,
	"./module.js": 1,
	"./single1": 4,
	"./single1.css": 5,
	"./single1.js": 4,
	"./single2": 9,
	"./single2.css": 10,
	"./single2.js": 9
};
	
// 省略...

// 注意点 2
if(!content.locals) {
	module.hot.accept("!!./../node_modules/css-loader/index.js!./single1.css", function() {
		var newContent = require("!!./../node_modules/css-loader/index.js!./single1.css");
		if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
		update(newContent);
	});
}
		
// 省略...

单从注意点 1 和 注意点 2 来看，就知道 webpack 构建的完全错误了。

coolie

修改的有点多，但值得，因为一旦配置完善，后续的配置都不会再变了。

coolie.json

{
  "js": {
    "src": [
      "./src/entry1.js", 
      "./src/entry2.js"
    ],
    "coolie-config.js": "./src/coolie-config.js",
    "dest": "./src/"
  },
  "css": {
    "dest": "./src/",
    "minify": {
      "compatibility": "ie7"
    }
  },
  "html": {
    "src": [
      "./*.html"
    ],
    "minify": true
  },
  "resource": {
    "dest": "./src/",
    "minify": true
  },
  "copy": [],
  "dest": {
    "dirname": "../dest/",
    "host": ""
  }
}

相比较之前，主要修改了 JS 的配置，增加了src和coolie-config.js两个配置：

• src：需要构建的入口模块，通常我们将入口模块放在一个文件夹内，使用通配符即可。
• coolie-config.js：模块加载器的配置文件。

coolie.js

在 src 目录下新增 coolie.min.js，使用

coolie pull

下载即可。

➜  src  coolie pull

            ╔═══════════════════════════════════════════════════════╗
            ║          coolie.cli@0.20.11                           ║
            ║          The front-end development builder.           ║
            ╚═══════════════════════════════════════════════════════╝

  pull coolie.min.js => https://raw.githubusercontent.com/cloudcome/coolie/master/coolie.min.js
  pull coolie.min.js => /path/to/demo/src/coolie.min.js

coolie-config.js

在 src 目录下新增 coolie-config.js（模块加载器的配置文件）：

coolie.config({
    base: "./"
}).use();

html 修改

将 index.html 修改为：

<!DOCTYPE html>

<!-- coolie -->
<link rel="stylesheet" type="text/css" href="./src/single1.css">
<link rel="stylesheet" type="text/css" href="./src/single2.css">
<!-- /coolie -->

<!-- coolie -->
<script src="./src/single1.js"></script>
<script src="./src/single2.js"></script>
<!-- /coolie -->

<script coolie src="./src/coolie.min.js" data-config="./coolie-config.js" data-main="entry1.js"></script>

主要新增了一个模块加载器，并添加了：

• coolie属性：标志这个script属于 coolie 的管辖范围。
• data-config属性：标志了模块加载的配置文件路径，相对于src属性。
• data-main属性：标志了模块入口文件路径，相对于coolie-config.js里的base（而base是相对于coolie-config.js本身）。

entry

为了方便的引入 css 文件，需要修改 entry1.js 为：

define(function(require){
    require('./module.js');
    require('./single1.css', 'css');
    require('./single2.css', 'css');
});

修改 entry2.js 为：

define(function(require){
    require('./module.js');
    require('./single1.css', 'css');
});

require 添加第二个参数，是不是觉得奇怪？coolie 支持的 require 语法为：

require(path, [type]);

• path：模块的路径，相对于当前模块。
• type：模块的类型，默认为js模块，还支持html、css、text、json和image一共 6 种模块。

这种语法定义的原因：

• 路径关系可以在 webstorm 里按 cmd + 单击直达模块，而如果加入了css!这种前缀就不可以了。
• 清晰的路径，可以直接在 webstorm 里拖动模块层级，而不必手动修改模块的路径。
• 独立的 type 非常清晰的标识了模块的类型。

构建

在 demo 目录下执行：

➜  coolie build

            ╔═══════════════════════════════════════════════════════╗
            ║          coolie.cli@0.20.11                           ║
            ║          The front-end development builder.           ║
            ╚═══════════════════════════════════════════════════════╝


                 1/5 => copy files

                 2/5 => build main
                  √  => /path/to/demo/src/entry1.js
                  √  => /path/to/demo/src/entry2.js

                 3/5 => overwrite config
                  √  => base: "./"
                  √  => version: "{
                          "entry1.js": "0ba981967e8b2712d6da6114ae90675c",
                          "entry2.js": "1c9621d551021410aa19acb2ecac94dc"
                        }"
                  √  => callbacks: 0
                  √  => /path/to/dest/src/coolie-config.c58dd5aa2dacebd9a86c92b49b66a6ba.js

                 4/5 => build html css
                  √  => /path/to/dest/src/bdd8e022ce7470f06d7183daabac0b79.css
                  √  => /path/to/dest/src/6c762d4e4b7d1e9504281bc12abd65b9.js
                  √  => /path/to/dest/src/coolie.min.js
                  √  => /path/to/demo/*.html

                 5/5 => generator relationship map
                  √  => /path/to/dest/relationship-map.json

       build success => copy 1 file(s),
                        build 2 main file(s),
                        build 2 js file(s),
                        build 1 html file(s),
                        build 2 css file(s),
                        build 1 resource file(s),
                        past 157 ms

构建的过程非常的清晰，说下构建结果：

• 复制了一个文件，就是 coolie.min.js 文件，即模块加载器。
• 构建两个入口文件，即 entry1.js 和 entry2.js。
• 构建了两个 JS 文件，即single1.js和single2.js。
• 构建了一个 HTML 文件，即index.html。
• 构建了两个 CSS 文件，即single1.css和single2.css。
• 构建了一个资源文件，即body.png。

结果

看下目标目录

.dest
|-- src
|	|-- 6c762d4e4b7d1e9504281bc12abd65b9.js
|	|-- a821bd973bf1114e6ed1d9170b6e84eb.png
|	|-- bdd8e022ce7470f06d7183daabac0b79.css
|	|-- coolie-config.c58dd5aa2dacebd9a86c92b49b66a6ba.js
|	|-- coolie.min.js
|	|-- entry1.0ba981967e8b2712d6da6114ae90675c.js
|	`-- entry2.1c9621d551021410aa19acb2ecac94dc.js
|-- index.html
`-- relationship-map.json

来看下 entry1.js（为了便于阅读，已省略了 base64 编码）：

/*coolie@0.20.11*/
define("0",["1","2","3"],function(n){n("1");n("2");n("3")});
define("1",[],function(){console.log("module")});
define("2",[],function(y,d,r){r.exports="html{margin:0;padding:0}"});
define("3",[],function(y,d,r){r.exports="body{background:url(data:image/png;base64...)}"});

来看下 entry2.js：

/*coolie@0.20.11*/
define("0",["1","2"],function(n){n("1");n("2")});
define("1",[],function(){console.log("module")});
define("2",[],function(y,d,r){r.exports="html{margin:0;padding:0}"});

看下 index.html（为了便于阅读已折行和注释处理）：

<!DOCTYPE html>
<!--1-->
<link rel="stylesheet" href="/src/bdd8e022ce7470f06d7183daabac0b79.css">
<!--2-->
<script src="/src/6c762d4e4b7d1e9504281bc12abd65b9.js"></script>
<!--3-->
<script src="/src/coolie.min.js" data-config="./coolie-config.c58dd5aa2dacebd9a86c92b49b66a6ba.js" data-main="entry1.js"></script>
<!--coolie@0.20.11-->

最后看看 relationship-map.json：

{
    "index.html": {
        "css": {
            "src/bdd8e022ce7470f06d7183daabac0b79.css": [
                "src/single1.css",
                "src/single2.css"
            ]
        },
        "js": {
            "src/6c762d4e4b7d1e9504281bc12abd65b9.js": [
                "src/single1.js",
                "src/single2.js"
            ]
        },
        "main": "src/entry1.js",
        "deps": [
            "src/module.js",
            "src/single1.css",
            "src/single2.css"
        ]
    }
}

与前文相比，多了 main 和 deps：

• main：入口模块。
• deps：入口模块的依赖模块。

总结

在模块构建上：

webpack

• 优点
  • 自由定制。
• 缺点
  • 需要安装各种插件，无法基本满足通用化需求。
  • 和 gulp、grunt 是没有本质区别的，都是自己实现一个 runner，然后来跑各种插件。
  • 出现了构建错误，依赖分析错误。
  • 无法正常构建 css 和 css 里引用的图片文件。
  • 需要丰富经验才能驾驭配置。

coolie

• 优点
  • 构建完全正确。
  • 非常优秀的版本管理。
  • 模块路径进行了压缩，将原有的 ./module1.js 这种路径压缩成了 1 这种单个字符，极大减少了文件体积。
  • 支持 html/css/text/image/json 模块构建（部分未在本文涉及到）。
  • 支持 html/css 里引用的静态资源构建（本文未涉及）。
• 缺点
  • 需要搭配订制的模块加载器。
  • 部分写法有些特殊。

综合，coolie 显而易见的完全胜出，得满分 40 分，webpack 得 1 分。