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
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的安装的更多相关文章
- webpack的安装和使用
Webpack是什么 首先可以看下 官方文档 ,文档是最好的老师. Webpack是由Tobias Koppers开发的一个开源前端模块构建工具.它的基本功能是将以模块格式书写的多个JavaScrip ...
- Bug记载1之webpack本地安装
当我安装前端打包工具webpack时,cmd命令出现了这么一句关键性的提示: npm ERR ! Refusing to install package as a dendency of itself ...
- webpack 介绍 & 安装 & 常用命令
webpack 介绍 & 安装 & 常用命令 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 webpa ...
- webpack介绍 安装 常用命令
Webpack是一款用户打包前端模块的工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑 ...
- webpack局部安装的问题
webpack的局部安装 npm install webpack 默认状态是当前目录下安装,-g是全局安装 ---------------------------------------------- ...
- WebPack 从安装到闲置
序言:各种技术在研究过程中常常会出现在实际工作中难以实施的情况,于是就慢慢闲置,但学毕竟还是必须要学学的,就看能用到多少,至少开拓了眼界,谨以此安慰下那些学完又闲置的技术~ 跑题结束,以下开始正式配置 ...
- 【01】webpack的安装过程截图
[05](moyu:最好安装在C盘.默认的安装地址.) []全局安装 01,首先要安装Node.js, Node.js 自带了软件包管理器 npm. 02,Webpack 需要 Node.js v0. ...
- 【前端_React】Node.js和webpack的安装
第一步——安装Node.js 首先要安装Node.js,Node.js自带了软件包管理工具npm,可以使用npm安装各种插件.Node.js的下载地址 可以自定义安装到指定的路径下,待安装完成后命令行 ...
- 85.webpack的安装失败至成功
webpack怎么安装 1.安装node.js; 2.安装webpack: npm install webpack --save-dev : 注意:webpack 4x以上,webpack将命 ...
随机推荐
- strcpy、strncpy与memcpy的区别与使用方法
strcpy.strncpy.memcpy这三个C语言函数我们在主机代码编写中会很频繁的使用到,但是三个函数的区别.使用时该注意什么还是有必要说下的. 本文参考<C 标准库>编写. 一.函 ...
- Integer 与 int
Integer是java为int提供的封装类.int的默认值为0,而Integer的默认值为null,即Integer可以区分出未赋值和值为0的区别,int则无法表达出未赋值的情况 例如,要想表达出没 ...
- Shell脚本编程学习入门 02
Shell脚本编程学习入门是本文要介绍的内容,我们可以使用任意一种文字编辑器,比如gedit.kedit.emacs.vi等来编写shell脚本,它必须以如下行开始(必须放在文件的第一行): #! ...
- java使用poi读取doc和docx文件
这几天在学习java io流的东西,有一个网友看到博客后问了一个问题,就是说他的doc文档为什么用我所说的方法死活就是乱码. 我一开始以为是他方法问题,结果自己试了之后发现和他的结果一样也是乱码. 于 ...
- 超链接a标签的属性target的可选值有哪些以及区别
超链接a标签的属性target的可选值有哪些以及区别 1.<a target="_blank"></a> 2.<a target="_par ...
- dojo中表格行隐藏出错
1.错误描述 TypeError:role._by_idx[e.rowIndex].hide is not a function (54 out of range 3) 2.错误原 ...
- Tornado模块
Tornado 一个轻量级的Web框架 简介 1.Tornado在设计之初就考虑到了性能因素,旨在解决C10K问题,这样的设计使得其成为一个拥有非常高性能的框架.此外,它还拥有处理安全性.用户验证.社 ...
- asp.net mvc razor布局页中a标签的href的跳转问题
笔者做了一个文件上传系统,文件上传后,保存在wwwroot目录的file文件夹中,并把该文件的路径保存到数据库中, 如这样的一个路径保存在数据库: file/b775f487-0127-41e0-9d ...
- jquery回调函数的一个案例
1.引言 今天在学习<jQuery基础教程>在学习编写插件的时候,书中说利用回调函数来当参数,会极大的提高程序的灵活性.对回调函数很陌生.研究了一下给的示例程序.感觉对回调函数有了基本的了 ...
- 【转载】 Spark性能优化:资源调优篇
在开发完Spark作业之后,就该为作业配置合适的资源了.Spark的资源参数,基本都可以在spark-submit命令中作为参数设置.很多Spark初学者,通常不知道该设置哪些必要的参数,以及如何设置 ...