一、简单介绍

什么是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 介绍&安装&常用命令的更多相关文章

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

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

  2. webpack介绍 安装 常用命令

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

  3. webpack学习(一)安装和命令行、一次js/css的打包体验及不同版本错误

    一.前言 找了一个视频教程开始学习webpack,跟着视频学习,在自己的实际操作中发现,出现了很多问题.基本上都是因为版本的原因而导致,自己看的视频是基于webpack 1.x版,而自己现在早已是we ...

  4. Linux的简单介绍和常用命令的介绍

    Linux的简单介绍和常用命令的介绍 本说明以Ubuntu系统为例 Ubuntu系统的安装自行百度,或者参考http://www.cnblogs.com/CoderJYF/p/6091068.html ...

  5. redis 介绍和常用命令

    redis 介绍和常用命令 redis简介 Redis 是一款开源的,基于 BSD 许可的,高级键值 (key-value) 缓存 (cache) 和存储 (store) 系统.由于 Redis 的键 ...

  6. redis学习-列表(list)常用命令

    redis学习-列表(list)常用命令   lpush:从列表左侧头部添加数据 rpush:从右侧尾部添加数据 lpop:从给左侧头部取出一个元素 rpop:从右侧尾部取出一个元素 lrange:取 ...

  7. webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件

    一 .webpack学习环境准备: 1:window系统 2:安装node.js  官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...

  8. webpack学习笔记—webpack安装、基本配置

    文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...

  9. redis学习(二) redis数据结构介绍以及常用命令

    redis数据结构介绍 我们已经知道redis是一个基于key-value数据存储的数据结构数据库,这里的key指的是string类型,而对应的value则可以是多样的数据结构.其中包括下面五种类型: ...

随机推荐

  1. [代码]JAVA触发器,Spring的quartz配置

    Spring的quartz中的配置代码,spring-quartz.xml: <?xml version="1.0" encoding="UTF-8"?& ...

  2. ES6中let和闭包

    在开始本文之前我们先来看一段代码 for(var i=0;i<10;i++){ arr[i]=function(){ return i; } } console.log(arr[3]());// ...

  3. Hadoop源码学习之HDFS(一)

    Hadoop的HDFS可以分为NameNode与DataNode,NameNode存储所有DataNode中数据的元数据信息.而DataNode负责存储真正的数据(数据块)信息以及数据块的ID. Na ...

  4. Lua内存分析工具

    最近给公司写了一个lua内存分析工具,可以非常方便的分析出Lua内存泄露问题,有图形化界面操作,方便手机端上传快照等功能 内存分析我是在c语言端写的,也有人写过lua端的分析工具,也蛮好用的,不过lu ...

  5. angular+require前端项目架构搭建

    app //应用入口 directive //自定义指令 require-main //require的主配置文件  存放公共调用的js service //请求后端数据公有类 controllers ...

  6. CentOS利用Nginx+Docker部署.netcore应用

    安装docker 官方文档https://docs.docker.com/engine/installation/linux/docker-ce/centos/ [root@sn ~]# yum re ...

  7. ASP.NET Core的身份认证框架IdentityServer4--(4)添加第三方快捷登录

    添加对外部认证的支持 接下来我们将添加对外部认证的支持.这非常简单,因为你真正需要的是一个兼容ASP.NET Core的认证处理程序. ASP.NET Core本身也支持Google,Facebook ...

  8. Docker镜像的构成__docker commit

    镜像是容器的基础,每次执行docker run的时候都会制定哪个镜像作为容器运行的基础.在之前的例子中,我们所使用的都来自于Docker Hub的镜像.直接使用这些镜像是可以满足一定的需求,而当这些镜 ...

  9. Python 练习册,每天一个小程序----第0000题

    题目 第 0000 题: 将你的 QQ 头像(或者微博头像)右上角加上红色的数字,类似于微信未读信息数量那种提示效果. 类似于图中效果 Code: from PIL import Image,Imag ...

  10. HDU5992 - Finding Hotels

    原题链接 Description 给出个二维平面上的点,每个点有权值.次询问,求所有权值小于等于的点中,距离坐标的欧几里得距离最小的点.如果有多个满足条件的点,输出最靠前的一个. Solution 拿 ...