乐趣区

关于webpack:Webpack-安装

jiezi

本节咱们来学习 webpack4.0 的装置，webpack 的运行须要依赖 Node.js 的运行环境，在装置 webpack 时也须要用到 npm，所以咱们须要先装置 Node.js，Node.js 自带了软件包管理器 npm。

webpack 须要 Node.js v0.6 以上版本反对，所以倡议应用最新版，装置地址为：https://nodejs.org/en/download/，装置过程如果不相熟的同学能够去看一下 Node.js 入门教程，这里就不给大家演示啦。

创立一个我的项目

首先咱们须要创立一个我的项目文件，例如在桌面上创立一个 xkd_webpack，而后在终端中进入这个我的项目的根目录，如下图：

而后能够执行 npm init 命令初始化我的项目，这时会在我的项目根目录下主动生成一个 package.json 文件，这个文件中是一些配置信息：

在初始化时会显示一些问题，如果这些问题咱们全副抉择默认答案，则能够间接执行 npm init –yes 来间接创立 package.json 文件。

上面是一个创立好的 package.json 文件内容：

{
  "name": "xkd_webpack",
  "version": "1.0.0",
  "description": "","main":"index.js","scripts": {"test":"echo \"Error: no test specified\" && exit 1"},"author":"",
  "license": "ISC",
  "devDependencies": {}}

初始化结束之后就能够开始装置 webpack，有两种装置 webpack 的形式，一种是全局装置，一种是部分装置。

package.json 字段

咱们来看一下 package.json 文件中的字段，name 和 version 字段是 package.json 文件中的必须字段，一起组成惟一的标识符。

  • name：项目名称。留神不能以点或者下划线结尾、不能超过 214 个字符、不能蕴含大写字母。
  • version：版本号，由 主版本. 此版本. 补丁版 本组成，例如 1.0.0。
  • author：作者。
  • license：指定我的项目的许可证，能够使人晓得应用的权力和限度的。
  • scripts：脚本命令，是一个由脚本命令组成的 hash 对象，在包不同的生命周期中被执行。
  • description：我的项目的形容，字符串类型。
  • keywords：我的项目的关键字。
  • devDependencies：我的项目的依赖。
  • homepage：我的项目官网的地址。
  • bugs：我的项目提交问题的 url 和（或）邮件地址。

全局装置 webpack

全局装置个别装置的是一个工具，将工具装置在某个全局环境下，而不是一个文件夹下。全局装置在命令行中的任何中央都是能够间接调用的。webpack 我的项目的两个外围根底模块是 webpack 和 webpack-cli，这是 webpack 我的项目构建的前提。

如果咱们曾经胜利装置好了 Node.js，就能够执行上面的 webpack 全局装置命令啦：

npm install webpack webpack-cli -g

此命令在终端中执行成果如下图所示：

装置 webpack 同时装置 webpack-cli 工具，装置 webpack-cli 的作用就是能让 webpack 打包命令顺利执行。执行实现之后，webpack 的全局装置就胜利了，为了验证，咱们能够通过 webpack -v 命令来检查一下是否装置胜利，如下图所示，呈现版本号则示意 webpack 装置胜利：

个别不要去装置全局，因为不是所有我的项目 webpack 都是一个版本，要是启动两个以上的我的项目的话因为版本不一样必定会遇到我的项目无奈启动的问题，所以还是在本我的项目中去装置比拟好。

删除全局装置的 webpack 命令如下：

npm uninstall webpack webpack-cli -g

部分装置 webpack

部分装置也能够叫做本地装置，如果咱们要在本地装置 webpack，能够执行如下所示命令：

npm install webpack webpack-cli --save-dev

装置胜利后，我的项目根目录下会呈现一个 package-lock.json 文件和 node_modules 文件夹。前面咱们在我的项目中通过 npm 装置的依赖包都会默认装置到 node_modules 文件中。在应用装置好的模块包时，须要通过 require 来引入到我的项目中应用。

如果须要应用 webpack 开发工具，要独自进行装置。

示例：

例如咱们要装置一个 webpack-dev-server，命令如下所示：

$ npm install webpack-dev-server --save-dev

到此，咱们的 webpack 的装置就实现啦，下一节咱们学习如何应用 webpack。

更多链接：https://www.9xkd.com/

退出移动版