如何使用webpack？

大家好，我是IT修真院武汉分院第5期的如何使用webpack学员朱英杰，一枚正直纯洁善良的WEB前端程序员。

1.背景介绍

随着前端开发的不断发展，我们所写的页面越来越u都，js文件页越来越多。

庞大的代码库需要高效的组织，而module开发的系统即为大多数的开发者采取的途径

2.知识剖析

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

3.常见问题

如何使用webpack

4.解决方案

在安装 Webpack 前，你本地环境需要支持 node.js。

由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。

使用 cnpm 安装 webpack：cnpm install webpack -g>

5.编码实战

创建项目

接下来我们创建一个目录 app：

mkdirapp

创建项目

接下来我们创建一个目录 app：

mkdirapp

在 app 目录下添加 runoob1.js 文件，代码如下：

app/runoob1.js 文件

document.write("It works.");

在 app 目录下添加 index.html 文件，代码如下：

app/index.html 文件

接下来我们使用 webpack 命令来打包：

webpackrunoob1.jsbundle.js

执行以上命令会编译 runoob1.js 文件并生成bundle.js 文件，成功后输出信息如下所示：

Hash:a41c6217554e666594cbVersion:webpack1.12.13Time:50msAssetSizeChunksChunkNamesbundle.js1.42kB0[emitted]main[0]./runoob1.js29bytes{0}[built]

在浏览器中打开 index.html，输出结果如下：

6.拓展思考

gulp和webpack有什么区别？

webpack

gulp强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。

webpack

webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。

虽然都是前端自动化构建工具，但看他们的定位就知道不是对等的。

gulp严格上讲，模块化不是他强调的东西，他旨在规范前端开发流程。

webpack更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。

7.参考文献

http://www.cnblogs.com/lovesong/p/6413546.htmlgulp与webpack的区别

ppt:ptteng.github.io/PPT/PPT/js-11-How%20to%20use%20webpack.html#/

视频：

如何使用webpack？_腾讯视频