前端模块化之模块化工具gulp和webpack的安装。

学习前端模块化的第一步,安装模块化工具。1.下载安装node 按照安装向导一步步完成即可。
1)安装完成后,在终端输入node -v
回车打印出nodejs的版本号,说明nodejs安装成功。
2)在终端输入npm -v
回车打印出npm的版本号,说明npm也安装成功(node安装包中已集成了npm,因此在安装nodejs的同时也安装了npm)。
2.设置npm
了解到https://www.npmjs.com在国内访问不稳定,所以我使用的是国内镜向站点https://npm.taobao.org
具体方法:
1) 通过config命令
npm config set registry https://registry.npm.taobao.org
2)命令行指定
npm --registry https://registry.npm.taobao.org info underscore
3)编辑 npmrc文件,在该文件中加入:
registry = https://registry.npm.taobao.org
3.安装gulp
1)在终端输入
npm install gulp -g
2)安装完成后,同样输入gulp -v输出相应的版本号,则说明安装成功。
4.安装webpackWebpack可以使用npm安装,新建一个空的练习文件夹(此处命名为webpack test project),在终端中转到该文件夹后执行下述指令就可以完成安装。

全局安装
npm install -g webpack
安装到你的项目目录
npm install --save-dev webpack

这里我有一个疑问,为什么全局安装之后,还需要在项目中再次安装?

正式使用webpack之前还需要准备:

1)在上述练习文件夹中创建一个package.json文件,这是一个标准的npm说明文件,里面蕴含了丰富的信息,包括当前项目的依赖模块,自定义的脚本任务等等。在终端中使用npm init命令可以自动创建这个package.json文件
init npm

图片.png

因为之前看到教程说是直接回车就好,但是由于文件夹名称有空格,项目名称需要自己命名。这里我命名为webpacktest,后面的直接回车即可。
图片.png

2)package.json文件已经就绪,我们在本项目中安装Webpack作为依赖包。
npm install --save-dev webpack
3)回到之前的空文件夹,并在里面创建两个文件夹,app文件夹和public文件夹,app文件夹用来存放原始数据和我们将写的JavaScript模块,public文件夹用来存放之后供浏览器读取的文件(包括使用webpack打包生成的js文件以及一个index.html文件)。接下来我们再创建三个文件:

  • index.html –放在public文件夹中;

  • hellow.js– 放在app文件夹中;

  • main.js– 放在app文件夹中;

图片.png

4)在index.html文件中写入最基础的html代码,它在这里目的在于引入打包后的js文件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack test Project</title>
  </head>
  <body>
    <div id='root'>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

在hellow.js中定义一个返回包含问候信息的html元素的函数,并依据CommonJS规范导出这个函数为一个模块:

module.exports = function() {
  var hello = document.createElement('div');
  hello.textContent = "Hello World!";
  return hello;
};

main.js文件中我们写入下述代码,用以把Greeter模块返回的节点插入页面。

const Hello = require('./hellow.js');
document.querySelector("#root").appendChild(Hello());

正式使用Webpack

webpack可以在终端中使用,在基本的使用方法如下:
{extry file}出填写入口文件的路径,本文中就是上述main.js的路径,
 {destination for bundled file}处填写打包文件的存放路径 
webpack {entry file} {destination for bundled file}

填写路径的时候不用添加{}
结果如下:

图片.png

可以看出webpack同时编译了main.jshellow.js
打开index.html,可以看到如下结果 :
这里写图片描述
大功告成!!~

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

推荐阅读更多精彩内容