coolie PK webpack 之三：模块构建

头像
云淡然
    阅读 9 分钟
    2

    本文主要说明的是这两款构建工具（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-->

    非常的清晰明了：

    1. CSS 文件的合并、压缩、版本管理。
    2. JS 文件的合并、压缩、版本管理。
    3. 模块文件的构建。

    最后看看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 分。

    原文：http://frontenddev.org/article/coolie-pk-webpack-3-module-build.html

    cooliewebpack
    云淡然
    52 声望2 粉丝
    下一篇 »
    使用 elev 定时部署 Let's Encrypt 通过阿里云 DNS 验证方式实现泛域名 HTTPS/SSL 证书

    引用和评论

    推荐阅读
    头像
    使用 elev 定时部署 Let's Encrypt 通过阿里云 DNS 验证方式实现泛域名 HTTPS/SSL 证书

    云淡然赞 2阅读 4.1k

    头像
    JS工程化集锦

    specialcoder赞 2阅读 2k

    头像
    macOS上HBuildX 开发 uni-app项目，运行调试时编辑保存文件不会自动编译更新页面

    RobinTang阅读 3.4k

    头像
    compression-webpack-plugin项目加载优化+nginx配置

    灰太狼的情与殇阅读 1.8k

    头像
    你的项目刚刚启动？是时候考虑Globalization了！

    注销阅读 1.7k

    头像
    ABAP system landscape和vue项目webpack构建的最佳实践

    注销阅读 1.4k

    头像
    umi 4 踩坑

    assassin_cike阅读 1.3k

    0 条评论
    得票最新