Webpack 安装

本节我们来学习 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/

Webpack 安装相关推荐

webpack 安装卸载
webpack安装: npm install webpack -g //-g 全局npm install webpack -s //-s 局部 npn install webpack@x.xx -g ...
【JavaScript】 Webpack安装及文件打包
背景最近开启一个新项目,需要对前端的各类资源文件进行打包,经过多方调研后,决定使用webpack工具.但是网上的教程多是将webpack直接作为服务器使用,而我只是想将其作为单纯的资源打包工具而已. ...
Webpack安装及打包js、css文件示例
什么是Webpack Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.Webpack 可以将多种静态资源 js.css ...
webpack前端构建工具学习总结（一）之webpack安装、创建项目
npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...
webpack 安装vue（两种代码模式compiler 和runtime）
使用webpack安装vue,import之后,运营项目报错,如下: [Vue warn]: You are using the runtime-only build of Vue where the ...
webpack安装使用教程
写在前面的话阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过:如果你和十天前的我一样,对很多选项存在着疑惑,那花一段 ...
webpack安装与使用（详细）
一.什么是webpack? webpack是现代javascript应用程序的静态模块打包器,当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中 ...
webpack安装 webpack-dev-server后运行报错
webpack安装 webpack-dev-server后进行实时监听报错 webpack安装插件 webpack-dev-server后进行实时监听,重新运行npm run dev报错一.问题现象 ...
webpack安装教程及webpack-dev-server
znwebpack安装教程_彳亍的博客-CSDN博客_webpack安装教程 webpack\webpack-cli上方文章写的非常好了,直接按步骤来就行,也可以通过cnpm安装(把np ...