简单介绍:

webpack是一个模块打包工具,给js准备的打包工具,可以把很多的模块打包成很少的文件

目标:

  1.切分依赖数,分到不同代码块里,按需加载,懒加 载
  2.任何静态资源都可以被视为一个模块,在项目中被引用
  3.整合第三方类库,把类库也视为它的模块,在项目中被引用
  4.初始化加载时间更少
  5.在整个打包过程中可以自定义
  6.适合做大型项目
特性:

代码分割,只加载所需文件,模块通过loaders插件系统处理各种文件,模块热更新

  处理过程:

把有各种依赖的文件通过webpack打包处理成css,js,图片文件

(文件夹dist:存放最终发布版本的代码
dev:开发者版本,开发包)

npm init:生成package.json,避免要手工生成

--save-dev:npm install 在安装 npm 包时,有两种命令参数可以把它们的信息写入 package.json 文件,一个是npm install --save另一个是 npm install --save-dev
           --save-dev 是你开发时候依赖的东西,--save 是你发布之后还依赖的东西。
      如果不使用–save/–save-dev安装模块的话需要手动更新package.json里的dependencies和devDepandencies,而使用–save/–save-dev就可以自动更新package.json了

webpack安装好后,在文件夹里新建一个js文件hello.js
命令行中在当前文件夹下输入webpack hello.js hello.bundle.js(每次写完依赖,命令行执行此句即可)

输出的内容:
Asset:打包生成的文件名称;Size:打包生成的文件的大小;Chunks:这次打包的分块;Chunk Name:这次打包的块名称

在js里依赖加载文件word.js在文件头部写上:require('./word.js')
依赖css文件:require('style-loader!css-loader!./style.css')需要安装loader (npm install css-loader style-loader --save-dev)

--module-bind:模块绑定 --module-bind 'css=style-loader!css-loader'
--watch:这个可以自动更新更改过的代码,无需每次更改代码后都在命令行里敲上文件
--progress打包过程,有百分比进度显示
--display-module:引用的所有模块都列出来,包括引用的方式
--display-reasons:模块打包原因列出来

自己设置参数可以在wenpack.json文件里scripts属性里添加一段脚本,这个脚本可以是一段命令,如:
"webpack":"webpack --config webpack.config.js(定义config文件) --progress(看到打包过程) --display-modules(打包的模块) --colors(命令行里打包出来字的颜色是彩色的)"
然后命令行里输入npm run webpack

webpack入门篇--1.简单介绍的更多相关文章

  1. 漫游Kafka入门篇之简单介绍

    介绍 Kafka是一个分布式的.可分区的.可复制的消息系统.它提供了普通消息系统的功能,但具有自己独特的设计.这个独特的设计是什么样的呢?   首先让我们看几个基本的消息系统术语: Kafka将消息以 ...

  2. 漫游Kafka入门篇之简单介绍(1)

    介绍 Kafka是一个分布式的.可分区的.可复制的消息系统.它提供了普通消息系统的功能,但具有自己独特的设计.这个独特的设计是什么样的呢?   首先让我们看几个基本的消息系统术语: Kafka将消息以 ...

  3. (转)漫游Kafka入门篇之简单介绍

    转自:http://blog.csdn.net/honglei915/article/details/37564521 原文地址:http://blog.csdn.net/honglei915/art ...

  4. iOS开发多线程篇—多线程简单介绍

    iOS开发多线程篇—多线程简单介绍 一.进程和线程 1.什么是进程 进程是指在系统中正在运行的一个应用程序 每个进程之间是独立的,每个进程均运行在其专用且受保护的内存空间内 比如同时打开QQ.Xcod ...

  5. iOS开发UI篇—UITabBarController简单介绍

    iOS开发UI篇—UITabBarController简单介绍 一.简单介绍 UITabBarController和UINavigationController类似,UITabBarControlle ...

  6. iOS开发UI篇—Modal简单介绍

    iOS开发UI篇—Modal简单介绍 一.简单介绍 除了push之外,还有另外一种控制器的切换方式,那就是Modal 任何控制器都能通过Modal的形式展⽰出来 Modal的默认效果:新控制器从屏幕的 ...

  7. iOS开发数据库篇—SQLite简单介绍

    iOS开发数据库篇—SQLite简单介绍 一.离线缓存 在项目开发中,通常都需要对数据进行离线缓存的处理,如新闻数据的离线缓存等. 说明:离线缓存一般都是把数据保存到项目的沙盒中.有以下几种方式 (1 ...

  8. iOS开发UI篇—Kvc简单介绍

    ios开发UI篇—Kvc简单介绍 一.KVC简单介绍 KVC key valued coding 键值编码 KVC通过键值间接编码 补充: 与KVC相对的时KVO,即key valued observ ...

  9. iOS开发UI篇—UIWindow简单介绍

    iOS开发UI篇—UIWindow简单介绍 一.简单介绍 UIWindow是一种特殊的UIView,通常在一个app中只会有一个UIWindow iOS程序启动完毕后,创建的第一个视图控件就是UIWi ...

随机推荐

  1. HashMap源码深入研究

    简介 HashMap是采用链表和位桶来来实现的,由于一个位桶存在元素太多会导致get效率低,因此在jdk1.8中采用的红黑树实现,当链表长度大于TREEIFY_THRESHOLD(值为8)时会转换为红 ...

  2. c# 中事务处理

    1.在c#中,使用以下语句,就可以不用再数据库中进行事务语句处理了. TransactionOptions transactionOption = new TransactionOptions() ; ...

  3. CCS学习(三)

    边框样式  边框线 dorder-style (top 上: bottom 下:  left 左: right 右)  样式:none | hidden | dotted | dashed | sol ...

  4. 64位win7安装jdk和eclipse

    本人正确安装成功步骤,对他人可能无用: 1.直接拷以前32位eclipse ADT 2.安装32位的jdk:jdk-8u45-windows-i586 3.ok,所有环境变量无需手工设置 eclips ...

  5. (转)基于 Token 的身份验证

    原文:https://ninghao.net/blog/2834 最近了解下基于 Token 的身份验证,跟大伙分享下.很多大型网站也都在用,比如 Facebook,Twitter,Google+,G ...

  6. Docker与KVM之间的区别

    一.Docker简介 Docker 项目的目标是实现轻量级的操作系统虚拟化解决方案. Docker 的基础是 Linux 容器(LXC)等技术. 在 LXC 的基础上 Docker 进行了进一步的封装 ...

  7. linux和Windows实现文件共享之samba的安装与配置

    背景: 项目需求linux的一个目录,需要在两台windows目录上面进行同时共享. 使用mount时发现,通过mount将同一个linux上面的目录挂载在两台windows机器上时,会出现文件隐藏的 ...

  8. (转)centos7安装telnet服务

    场景:在进行Telnet测试时候,发现无法连接,所以还得把这个软件也安装了 1 CentOS7.0 telnet-server 启动的问题 解决方法:   先检查CentOS7.0是否已经安装以下两个 ...

  9. 【SignalR学习系列】3. SignalR实时高刷新率程序

    创建项目 创建一个空的 Web 项目,并在 Nuget 里面添加 SignalR,jQuery UI 包,添加以后项目里包含了 jQuery,jQuery.UI ,和 SignalR 的脚本. 创建基 ...

  10. markdown 常用格式API

    摘要 记录常用格式 参考:https://www.zybuluo.com/mdeditor 1. 标题 写法: 文字前加 #, 几个# 表示几级标题 标题下方增加 = 或 - 效果 标题1 标题2 标 ...