webpack入门，让你不在难

清疚 2023-06-27 12:39 1阅读 0赞

![format_png][]

什么是webpack？

webpack是前端一个工具，可以让各个模块进行加载，预处理，再进行打包，它能有Grunt或Gulp所有基本功能。优点如下：

1.  支持commonJS和AMD模块。
2.  支持很多模块加载器的调用，可以使模块加载器灵活定制，比如babel-loader加载器，该加载器能使我们使用ES6的语法来编写代码。
3.  可以通过配置打包成多个文件，有效的利用浏览器的缓存功能提升性能。
4.  使用模块加载器，可以支持sass，less等处理器进行打包且支持静态资源样式及图片进行打包。

如何安装、配置？

笔者以最基本的入门来讲解安装及配置的步骤，希望能够让大家很容易的理解webpack的入门。

步骤1：生成package.json文件

npm init

![format_png 1][]

步骤2：建立相关文件夹和文件

![format_png 2][]

说明：

src：文件为开发过程中编写文件

dist：为webpack执行编译后的文件

node\_modules:为安装webpack后生成的文件，及放其他配置需要的文件

package.json:npm的配置文件

webpack.config.js:webpack的配置文件

步骤3：配置webpack.config.js

![format_png 3][]

步骤4：运行

![format_png 4][]

上面为运行的执行语句，下面为运行后生成的文件

![format_png 5][]

如出现上面的运行效果，则表示webpack的安装与配置已经完成。下面我们将对应的步骤使用思维导图来展示。

对应的思维导图和代码下载

导图：

![format_png 6][]

可能效果不是很好，大家可以在这里下载：

思维导图：https://pan.baidu.com/s/1gfwxm19

操作代码：https://pan.baidu.com/s/1o8wiUPO

代码下载后，直接进入到webpack-xmind文件夹，使用npm run webpack就可以看到生成的bundle.js文件

未

完

待

续

下期将提供webpack基本应用的思维导图及加载器、插件的demo源码。

如果您认为此篇文章不错，请推广，谢谢！

--------------------

微信订阅号：全栈工程师成长记（qzgcsczj）

目前阶段：

以个人学习前端技术，来记录如何入门，如何填坑，如何成长，记录过程中可能知识零散，没有整合，如有问题直接添加个人微信号，交流学习；

未来阶段：

整合个人学习技术，形成书签式的记录分享，为大家填坑，能够尽量少走弯路，成为全栈工程师。

如有兴趣一起学习，一起进步的朋友可以关注微信公众号号，互相交流进步。

--------------------

![format_png 7][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfZ2lmL294QUhld2FMMnJpYWh6cWFRekFiNkR4VmJaMnlESmp0NkVWdkp3OGlhYU5vUXVRUk1OVEFCSHc1dkNpYjBMOGRSTm96TUxSRmlhanRBTWxseDIwRTVpYTFzMXcvMA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJoNGV4ZlhKekNpYk1IY0ZOQTFKVDJIY0NuUlNhRWlib2ZrWHNsOGoxbU9ibXk1enJpYzFEckJVUHZ0MUZOS21NVTJwWmpOTGxIaWE1d2ZiZy8w?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJoNGV4ZlhKekNpYk1IY0ZOQTFKVDJIY09OcWd1b2Jqbm9vWktta0ZPaWNpYjBDUnNNU3R0QkRHeXd6NmliVzFNdFd1MXVMdWxockJpYjRpYlJnLzA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJoNGV4ZlhKekNpYk1IY0ZOQTFKVDJIY3R0YjZqS2lhSGtYeTJsbEJzUllJMTlTazNGZmE3SjFoUDJwclRYZ0cyVDJIZjJ2UEJnRTQ4aFEvMA?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJoNGV4ZlhKekNpYk1IY0ZOQTFKVDJIY1BiWFFJWnFxMEdWZGpyaWFaaWJwaWFtV0tJeDFWeTF4RHZSc0RpYklWREx4aWNpYlpDZ3hlN04xb2RuUS8w?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJoNGV4ZlhKekNpYk1IY0ZOQTFKVDJIY3FGN1dxUHg1SXFzM05pYmJhcEJvVW1Yb0VtOWxUQ2ZDWW96TDZaeW5sVjBmeEdKNURQdzIwbXcvMA?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJoNGV4ZlhKekNpYk1IY0ZOQTFKVDJIY0tWcVp4TmhHZ0lqNFdTNGpLWGpJaWN4RlN3WjZBYjN3WHRkQlAzV0hGbGlhc0todVVhQmljVHE1Zy8w?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfZ2lmL294QUhld2FMMnJqSXZ2dmFwVzVFVm0wWEMzV2xUMXg2UWdQUUJOZXczQndDalh4Qnhya1VEbHBjd09VeFB4eVVUSTZpY1RpYUhzZzVONG81emRUcFRqWVEvMA?x-oss-process=image/format,png