webpack初体验

Posted 2020-08-09 街边微凉小悲伤

本人菜鸟一枚，最近一直在研究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",回车就找到了刚创建的项目目录。一切都是以项目目录为基石，编译打包项目代码的。

未完待续......