webpack 3.5安装打包小记

第一部分:概念

webpack是Javascript应用程序的模块打包器。他处理程序时,会递归的构建一个依赖关系图,包含应用程序需要的每个模块,然后打包成少量的bundle-通常只有一个,有浏览器加载。

四个核心概念:

入口(entry):        确定需要打包的内容,webpack的入口起点

输出(output):打包后的内容存放的位置

.filename 用于输出文件的文件名;

.path目标输出目录的绝对路径;

loader:两个目标1、识别出被对应的loader转换的那些文件。(test属性)

                             2、转换这些文件,添加到依赖图中,并最终添加到bundle中


插件(plugins):在打包模块的 “compilation” 和 “chunk” 生命周期执行操作和自定义功能。

想要使用一个插件就需要先用(require),然后添加到plugins数组中,多数插件可以通过选项(option)自定义

第二部分:安装

是全局安装还是本地项目安装好呢?

答:两种安装方式,到底该用哪一种,推荐本地安装。全局安装有一个版本管理问题, 如果我们的项目中,有的用webpack 1.0,有的用webpack2.0 ,而全局webpack 却只有一个命令,那就不好办了。本地安装却没有这个问题。If you are using npm scripts in your project, npm will try to look for webpack installation in your local modules for which this installation technique is useful. 当我们使用npm scripts 时,npm 会寻找本地安装的webpack ,这就解决版本问题, 每一个项目下都使用本地安装webpack , 互不影响。

全局安装的方法:

npm install webpack -g

卸载全局安装的webpack的方法:

npm uninstall webpack -g        (注意管理员权限 sudo去卸载)

安装了全局后,需要先卸载,然后在本地安装。

在本地安装之前先初始化下 npm init   然后本地安装   npm install webpack --save-dev  安装完后在命令行输入webpack 显示


提示不是有效的命令

但是在你的项目的根目录下有一个node_modules的文件生成。

下面来构建项目目录:


项目目录


main.js


Greeter.js

配置文件:

webpack.config.js

有了这个配置之后,再打包文件,只需在终端里运行webpack(非全局安装需使用node_modules/.bin/webpack)命令就可以了,这条命令会自动引用webpack.config.js文件中的配置选项,


打包成功!

没有全局安装的情况下,需要输入很长的命令来执行任务很繁琐,我们可以利用npm scripts的任务引导功能来配置快捷的打包任务


package.json

直接使用npm start 就可以了打包了

如果你想对应的脚本名称不是start ,  需要这样用npm run {script name},如npm run webpack,

webpack.config.js


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

推荐阅读更多精彩内容

  • 最近在学习 Webpack,网上大多数入门教程都是基于 Webpack 1.x 版本的,我学习 Webpack 的...
    My_Oh_My阅读 8,184评论 40 247
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,168评论 7 35
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,289评论 4 31
  • 很纳闷为何在简书上从没看见过关于高中的内容,让我这个身处高中的简书爱好者颇失望。 关注简书三个月以来,每...
    ooommmsss阅读 1,594评论 7 8
  • 世间的一切自然现象都是固有的,不管你是否认可我的观点。自然现象对人的生活、生命健康是有影响的,因此人们就不断研究自...
    觉悟道阅读 183评论 0 0