您的位置：首页 > Web前端

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

2017-10-18 10:40 621 查看

学习前端模块化的第一步，安装模块化工具。

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[/code] 
2)命令行指定

npm --registry https://registry.npm.taobao.org info underscore


3)编辑 npmc文件，在该文件中加入:

registry = https://registry.npm.taobao.org[/code] 
3.安装gulp

1)在终端输入npm install gulp -g

2) 安装完成后，同样输入gulp -v输出相应的版本号，则说明安装成功。

4.安装webpack

Webpack可以使用npm安装，新建一个空的练习文件夹（此处命名为webpack test project），在终端中转到该文件夹后执行下述指令就可以完成安装。

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


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

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

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

npm init




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



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



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}


填写路径的时候不用添加{}

结果如下：



可以看出webpack同时编译了main.js
 和hellow.js
。

打开index.html,可以看到如下结果   ：



大功告成！！~

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 模块化前端终端 nodejs webpack

相关文章推荐

新的分享

章节导航