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

冷不防 2022-05-30 12:12 172阅读 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 条评论，172人围观）

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

相关阅读

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

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

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

相关 webpack入门启动webpack工程

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

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

相关前端工程化-认识webpack工具-webpack的配置方法

文章目录认识webpack工具 node内置模块path 认识webpack Webpack

落日映苍穹つ/ 2023年09月28日 14:39/ 0 赞/ 11 阅读

相关 webpack入门创建一个简单的项目

开始前需要安装好 node npm(cnpm) 1. 首先创建一个目录 one-webpack 并进入目录 2. 初始化项目，命令如下 npm init

忘是亡心i/ 2023年07月11日 06:12/ 0 赞/ 20 阅读

相关【Webpack】Webpack基础入门

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

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

相关 webpack入门（二）

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

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

相关 webpack入门

安装nodejs、npm省略，webpack版本使用2.6.1 1、安装webpack 由于使用npm安装很慢，因此切换成cnpm，安装命令： npm insta

拼搏现实的明天。/ 2022年06月14日 10:06/ 0 赞/ 242 阅读

相关 webpack入门

webpack可以打包的不仅仅是js了，css，sass，图片都可以进行打包，下面有入门的一步一步的简单示例：概念：webpack是模块加载器兼打包工具，它能

ゞ浴缸里的玫瑰/ 2022年05月30日 12:21/ 0 赞/ 248 阅读

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

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

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

相关 webpack简单入门

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

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