上一篇介绍了从淘宝源安装webpack,这种方法安装webpack,只要保证待安装环境是干净的,安装命令准确,基本都可以安装成功。但淘宝源的cnpm不稳定,也不是开发、测试的长久之计,在一次重新编译npm失败后,我决定,安装原生npm,啃下这块硬骨头。
到网上查了一些资料,也问了公司大佬,安装webpack只需要局部安装(本地安装)就好了,全局安装没什么必要,所以,今天记录一下我安装原生npm和webpack踩过的坑。
安装node.js
关于安装node.js,webpack官方文档上写的很清楚,node.js必须是长期支持版本的,即LTS版本
所以,我就在node.js官网上下载了10.16.0 LTS版
这是一个打好包的安装器,按照提示一路next就好
node.js安装的时候已经把npm安装好了,这时候打开终端,在主目录下执行命令:
node -v
#查看node.js版本
npm -v
#查看npm版本
查看二者版本号:
安装webpack-cli
环境准备好了,现在来安装cli
在webpack官方文档中说明,使用最新的webpack 4以上版本,需要在本地安装cli
在项目目录下(有package.json文件的项目目录)执行命令:
sudo npm install --save-dev webpack-cli
命令执行完毕后截图如下:
安装webpack
webpack官网上关于全局安装还是本地安装有这样一段话:
对于大多数项目,我们建议本地安装。这可以使我们在引入破坏式变更(breaking change)的依赖时,更容易分别升级项目。通常,webpack 通过运行一个或多个 npm scripts,会在本地 node_modules 目录中查找安装的 webpack:
所以我们只要本地安装即可,执行命令:
sudo npm install --save-dev webpack
安装完的截图:
到此为止,安装一切顺利,你以为这样就完了?No,踩坑之旅即将开始~
测试安装成果
测试安装成果过程中出现了很多意想不到的error,由于error太多,篇幅过长,请见博文:webpack安装成功后的run build填坑之旅