学习前端模块化的第一步，安装模块化工具。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 webpack3)回到之前的空文件夹，并在里面创建两个文件夹,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.js 和hellow.js。打开index.html,可以看到如下结果 ：
这里写图片描述
大功告成！！~
网友评论