当前位置:首页 > webpack > 正文

web开发模块化初探

目前团队的开发模式使用的是:seajs+jsc+node(tsw+框架机);
其中seajs是cmd规范的模块加载器;
jsc是团队牛人开发的node的打包工具,主要是将不同的seajs模块进行打包为一个js,
优点:方便网络传输;一次请求,整个模块都有了~;内部的引用也方便;都已经是seajs的模块了,有相应的模块id,直接可以像本地引入一样的require(‘./xxx.js’);引入者和被引入者都在同一个src目录,最终都被打包为一个index.js文件;同时如果涉及到模板tmpl.html,也可以打包到index.js,方便tmpl模块的调用;
缺点:可能会有一些不需要的js被浪费掉;偶尔回有些watch文件失败的场景,或者一些错误;

那目前流行的webpack打包工具,是否适合部分项目呢?
有一些实例进行入门:

入口index.html



测试webpack




入口entry.js
require("./style.css");
var content = require('./content');
document.write(content + '; require from entry.js');

引入一个其他的content.js
module.exports = 'it works for module in content.js';

另外还涉及到一个css:
body {
font-size: 24px;
font-weight: bold;
}

通过webpack打包:
webpack打包

压缩后js文件会变大;不过没办法了~
有待进一步的研究

暂无评论

发表评论

您必须 [ 登录 ] 才能发表留言!