webpack学习(一):webpack 介绍&安装&常用命令

时间:2021-12-30 23:01:53

一、简单介绍

什么是Webpack

webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理,它能有Grunt或Gulp所有基本功能。

他的目的就是把有依赖关系的各种文件打包成一系列的静态资源。

webpack学习(一):webpack 介绍&安装&常用命令

为什么使用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. MySQL黑科技用法总结(持续更新)

    1.利用set插入数值 insert [into] 表名 set 列=值.  2.利用select对字段进行测试 ) ,并且有2条记录 ',num1+1的计算结果 tips:相等返回1,否则返回0 f ...

  2. C++ inline函数

    本文主要记录了C++中的inline函数,也就是内联函数,主要记录了以下几个问题: C++为什么引入inline函数? 为什么inline能很好的取代表达式形式的预定义? inline函数的使用场合 ...

  3. 《大话》之 装饰模式 Vs 建造者模式

    一.简介: 装饰模式:     背景:小菜要见美女娇娇,感慨自己不会着装,怕给娇娇留下坏印象               内容:动态的给一个对象添加一些额外职责               图文并茂: ...

  4. JAVA学习课第五十三届 — IO流程(七)File打靶 & Properties设置

    一个.锻炼 深度遍历目录 深度遍历非常自然而然想到递归,而递归就非常自然的想到事实上现的底层算法是栈 对指定文件夹下列出全部内容(包括子文件夹的内容) PS:建议不要遍历C盘 import java. ...

  5. Linux系统安装建议

    1.推荐使用CentOS-6.x 64位版本:2.分区,推荐分出/usr/local用来存放应用程序./data分区用来存放数据,具体分区建议如下:/boot 100Mswap 4096M (视内存大 ...

  6. centos6 网卡配置,多IP设置

    ##云服务器 centos6网卡配置 #设置出口IP vim /etc/sysconfig/network-scripts/ifcfg-eth0DEVICE=seth0 #网卡名称 BOOTPROTO ...

  7. centos shell运行报语法错误: 未预期的文件结尾

    可能原因: 脚本是windows下写的,然后传到linux下运行的 需要给dos文件格式转成unix dos转unix 安装: yum install dos2unix 命令: dos2unix fi ...

  8. Reading CLR via c# 4th Edition

    In fact, at runtime, the CLR has no idea which programming language the developer used for thesource ...

  9. 一步一步搭建oracle 11gR2 rac+dg之环境准备(二)【转】

    一步一步在RHEL6.5+VMware Workstation 10上搭建 oracle 11gR2 rac + dg 之环境准备 (二) 一步一步搭建oracle 11gR2 rac+dg之环境准备 ...

  10. 使用c函数库的两个函数strtok, strncpy遇到的问题记录

    1. strtok 问题背景: 解析形如 “1,2,3,4,5”字符串到整数数组 (1)计算个数 char* delim = ","; int count = 0; int *nu ...