webpack学习(一):webpack 介绍&安装&常用命令
一、简单介绍
什么是Webpack
webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理,它能有Grunt或Gulp所有基本功能。
他的目的就是把有依赖关系的各种文件打包成一系列的静态资源。

为什么使用Webpack
webpack 几大重要特点:
1.Webpack的处理速度更快更直接;
2.能打包更多不同类型的文件;
3.扩展性强,插件机制完善。
二、开始安装
首先要安装 Node.js, Node.js 自带了软件包管理器 npm,用npm 安装webpack。
//1.进入项目目录 npm init 创建package.json
npm install webpack --save-dev
//2.安装webpack(以下两种任意选一种都行)
//全局安装
npm install webpack -g
//安装到你的项目目录
npm install webpack --save-dev
三、常用命令
//安装指定版本
npm install webpack@3.5.5 --save-dev
//查看webpack版本信息
webpack --version
//查看webpack信息
npm info webpack
//安装loader并将该loader配置到package.json文件中
npm install {whatever}-loader --save-dev
//显示详细错误信息
webpack --display-error-details
// 自动监控文件的改变
webpack --watch //打包时显示隐藏的模块
webpack --display-modules //打包时显示chunks
webpack --display-chunks
webpack学习(一):webpack 介绍&安装&常用命令的更多相关文章
- webpack 介绍 & 安装 & 常用命令
webpack 介绍 & 安装 & 常用命令 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 webpa ...
- webpack介绍 安装 常用命令
Webpack是一款用户打包前端模块的工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑 ...
- webpack学习(一)安装和命令行、一次js/css的打包体验及不同版本错误
一.前言 找了一个视频教程开始学习webpack,跟着视频学习,在自己的实际操作中发现,出现了很多问题.基本上都是因为版本的原因而导致,自己看的视频是基于webpack 1.x版,而自己现在早已是we ...
- Linux的简单介绍和常用命令的介绍
Linux的简单介绍和常用命令的介绍 本说明以Ubuntu系统为例 Ubuntu系统的安装自行百度,或者参考http://www.cnblogs.com/CoderJYF/p/6091068.html ...
- redis 介绍和常用命令
redis 介绍和常用命令 redis简介 Redis 是一款开源的,基于 BSD 许可的,高级键值 (key-value) 缓存 (cache) 和存储 (store) 系统.由于 Redis 的键 ...
- redis学习-列表(list)常用命令
redis学习-列表(list)常用命令 lpush:从列表左侧头部添加数据 rpush:从右侧尾部添加数据 lpop:从给左侧头部取出一个元素 rpop:从右侧尾部取出一个元素 lrange:取 ...
- webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件
一 .webpack学习环境准备: 1:window系统 2:安装node.js 官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...
- webpack学习笔记—webpack安装、基本配置
文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...
- redis学习(二) redis数据结构介绍以及常用命令
redis数据结构介绍 我们已经知道redis是一个基于key-value数据存储的数据结构数据库,这里的key指的是string类型,而对应的value则可以是多样的数据结构.其中包括下面五种类型: ...
随机推荐
- 小甲鱼OD学习第1讲
这一讲我们的目标是修改Hello.exe对话框的标题和内容,如图所示 把程序放进OD,按F8一步步运行,直到程序弹出对话框为止,然后在弹出对话框位置处下断点 按Ctrl+F2重新载入程序,然后按F9直 ...
- uboot之ldr指令
刚开始接触uboot的时候,就一直对ldr指令很迷惑,因为这个指令有两层用法,一个是加载,一个是伪指令.今天闲着没事就来说一下这两个之间的区别. LDR伪指令的形式是"LDR Rn,=exp ...
- Eclipse Java,debug模式无法调试,调试按钮不可用时解决办法
经常出现debug模式进入后,debug的几个按钮置灰,F5,6,8,没有任何反应时,这样操作: 退出 Eclipse.打开 Eclipse 目录下的 configuration 下的 org.ecl ...
- spring,property not found on type
刚开始学spring mvc ,遇到这个报错. jsp页面 user 实体类 public class User { private String name; private int age; pri ...
- javascript同步分页
目前网上分页的例子比较多,但是对其原理不是很了解,平时用的时候只是拿来调用,今天花了点时间,采用面向对象方式写了一个demo.对其方法做了封装,对外只提供一个调用接口. window.loadPage ...
- C#实现七牛云存储
云存储,就是把本地的资源文件存放至网络上,可以公网访问.相当于网盘功能,感觉非常方便. 这里介绍的是七牛云存储.有兴趣的可以去官方网站详看 根据官网的介绍,本身是提供SDK的,下载地址,大家可以根据自 ...
- web端表格测试用例
表格测试: 表格内容列表排序功能是否正常每一栏的宽度是否足够宽,表格里的文字是否都有折行?是否有因为某一格的内容太多,而将整行的内容拉长?表格是否能左(右)添加(删除)列,表格是否能上(下)添加(删除 ...
- ASP.NET CORE MVC 实现减号分隔(Kebab case)样式的 URL
ASP.NET CORE MVC 中,默认的 Route 模板是: /{controller}/{action} .我们可以通过开启 URL 小写转换将 URL 变为小写,但此方式在 Control ...
- DxPackNet 5.视频高质量的压缩和传输
DxPackNet 对视频的压缩和解压也提供了很好的支持,且系统不需要装第三方解码器哦~ 主要用到了 IxVideoEncoder 视频编码器 和 IxVideoDecoder 两个接口 这里只做简 ...
- 54.1 怎样才算学会django? 知道这28个知识点才算会django2
学到什么程度才算会django了?这篇文章帮你梳理一下 关于django2的28个不可不知的知识点总结: 1.cookie操作: -客户端本地存储的键值对 2.session操作: -服务器端可以保存 ...