Webpack入门教程

webpack入门

 

webpack可以看作是现代Javascript应用程序的静态模块打包器。当webpack处理你的应用程序时，它会根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。（另一种模块化解决方案browserify，这里不作讨论。）

 

webpack和grunt以及gulp相比有什么特性

 

webpack：提供了一种前端模块化解决方案（和requirejs类似却又有不同，按照amd规范写的js可以通过requirejs在线解释执行，而webpack提供的是一种预编译模块的方案，编译之后发布到线上可以在浏览器中直接运行）。

 

grunt/gulp:前端自动化工具，主要用于优化前端工作流程。比如自动刷新页面，代码检测，压缩合并代码，预编译scss，less，文件生成md5戳等。

 

其实两者并没有太多的可比性，但是webpack的优点使得它可以在很多场景下替代grunt、gulp类的工具。

 

（推荐gulp：由于gulp核心api比较少（gulp.src，gulp.dest，gulp.task，gulp.watch），切其是基于流的形式进行文件的处理，并且坚持代码优于配置的策略，使得使用gulp更简单高效。）

 

grunt和gulp的具体实现这里不作讨论，下面我们主要学习webpack的使用技巧。

开始使用webpack

在使用webpack之前，先确保本地已经安装nodejs（这里版本：v8.9.3）。

新建一个空文件，这里命名为webpack-test1。

1，创建package.json文件

在安装webpack前，首先创建一个npm的说明文件package.json,里面记录了当前项目依赖的模块，自定义的脚本任务等信息。除了手动创建外，可以使用npm命令直接创建，如下。

npm init

此命令会让填写一些基本信息，项目名称，项目描述，项目作者等信息，如果不打算发布到npm上，这些信息可随意填写，然后一路回车即可。

2，安装webpack.

package.json创建完成之后，执行如下命令：

全局安装 npm install webpack -g
本地安装 npm install webpack --save-dev

 如果网络比较慢的话可以使用淘宝镜像进行安装，把上面命令行里面npm换成cnpm即可。

*建议使用本地安装，便于有多个项目时对webpack版本进行单独管理。

3，在webpack-test1目录下新建一些文件，生成目录结构如下：

 

 index.html内容：

 

 

在index.html页面里面引入打包后的js文件bundle.js

我们在hello.js中定义一个函数，并根据CommonJS规范导出这个函数为一个模块。

 

 

 在main.js中引入hello.js，并把hello.js中返回的节点插入index.html中的root节点里面.

 

 4，文件准备好之后使用webpack命令打包，对应例子中的文件命令如下：

node_modules\.bin\webpack src/assets/js/main.js --output src/view/bundle.js

 注意在windows中使用cli去调用webpack时，需要使用反斜杠。