webpack快速入门

Posted 2021-04-29 前端雨爸

什么是webpack

webpack是模块打包工具，官网介绍就是辣么简单

webpack和gulp

如果新项目用什么构建，我觉得webpack足矣。如果追求更好的构建，到部署等需求，应该webpack+少量的gulp。

从使用gulp和webpack的实践上看，webpack给我带来很多好处：

1. plugins不要费尽心思去找，webpack官网给你罗列了基本够用的插件

2. 模块化打包。以前用gulp还是传统的手动导入js、css，现在webpack可以一条龙服务

3. 各种loader，方便配置es6，jslint等...

4. 相比以前写各种gulp task，现在webpack配置更像一个框架，系统化配置调教，不用再像gulp可能还在为task执行顺序发愁。

缺点：

1. 如果真的有，那就是编译、构建速度真慢。虽然有很多解决方法，但破电脑真心带不动。

2. 配置繁琐

当然两者**不能这样定性的比较，两者定位不同**。

webpack是模块化的解决方法，只是里面有了gulp的许多功能，让我们有了gulp被webpack取代的错觉。

gulp、grunt是构建工具，当然浅显的看没有webpack强大

平时使用，具体看大家的需求定位

解读一个常见的配置

这是一个常见的webpack配置文件，里面基本包含平时够用的配置方法。完全可以使用以下文件，开始一个quickstart的Demo。

我尽可能通过注释描述这个文件，前提是你刚接触webpack。

[当然不用担心，github上传了这个Demo](https://github.com/eminoda/webpack_demo)

前端攻城狮的日常，【长按关注】看看↓↓↓?

好好学习，天天向上

欢迎留言，一起讨论前端问题

点击↙的阅读原文，可翻看全部文章内容。