WebPack的安装

时间:2023-03-09 09:52:14
WebPack的安装

一、前提

因为webpack是一个基于node的项目,所以首先需要确保你的电脑里面已经安装了node.js,以及npm。在这里我使用的版本是:node:v5.8.0 ,npm:3.7.3,若是版本问题,请更新到最新版。

二、全局安装

Webpack常规的安装是通过npm,如果 你对npm不是特别的熟悉请阅读:npm快速入门

Webpack的有些命令需要电脑安装才能使用,所以需要通过npm命名进行Webpack的全局安装:

$ npm install webpack -g

安装之后执行

webpack -v

出现一下信息说明全局安装成功了:

WebPack的安装

三、项目安装Webpack

1 、创建本地项目

在电脑磁盘创建一个webpackDemo文件夹
 
 2、 使用npm init命令初始化package.json文件 
  
 在webpackDemo文件夹根目录,使用一下命令 初始化package.json文件

npm init

WebPack的安装

以上命令 执行之后在webpackDemo根目录就会生成package.json文件,目录如下:

WebPack的安装

3、本地项目安装webpack
  
   使用以下npm命令把webpack安装到项目里面

$ npm install webpack --save-dev #将webpack增加到package.json文件中

4、webpack相关插件安装

这里我们只说webpack的本地服务器插件,以后的章节我们会讲解其它的相关的插件。

Webpack有一个很实用的功能叫做热替换(Hot-replace),尤其是结合React Hot Loader插件,开发过程中都不需要刷新浏览器,任何前端代码的更改都会实时的在浏览器中表现出来。

首先需要安装Webpack-dev-server,一个轻量的node.js express服务器。

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