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

最新推荐文章于 2023-02-19 19:56:00 发布

i_will_be

最新推荐文章于 2023-02-19 19:56:00 发布

阅读量718

点赞数 1

分类专栏： javascript 文章标签：模块化前端终端 nodejs webpack

本文链接：https://blog.csdn.net/i_will_be/article/details/78270231

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

学习前端模块化的第一步，安装模块化工具。
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)编辑 npmc文件，在该文件中加入:
registry = https://registry.npm.taobao.org
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,可以看到如下结果：

大功告成！！~

i_will_be

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录