一、前提
因为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
1 、创建本地项目
在电脑磁盘创建一个webpackDemo文件夹
2、 使用npm init命令初始化package.json文件
在webpackDemo文件夹根目录,使用一下命令 初始化package.json文件
npm init
以上命令 执行之后在webpackDemo根目录就会生成package.json文件,目录如下:
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