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

Webpack的装置分为全局装置与本地装置，上一节咱们应用的是本地装置，咱们也举荐应用本地装置。

那么全局装置的Webpack与本地装置的有何不同呢？

全局装置的Webpack，在任何目录执行webpack命令都能够进行打包。而本地装置的Webpack，必须要找到对应node_modules下的webpack命令能力执行（在应用npx或package.json的scripts的时候，会主动帮忙咱们寻找）。

那为何举荐本地装置呢？次要是思考Webpack版本不统一的问题，看完上面的内容就更容易了解了。

Webpack须要先装置Node.js，没有装置的话，先去Node官网装置最新稳固LTS版本的Node。

接下来开始装置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。

本地装置最新稳固版本的命令如下

  # 本地装置最新稳固版本，该命令是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 国内》许可协定转载需注明原文作者、链接与版权协定