webpack入门（二）：对 webpack 有一个简单的认识

冷不防 2022-05-30 12:12 107阅读 0赞

如果你安装好了node开发环境，也学会了npm操作，那么下面就可以学习webpack了；

webpack 就是一个工具，什么样的工具呢？

我们一步步的来看：

首先我们打开 Gitbash , 这是一个命令行工具，你下载node的时候,不仅仅会下载node环境，

还会一并下载 npm 和  Gitbash;

我们打开Gitbash( 或者其它的也行)：就是这个样子的；

![70][]

我们先转到 F盘，因为我要在F盘中创建我的项目，那么命令就是： cd  f :

![70 1][]

现在我们已经在 F 盘了，下面我创建一个文件夹，名字叫 webpack-test1,使用的命令就是：

mkdir webpack-test1

![70 2][]

我们先查看一下当前 f 盘下面有多少个文件夹以及我们刚刚创建的文件夹，命令  ls  ：

![70 3][]

好了，我们已经新建了一个webpack-test1文件夹，下面开始下载 webpack ,我这里

采用全局安装，也就是下载的 webpack 工具每个项目都可以使用，不是任何一个项目

所单独拥有的；  命令： npm install webpack@3.0.0 -g    ，就不演示过程了，

(这个命令是下载指定的版本3.0.0  )；

现在我们打开我们的项目目录，然后创建index.html 和abc.js：

![70 4][]

![70 5][]

创建完成之后，我们使用webpack进行处理：

![70 6][]

webpack abc.js  obj.js  的意思是把abc.js文件打包成最后的obj.js,

我们最后引用的就是这个obj.js文件；

访问index.html 正常输出 “ abc ”，

现在可以看到 webpack就是这样一个工具，帮助我们更好的进行开发和优化；

并且  webpack是一个仅仅处理  js 文件的工具，那么css  图片等其他文件怎么处理，

webpack可以通过loader进行转换然后处理我们的资源，后面会说明，

本篇简单的对webpack有了一个印象，下一篇会通过一个例子，加深印象并且学习新的东西。。。

[70]: /images/20220530/f0494e471ec14b388e2fd411b6c4eb1f.png
[70 1]: /images/20220530/a9b027351aa54379b5ccec90067e276f.png
[70 2]: /images/20220530/3c560b90f73f4c369a43f640b078eb93.png
[70 3]: /images/20220530/7e8f62960f3342e9b1aaa6b4495b6c42.png
[70 4]: /images/20220530/bc8009b1df184d2cbf967ec40643b54f.png
[70 5]: /images/20220530/a8085b5fcbd4468cbee124638a1b39d3.png
[70 6]: /images/20220530/74d20c14c18f4c95bee59f39c620701f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，107人围观）

还没有评论，来说两句吧...

相关阅读

相关 Webpack 快速入门指南（二）

开发本指南继续沿用管理输出指南中的代码示例。如果你一直跟随之前的指南，应该对一些 webpack 基础知识有着很扎实的理解。在我们继续之前，先来看看如何建立一个...

迈不过友情╰/ 2024年04月17日 16:56/ 0 赞/ 12 阅读

相关 webpack入门启动webpack工程

前提：安装完webpack以及webpack-dev-server 参照： [https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI

墨蓝/ 2023年10月18日 09:39/ 0 赞/ 59 阅读

相关【Webpack】Webpack基础入门

目录 1. 模块化相关概念 1.1 模块化的概念 1.2 模块化规范

红太狼/ 2023年02月17日 11:13/ 0 赞/ 201 阅读

相关 webpack入门（二）

安装可以用 npm 安装 npm install webpack -g 1 > 注意：这里全局安装是出于演示的目的

喜欢ヅ旅行/ 2022年06月17日 05:27/ 0 赞/ 121 阅读

相关 webpack入门（二）：对 webpack 有一个简单的认识

如果你安装好了node开发环境，也学会了npm操作，那么下面就可以学习webpack了； webpack 就是一个工具，什么样的工具呢？我们一步步的来看：

冷不防/ 2022年05月30日 12:12/ 0 赞/ 108 阅读

相关 webpack入门

Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码隔离。通过lo

灰太狼/ 2021年12月22日 13:25/ 0 赞/ 336 阅读

相关 webpack入门

定义自动化构建工具： webpack:模块化打包工具 gulp:文件转移、文件压缩。。。前端工程（前端项目）中文：[https://doc.webpac

深藏阁楼爱情的钟/ 2021年09月14日 10:02/ 0 赞/ 416 阅读

相关 webpack简单入门

webpack 1、关于webpack 1. 什么是webpack？ webpack可以看做是将模块自动打包的工具，它会自动分析项目结构，然后将

忘是亡心i/ 2021年09月02日 03:41/ 0 赞/ 393 阅读

相关 webpack入门

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhp

╰+攻爆jí腚メ/ 2021年08月30日 23:50/ 0 赞/ 460 阅读

相关 webpack入门

首先看一下结构目录 ![20200823151520415.png][] 1，新建空的文件夹“webpack\_test”，进入该文件夹dos窗口，输入以下命令生成pac

ゝ一纸荒年。/ 2021年07月25日 16:00/ 0 赞/ 491 阅读