webpack从0到手写webpack_03

搭建webpack环境

webpack是基于node开发的模块打包工具，本质上是由node实现的，我们首先就要按照nodejs环境，最好是安装最新版本的nodejs，因为阅读webpack文档,打包速度有两个非常重要的点，一个是要保持nodejs版本非常的新，另一个就是webpack版本非常的新，webpack会利用nodejs中的一些新的特性来提高给它的打包速度，webpack作者也提到了，在某些复杂的情况下，使用新版本的webpack(4)打包比旧版本(3)的打包效率提高90%以上

node安装左侧LTS版本，这是稳定版本。右侧Current未最新版本，里面含有许多尝试性的API，可能会由很多小bug，因此我们为了稳定同事比较新，我们选择左侧的进行下载安装。
网上由很多nodejs环境的搭配教程，我这里就不详细说明了

在cmd命令行运行以下命令，出现版本号，就证明安装好了

我们创建一个新的项目demo03,然后在终端中运行

npm inti -y

生成了一个package文件，里面描述了node包里面的一些信息。我们可以在里面增加一些内容，private:true，代表我们的项目是一个私有的项目，他不会被发布到npm的线上仓库里面去，我们可以把main去掉，因为我们这个项目不会被外界引用，只是自己来用没有必要向外面暴露一个js文件，script中的东西，目前也可以去掉
这样的话我们package.json就配置好了

项目初始化之后我们就开始安装webpack

webpack安装有两种方式
第一种是全局安装的方式

npm install webpack webpack-cli -g 

但是这种全局安装webpack的方式，我非常不推荐大家使用，全局安装webpack有什么
问题呢？举个例子，假设我有两个项目，都用webpack打包，webpack的版本号是固定的，但假设我的一个项目是 通过webpack3进行配置的，另外一个项目是webpack4或者webpack5。如果你全局安装的是4和5，那么webpack为3的项目是运行不起来的。你只能删除webpack4重新安装webpack3，在配置运行项目

第二种用法就是在项目内安装webpack。首先全局卸载webpack

npm uninstall webpack webpack-cli -g

项目内安装webpack

npm install webpack webpack-cli --save-dev

此时你运行

webpack -v

发现找不到webpack这个命令，因为我们是安装在项目内，并不是安装在全局，但是node提供了一个命令叫做npx，我们通过npx 来运行webpack

npx webpack -v

此时打印出webpack 和 webpack-cli的版本号

这种项目内安装webpack的好处是什么，再给大家举个例子。我们在桌面上再去创建一个项目demo04。这个项目我希望用的是 webpack4.x的版本，
首先初始化包,去掉main 和script的内容，添加 “private”:true

npm init -y

通过下面命令查看webpack版本下

npm info webpack

我们选择webpack4 4.44.4这个版本进行下载安装

cnpm install webpack@4.44.2 webpack-cli -D

此时运行 npx webpack -v 命令我们可以看见项目内webpack的版本号为4.44.2