一、前提

因为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

WebPack的安装的更多相关文章

  1. webpack的安装和使用

    Webpack是什么 首先可以看下 官方文档 ,文档是最好的老师. Webpack是由Tobias Koppers开发的一个开源前端模块构建工具.它的基本功能是将以模块格式书写的多个JavaScrip ...

  2. Bug记载1之webpack本地安装

    当我安装前端打包工具webpack时,cmd命令出现了这么一句关键性的提示: npm ERR ! Refusing to install package as a dendency of itself ...

  3. webpack 介绍 & 安装 & 常用命令

    webpack 介绍 & 安装 & 常用命令 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 webpa ...

  4. webpack介绍 安装 常用命令

    Webpack是一款用户打包前端模块的工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑 ...

  5. webpack局部安装的问题

    webpack的局部安装 npm install webpack 默认状态是当前目录下安装,-g是全局安装 ---------------------------------------------- ...

  6. WebPack 从安装到闲置

    序言:各种技术在研究过程中常常会出现在实际工作中难以实施的情况,于是就慢慢闲置,但学毕竟还是必须要学学的,就看能用到多少,至少开拓了眼界,谨以此安慰下那些学完又闲置的技术~ 跑题结束,以下开始正式配置 ...

  7. 【01】webpack的安装过程截图

    [05](moyu:最好安装在C盘.默认的安装地址.) []全局安装 01,首先要安装Node.js, Node.js 自带了软件包管理器 npm. 02,Webpack 需要 Node.js v0. ...

  8. 【前端_React】Node.js和webpack的安装

    第一步——安装Node.js 首先要安装Node.js,Node.js自带了软件包管理工具npm,可以使用npm安装各种插件.Node.js的下载地址 可以自定义安装到指定的路径下,待安装完成后命令行 ...

  9. 85.webpack的安装失败至成功

    webpack怎么安装 1.安装node.js; 2.安装webpack:   npm install webpack --save-dev   : 注意:webpack 4x以上,webpack将命 ...

随机推荐

  1. ORACLE关于段的HEADER_BLOCK的一点浅析

    在学习段(segment).区间(extent)时,对段的HEADER_BLOCK有一些疑问,本文记录一下探究的实验过程以及相关总结,,如有不对的地方,敬请指出.以SCOTT.EMP表为例(下面测试环 ...

  2. 第1章 PCI总线的基本知识

    PCI总线作为处理器系统的局部总线,主要目的是为了连接外部设备,而不是作为处理器的系统总线连接Cache和主存储器.但是PCI总线.系统总线和处理器体系结构之间依然存在着紧密的联系. PCI总线作为系 ...

  3. dojo报错总结

    dojo报错总结 1.错误一 neteaseTracker is not defined dojo.js(第15行) 2.错误二 _10 is undefined _SearchMixin.js(第5 ...

  4. freemarker报错之四

    1.错误描述 五月 28, 2014 9:56:48 下午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严重: Template proce ...

  5. (三十二)虚拟机linux系统中安装firefox浏览器

    这几天,第二轮项目迭代进入了尾声,同时也接到了上司领导交代下来的新任务,那就是要我们学习linux系统基础的知识,包括常用命令和web应用的部署问题,于是乎安装了虚拟机和linux操作系统. 我安装的 ...

  6. Error:dijit.tree.TreeStoreModel:root query returned 0 items

    1.错误描述 error loading root:                                            Tree.js(第341行) Error:dijit.tre ...

  7. Qt5.6.0+OpenGL 纹理贴图首战告捷

    重要的话写在前面~~通过今晚的实验,知道了EBO是不能随便release的~~~一直不要release就可以了,否则vao会失效 Display.h #ifndef DISPLAYWIDGET_H # ...

  8. Acperience HDU - 5734

    Deep neural networks (DNN) have shown significant improvements in several application domains includ ...

  9. iOS - Quartz 2D 手势截屏绘制

    1.绘制手势截屏 具体实现代码见 GitHub 源码 QExtension QTouchClipView.h @interface QTouchClipView : UIView /** * 创建手势 ...

  10. 【BZOJ1483】【HNOI2009】梦幻布丁(启发式合并,平衡树)

    [BZOJ1483][HNOI2009]梦幻布丁 题面 题目描述 N个布丁摆成一行,进行M次操作.每次将某个颜色的布丁全部变成另一种颜色的,然后再询问当前一共有多少段颜色.例如颜色分别为1,2,2,1 ...