Webpack之Hello World
QQ: 380800878, 微信: kittenll 最近自己在做一些项目的时候使用Restful和react来做到前后端分离，感受到开发效率的成倍提升，故在此分享一下前端使用webpack作为前端的构建工具。 Webpack是一个前端资源加载，编译，打包工具，可以把多个分散的功能模块javascript, css打包压缩到一个模块当中；合并图片。Webpack使用使用各种的loader来加载编译对应的资源，在网上也有非常多的loader。 0、安装 全局安装： npm install webpack -g 还有一个开发者工具，此工具非常实用，后面介绍： npm install webpack-dev-server -g 也可以使用本地模式随源码一起发行： npm init npm install webpack --save-dev npm install webpack-dev-server --save-dev 随源码一起发行的好处就是不需要别人也强制全局安装，别人拿到源码后直接npm update后即可使用 1、简单使用 在介绍使用配置文件之前，先来看一下官方给出的最简单的编译例子： 新建一个目录hello，进行到hello目录，新建一个javascript文件entry.js，内容如下： document.write("It works."); 然后新建一个index.html文件，内容如下： <html> <head> <meta charset="utf-8"> </head> <body> <script type="text/javascript" src="bundle.js" charset="utf-8"></script> </body> </html> 编译entry.js到bundle.js： webpack ./entry.js bundle.js 如果正常编译通过，你会看到如下的输出（这是我自己的输出，你的输出可能会不太一样）： Hash: a41c6217554e666594cb Version: webpack 1.13.1 Time: 67ms Asset Size Chunks Chunk Names bundle.js 1.42 kB 0 [emitted] main [0] ./entry.js 29 bytes {0} [built] 使用浏览器打开index.html，你将会看到网页上呈现It works. ...