webpack初体验

时间:2024-01-15 12:47:02

本人菜鸟一枚,最近一直在研究webpack的使用,记录下自己的学习体会,由于网上关于webpack的资源(技术博客)太多,对于初学webpack的新手来说,看着五花八门的技术博客,真是头晕眼花(可能是列举的示例太深奥,一时无法理解),入了很多的坑,建议还是从技术文档看起,里面的例子都是相对简单易懂的,链接:http://webpackdoc.com/install.html

至于什么是webpack,网上有很多文章都有详细的解释:http://www.cnblogs.com/vajoy/p/4650467.html

下面就详细的写下学习webpack的体会与心得(本人是webpack新手,有什么写的不对的地方,望各位前辈多多提出指正)

一:安装配置

首先要安装 Node.js, Node.js 自带了软件包管理器 npm,npm是一个很强大的功能,安装编译webpack,glup等都需要用到它。

用 npm 安装 Webpack:

在cmd命令行输入:

npm install webpack -g

此时 Webpack 已经安装到了全局环境下,可以通过命令行 webpack -h 试试。

接下来的步骤文档中是这样写的:

通常我们会将 Webpack 安装到项目的依赖中,这样就可以使用项目本地版本的 Webpack。

# 进入项目目录
# 确定已经有 package.json,没有就通过 npm init 创建
# 安装 webpack 依赖
$ npm install webpack --save-dev

文档中的步骤说得挺详细的,看过很多技术博客,有很多都在这一步骤说明得不是很详细,容易误导新手(本人就因此入了不少的坑)。

这里我在这里解释下:

1.进入项目目录:

前提是你创建了自己的项目文件夹,如在D盘创建了一个webpackdemo文件作为自己的项目文件夹。如何进入项目呢?着还是靠cdm命令行来进行,如上创建一个文件夹,你的项目文件目录是:D/webpackdemo,那么需要在cmd中通过命令行找到项目目录。运行cmd,输入:"d:"回车,这样就进入了你手中的电脑D盘目录,再输入"cd webpackdemo",回车就找到了刚创建的项目目录。一切都是以项目目录为基石,编译打包项目代码的。

未完待续......