您的位置：首页 > Web前端

前端速学成财:第九课-webpack篇:编译JS的正确姿势

2016-08-18 21:38 267 查看

本节知识点:

1.速度了解CommonJS

2.安装webpack

3.编译我们的JS

1.CommonJS是一个规范(http://commonjs.org)

譬如:一个单独的文件就是一个模块.使用require来加载模块,返回文件内部的exports对象

大家看是否和NodeJS的写法很像？确实,NodeJS实现并推动了这个规范(一大部分)

有了这个规范JS可以在任何地方运行,不只是浏览器中(未来很多只要兼容CommonJS规范的系统都可以用JavaScript来开发)

课后:请大家回去查询其他规范,如AMD、CMD规范等(譬如看下Require.Js,)

遵循这个规范然后呢？

这时一个前端构建框架–webpack产生了(模块打包)

它能帮我们把本来需要在服务端运行的JS代码,通过模块的引用和依赖打包成前端可用的静态文件

2.安装

npm install -g webpack

设置配置文件

在项目根目录下新建一个webpack.config.js

module.exports=
{
entry:[    //entry是入口文件 可以多个
__dirname+'/sxin.js'
],
output:{
path:__dirname+'/build/js',
filename:'build.js'
}
}

运行webpack

sxin.js

var getlib=require('sxin');
console.log(getlib.age);
alert(getlib.age);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="build/js/build.js"></script>
test
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航