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

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

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

相关阅读

相关 webpack入门启动webpack工程

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

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

相关【Webpack】Webpack基础入门

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

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

相关 webpack入门（二）

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

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

相关 webpack入门

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

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

相关 webpack入门

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

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

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

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

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

相关 webpack入门

文章目录前言安装开始项目结构 webpack配置 loader加载器 plu

悠悠/ 2022年03月16日 11:24/ 0 赞/ 251 阅读

相关 Webpack入门

Webpack入门简介 Webpack是一个前端构建工具，本文将简要介绍它最常用的功能，并创建一个基于webpack的前端开发环境。范例项目包含两个页

小灰灰/ 2021年12月12日 02:55/ 0 赞/ 313 阅读

相关 Webpack 入门

为什要使用WebPack 现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出

系统管理员/ 2021年09月15日 01:28/ 0 赞/ 449 阅读

相关 webpack简单入门

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

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