coolie PK webpack 之三：模块构建
本文主要说明的是这两款构建工具（coolie 和 webpack），是分别如何完成模块化构建的，以及它们之间的优缺点。css
预备
首先准备如下文件和目录，基本是承接上文的。html
- 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 的内容为：node
define(function(require){
require('./module.js');
require('./single1.css');
require('./single2.css');
});
引用关系为webpack
entry1.js => module1.js + single1.css + ( single2.css => body.png )
entry2.js 的内容为：git
define(function(require){
require('./module.js');
require('./single1.css');
});
引用关系为，唯独缺乏了 single2.cssgithub
entry1.js => module1.js + single1.css
其余文件内容都在前文说到。web
webpack
webpack.config.js
修改 webpack.config.js 为（可能做者对 webpack 的使用和配置可能不当，如有错误欢迎指正）：npm
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 插件
须要先安装如下两个插件：json
npm i -SD style-loader css-loader
构建
而后再执行：gulp
➜ 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-->
很是的清晰明了：
- CSS 文件的合并、压缩、版本管理。
- JS 文件的合并、压缩、版本管理。
- 模块文件的构建。
最后看看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
相关文章
- 1. 前端构建和模块化工具-coolie
- 2. 基于webpack的模块化构建
- 3. Webpack模块解析构建流程
- 4. 前端webpack构建react系列三：分模块打包
- 5. （三）构建模块——Web页面建设
- 6. Webpack之模块化优化
- 7. webpack之css模块化
- 8. Python笔记（三）：构建发布模块
- 9. webpack、babel模块、模块化
- 10. webpack模块
- 更多相关文章...
- • DTD - XML 构建模块 - DTD 教程
- • Lua 模块与包 - Lua 教程
- • 委托模式
- • 适用于PHP初学者的学习线路和建议
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Appium入门
- 2. Spring WebFlux 源码分析(2)-Netty 服务器启动服务流程 --TBD
- 3. wxpython入门第六步（高级组件）
- 4. CentOS7.5安装SVN和可视化管理工具iF.SVNAdmin
- 5. jedis 3.0.1中JedisPoolConfig对象缺少setMaxIdle、setMaxWaitMillis等方法，问题记录
- 6. 一步一图一代码，一定要让你真正彻底明白红黑树
- 7. 2018-04-12—（重点）源码角度分析Handler运行原理
- 8. Spring AOP源码详细解析
- 9. Spring Cloud（1）
- 10. python简单爬去油价信息发送到公众号
欢迎关注本站公众号,获取更多信息
相关文章