webpack从0到1——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