Webpack 的装置分为全局装置与本地装置,上一节咱们应用的是本地装置,咱们也举荐应用本地装置。
那么全局装置的 Webpack 与本地装置的有何不同呢?
全局装置的 Webpack,在任何目录执行 webpack 命令都能够进行打包。而本地装置的 Webpack,必须要找到对应 node_modules 下的 webpack 命令能力执行(在应用 npx 或 package.json 的 scripts 的时候,会主动帮忙咱们寻找)。
那为何举荐本地装置呢?次要是思考 Webpack 版本不统一的问题,看完上面的内容就更容易了解了。
Webpack 须要先装置 Node.js,没有装置的话,先去 Node 官网装置最新稳固 LTS 版本的 Node。
接下来开始装置 Webpack。
一、Webpack 全局装置
1. 下方第一个命令是全局装置 Webpack 及其命令行工具 webpack-cli,装置的版本是最新稳固版本。如果要装置指定版本,能够在装置的包名前面加上 @x.x.x 这种模式的版本号。
webpack 包是 webpack 外围 npm 包,webpack-cli 是命令行运行 webpack 须要的 npm 包。
# 全局装置最新稳固版本
npm install webpack webpack-cli -g
# 全局装置指定版本
npm install webpack@4.43.0 webpack-cli@3.3.12 -g
咱们装置的是 webpack4,目前对应的 webpack-cli 版本是 3,在咱们应用的时候,这两个包都必须装置。在 webpack3 时代,咱们不须要装置 webpack-cli。
二、Webpack 本地装置
本地装置最新稳固版本的命令如下
# 本地装置最新稳固版本,该命令是 npm install webpack webpack-cli --save-dev 的缩写
npm i webpack webpack-cli -D
本地装置指定版本的形式与全局装置的一样,都是包名前面加 @x.x.x 这种模式的版本号。
在学习本教程的时候,倡议装置与教程里统一的版本,便于学习。
全局装置与本地装置的 Webpack 是能够共存的。在大多数前端我的项目开发的时候,是须要本地装置的。因为只进行全局装置的话,可能因为版本不统一的问题导致本地我的项目跑不起来。
全局装置的 Webpack,在任何目录执行 webpack 命令都能够进行打包。而本地装置的 Webpack,必须要找到对应 node_modules 下的 webpack 命令能力执行,因而个别须要拼接门路。
本地装置的 Webpack,如果不想拼接门路,咱们能够应用命令 npx webpack,或者在 package.json 文件里写入上面的命令并执行 npm run dev。这两种形式都会主动执行 node_modules 下的 webpack 命令,不须要咱们把门路拼接上。
// ...
"scripts": {"dev": "webpack"},
// ...
三、小结
本节讲了 Webpack 的全局装置与本地装置。本教程举荐本地装置 Webpack,以防止版本不统一导致的问题,应用 npx webpack 既可进行打包。
博客:姜瑞涛的官方网站
原文链接:https://www.jiangruitao.com/w…
版权采纳《署名 - 非商业性应用 - 禁止演绎 4.0 国内》许可协定 转载需注明原文作者、链接与版权协定