乐趣区

关于前端:Webpack教程2-Webpack安装

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 国内》许可协定 转载需注明原文作者、链接与版权协定

退出移动版