发表于： 2017-07-07 23:02:42
1 774
今天完成的事情：
【JS-11】如何使用webpack？
深圳分院小课堂第166期
分享人：覃腾波
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
1.背景介绍
当今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法：
a:模块化，让我们可以把复杂的程序细化为小的文件;
b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能 JavaScript文件使浏览器可以识别；
c:scss，less等CSS预处理器.........
这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的，这就为WebPack类的工具的出现提供了需求。
2.知识剖析
什么是webpack？
Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
webpack已经是大部分前端项目打包工具的首选，grunt、glup、browserify等逐渐沦为辅助甚至完全被替代。在grunt、glup、browserify等已经相当火了之后，webpack长江后浪推前浪，把前辈们拍死在沙滩上，实力惊人。
可以毫不夸张的说，webpack已经是你下山行走江湖，叱咤风云的必备技能。
webpack2入门
安装
npm install webpack -g
npm install webpack@< version> --save-dev
创建一个 bundle 文件
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack
查看帮助：
.\node_modules\.bin\webpack --help # windows 用户请使用此路径
现在在 app 子目录下创建一个 index.js 文件。
function component () {
var element = document.createElement('div');
/* 需要引入 lodash，下一行才能正常工作 */
element.innerHTML = _.join(['Hello','webpack'], ' ');
return element;
}
document.body.appendChild(component());
要运行这段代码，通常需要有以下 HTML:
<html>
<head>
<title>webpack 2 demo</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="app/index.js"></script>
</body>
</html>
在 index.js 中打包 lodash 依赖，首先我们需要安装 lodash。
npm install --save lodash
然后 import lodash。
+ import _ from 'lodash';
function component () {
...
同时还要在刚刚创建的html文件中引入bundle文件
<script src="dist/bundle.js"></script>
现在在此文件夹下运行 webpack，其中 index.js 是输入文件，bundle.js 是输出文件，输出文件已打包此页面所需的所有代码。
./node_modules/.bin/webpack app/index.js dist/bundle.js
Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 385ms
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 [emitted] [big] main
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./app/index.js 278 bytes {0} [built]
明天计划的事情：
继续找职位的编写
遇到的问题：
暂无
收获：
webpack的入门使用
返回列表
评论