webpack基础知识

1: 如何全局安装一个 node 应用?

npm install -g xxx
npm===>node package manager

题目2: package.json 有什么作用?

配合npm使用,用来定义模块包,主要包括以下几点:

  • 定义模块包的依赖管理[devDependencies/dependencies]、
  • 定义包的基本描述信息[description、name、version等]
  • 定义包的使用方式[npm scripts]
  • 定义包的主程序入口模块标示[main]
  • 定义包的可执行文件地址[bin]
  • 定义包的bug、people、issue、license等其他信息

题目3: npm install --save app 与 npm install --save-dev app有什么区别?

相同点:都会在项目的node_modules目录下安装app

  • --save 将产品运行时(或生产环境)需要的依赖模块添加到 package.json 的 dependencies 中,在发布后还需要继续使用,否则就运行不了。
  • --save-dev 将产品的开发环境需要的依赖模块添加到 package.json 的 devDependencies 中,只在开发时才用到,发布后用不到它。

题目4: node_modules的查找路径是怎样的?

当require('xxx'),这个模块的xxx不是nodejs的内建模块(比如http、path、fs等),并且模块标识不以路径开始('../ , ./')。
则nodejs会不断的上一级目录递归查找node_modules目录,若一直未找到模块的xxx,则会抛错。

题目5: npm3与 npm2相比有什么改进?yarn和 npm 相比有什么优势? (选做题目)

npm3的对npm2优化点在于对于以字母序安装npm包的时候,优先安装在node_modules第一层级目录。这样做的好处是如果后续包有相关依赖则不需要重复安装。

题目6: webpack是什么?和其他同类型工具比有什么优势?

webpack是一种模块加载器兼打包工具,可以将各种资源;例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。

webpack

优势:

  • webpack以 commonJS 的形式来书写脚本滴,但对 AMD/CMD 的支持也很全面,很方便旧项目进行代码迁移。
  • 能被模块化的不仅仅是 JS 了,还有CSS、图片静态资源等等
  • 开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等。

题目7:npm script是什么?如何使用?

npm script 是package.json的一个属性,可以在scripts里面定义一些脚本命令,一般使用npm run xxx执行。如:

"script" : {
  "new": "mkdir test"           //新建一个test文件夹
}

执行命令:npm run new

题目8: 使用 webpack 替换 入门-任务15中模块化使用的 requriejs

webpack-demo
代码

题目9:gulp是什么?使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并]

gulp是一种基于流的前端构建工具,可以实现流程化的对代码进行检测,压缩,修改,打包等,而不必在每个步骤分别去处理文件,大大地减少了处理时间。

使用:
1、安装gulp

npm install -g gulp
npm install --save-dev gulp

2、项目根目录下新建一个gulpfile.js文件

var gulp = require('gulp');
var cssnano = require('gulp-cssnano');
var uglify = require('gulp-uglify');
var imgmin = require('gulp-imagemin');
var concat  = require('gulp-concat');
//当我们需要使用一个功能时,需要先在bash安装这个模块,
//然后在使用前require它,最后在gulp.task中定义这个功能。

//图片压缩
gulp.task('imagemin',function(){
  return gulp.src('图片地址')
  .pipe(imagemin())
  .pipe(gulp.dest('输出目录')
})


//css压缩合并
gulp.task('cssnano',function(){
  return gulp.src([css1地址,css2地址...])
  .pipe(cssnano())       //压缩
  .pipie(concat(新文件名))  //合并
  .pipe(gulp.dest(输出目录))
})


//js压缩合并
gulp.task('uglify',function(){
  return gulp.src([js1地址,js2地址,....])
  .pipe(uglify())      //压缩
  .pipie(concat(新文件名))   //合并
  .pipe(gulp.dest(输出目录))
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,012评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,628评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,653评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,485评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,574评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,590评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,596评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,340评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,794评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,102评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,276评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,940评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,583评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,201评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,441评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,173评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,136评论 2 352

推荐阅读更多精彩内容

  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,157评论 7 35
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,437评论 1 32
  • 最近在学习 Webpack,网上大多数入门教程都是基于 Webpack 1.x 版本的,我学习 Webpack 的...
    My_Oh_My阅读 8,176评论 40 247
  • 前言 众所周知目前比较火的工具就是gulp和webpack,但webpack和gulp却有所不同,本人两者的底层研...
    cduyzh阅读 1,366评论 0 13
  • 乐事包装营销案例分析 起初关注到乐事这个品牌的时候,是因为好几年前的薯片都是各种麻辣味,烧烤味,海鲜味等偏咸的重口...
    Chloe静学姐阅读 7,970评论 0 3