webpack入门篇--1.简单介绍

webpack是一个模块打包工具,给js准备的打包工具,可以把很多的模块打包成很少的文件,特性:代码分割,只加载所需文件,模块通过loaders处理各种文件
         处理过程:把有各种依赖的文件通过webpack打包处理成css,js,图片文件
目标:1.切分依赖数,分到不同代码块里,按需加载,懒加 载
  2.任何静态资源都可以被视为一个模块,在项目中被引用
  3.整合第三方类库,把类库也视为它的模块,在项目中被引用
  4.初始化加载时间更少
  5.在整个打包过程中可以自定义
  6.适合做大型项目
特性:代码分割,loader,插件系统,模块热更新

文件夹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

时间: 2024-08-13 23:26:46

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

漫游Kafka入门篇之简单介绍

原文地址:http://blog.csdn.net/honglei915/article/details/37564521 介绍 Kafka是一个分布式的.可分区的.可复制的消息系统.它提供了普通消息系统的功能,但具有自己独特的设计.这个独特的设计是什么样的呢? 首先让我们看几个基本的消息系统术语: Kafka将消息以topic为单位进行归纳. 将向Kafka topic发布消息的程序成为producers. 将预订topics并消费消息的程序成为consumer. Kafka以集群的方式运行,

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

转自:http://blog.csdn.net/honglei915/article/details/37564521 原文地址:http://blog.csdn.net/honglei915/article/details/37564521 介绍 Kafka是一个分布式的.可分区的.可复制的消息系统.它提供了普通消息系统的功能,但具有自己独特的设计.这个独特的设计是什么样的呢? 首先让我们看几个基本的消息系统术语: Kafka将消息以topic为单位进行归纳. 将向Kafka topic发布消

Spring入门篇7 ---- 简单介绍AOP

Spring-AOP 面向切面编程,它是对OOP的一种补充,OOP一般就是纵向关系,举个例子我们发一个用户信息的请求,正常情况下流程就是:身份验证 ——查询用户信息——日志记录(是情况而定)——返回信息,这个就是OOP面向对象编程,但如果有很多业务的话,那么身份验证,日志处理(一般AOP不会用于业务日志处理,否则以后运维的时候比较麻烦),会被调用很多次,这个时候可以引入AOP,他是面向切片处理,它会将程序横向截断,例如把权限模块进行抽离,实现解耦,如果后续权限需要调整只需要调整抽离出来的权限组件

OpenCV学习教程入门篇<一、介绍>

OpenCV,是Inter公司开发的免费开源专门由于图像处理和机器视觉的C/C++库,英文全称是Open Source Computer Vision. 1. 可视化语言Matlab与OpenCV都可以用于图像处理,学哪种比较好? Matlab是主要面对高校做科研的一种可视化数学处理工具箱,OpenCV在有关图像的项目研发方面应用广泛.想做模式识别和机器视觉方向的,我的导师建议两者都要学好,不论发表paper,还是做项目. 2.OpenCV是基于C/C++的函数库,有什么优势? 使用C编写的库,

iOS开发拓展篇-XMPP简单介绍

iOS开发拓展篇-XMPP简单介绍 一.即时通讯简单介绍 1.简单说明 即时通讯技术(IM)支持用户在线实时交谈.如果要发送一条信息,用户需要打开一个小窗口,以便让用户及其朋友在其中输入信息并让交谈双方都看到交谈的内容 有许多的IM系统,如AOL IM.Yahoo IM. MSN以及QQ,它们最大的区别在于各自通讯协议的实现,所以即时通讯技术的核心在于它的传输协议 协议用来说明信息在网络上如何传输,如果有了统一的传输协议,那么应当可以实现各个IM之间的直接通讯,为了创建即时通讯的统一标准,目前已

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

iOS开发多线程篇—多线程简单介绍 一.进程和线程 1.什么是进程 进程是指在系统中正在运行的一个应用程序 每个进程之间是独立的,每个进程均运行在其专用且受保护的内存空间内 比如同时打开QQ.Xcode,系统就会分别启动2个进程 通过“活动监视器”可以查看Mac系统中所开启的进程 2.什么是线程 1个进程要想执行任务,必须得有线程(每1个进程至少要有1条线程) 线程是进程的基本执行单元,一个进程(程序)的所有任务都在线程中执行 比如使用酷狗播放音乐.使用迅雷下载电影,都需要在线程中执行 3.线程

iOS开发UI篇-UIWindow简单介绍

iOS开发UI篇—UIWindow简单介绍 一.简单介绍 UIWindow是一种特殊的UIView,通常在一个app中只会有一个UIWindow iOS程序启动完毕后,创建的第一个视图控件就是UIWindow,接着创建控制器的view,最后将控制器的view添加到UIWindow上,于是控制器的view就显示在屏幕上了 一个iOS程序之所以能显示到屏幕上,完全是因为它有UIWindow.也就说,没有UIWindow,就看不见任何UI界面 补充:UIWindow是创建的第一个视图控件(创建的第一个

iOS开发数据库篇—FMDB简单介绍

iOS开发数据库篇—FMDB简单介绍 一.简单说明 1.什么是FMDB FMDB是iOS平台的SQLite数据库框架 FMDB以OC的方式封装了SQLite的C语言API 2.FMDB的优点 使用起来更加面向对象,省去了很多麻烦.冗余的C语言代码 对比苹果自带的Core Data框架,更加轻量级和灵活 提供了多线程安全的数据库操作方法,有效地防止数据混乱 3.FMDB的github地址 https://github.com/ccgus/fmdb 二.核心类 FMDB有三个主要的类 (1)FMDa

文顶顶 iOS开发UI篇—Kvc简单介绍

ios开发UI篇—Kvc简单介绍 一.KVC简单介绍 KVC key valued coding 键值编码 KVC通过键值间接编码 补充: 与KVC相对的时KVO,即key valued observer 键值观察.监听某一个模型的属性,只要模型属性的值一变化就通知你. 二.使用KVC 1.KVC基本使用介绍 (1)代码示例: 新建一个命令行项目,用以演示KVC的用法 完成之后为项目添加一个Person类. 为Person类添加两个属性(name和age),注意这两个属性的类型. 1 #impo