webpack入门（一）

港控/mmm° 2023-01-09 01:20 123阅读 0赞

**什么是 webpack？**

webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。

![5363bdd0c4dcb23465e4d5a138000f59.png][]

我们可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass），但我们无须在上面花费太多心思，因为 webpack 有着各种健全的加载器（loader）在默默处理这些事情，这块我们后续会提到。

你可以不打算将其用在你的项目上，但没有理由不去掌握它，因为以近期 Github 上各大主流的（React相关）项目来说，它们仓库上所展示的示例已经是基于 webpack 来开发的，比如 [React-Bootstrap][] 和 [Redux][]。

webpack的官网是 [http://webpack.github.io/][http_webpack.github.io] ，文档地址是 [http://webpack.github.io/docs/][http_webpack.github.io_docs] ，想对其进行更详细了解的可以点进去瞧一瞧。

**webpack 的优势**

其优势主要可以归类为如下几个：

1. webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。

2. 能被模块化的不仅仅是 JS 了。

3. 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。

4. 扩展性强，插件机制完善，特别是支持 React 热插拔（见 [react-hot-loader][] ）的功能让人眼前一亮。

我们谈谈第一点。以 AMD/CMD 模式来说，鉴于模块是异步加载的，所以我们常规需要使用 define 函数来帮我们搞回调：

define(\['package/lib'\], function(lib)\{ function foo()\{ lib.log('hello world!'); \} return \{ foo: foo \}; \});

另外为了可以兼容 commonJS 的写法，我们也可以将 define 这么写：

define(function (require, exports, module){
        var someModule = require("someModule");
        var anotherModule = require("anotherModule");    
    
        someModule.doTehAwesome();
        anotherModule.doMoarAwesome();
    
        exports.asplode = function (){
            someModule.doTehAwesome();
            anotherModule.doMoarAwesome();
        };
    });

然而对 webpack 来说，我们可以直接在上面书写 commonJS 形式的语法，无须任何 define （毕竟最终模块都打包在一起，webpack 也会最终自动加上自己的加载器）：

var someModule = require("someModule");
        var anotherModule = require("anotherModule");    
    
        someModule.doTehAwesome();
        anotherModule.doMoarAwesome();
    
        exports.asplode = function (){
            someModule.doTehAwesome();
            anotherModule.doMoarAwesome();
        };

不过即使你保留了之前 define 的写法也是可以的，毕竟 webpack 的兼容性相当出色，方便你旧项目的模块直接迁移过来。

[5363bdd0c4dcb23465e4d5a138000f59.png]: /images/20221119/e78d833759594eacaa52fd0416f78f9a.png
[React-Bootstrap]: https://github.com/react-bootstrap/react-bootstrap
[Redux]: https://github.com/gaearon/redux
[http_webpack.github.io]: http://webpack.github.io/
[http_webpack.github.io_docs]: http://webpack.github.io/docs/
[react-hot-loader]: https://github.com/gaearon/react-hot-loader