webpack入门(二):对 webpack 有一个简单的认识

如果你安装好了node开发环境,也学会了npm操作,那么下面就可以学习webpack了;


webpack 就是一个工具,什么样的工具呢?

我们一步步的来看:

      首先我们打开 Gitbash , 这是一个命令行工具,你下载node的时候,不仅仅会下载node环境,

      还会一并下载 npm 和  Gitbash;


      我们打开Gitbash( 或者其它的也行):就是这个样子的;

      


      我们先转到 F盘,因为我要在F盘中创建我的项目,那么命令就是: cd  f :  

     


      现在我们已经在 F 盘了,下面我创建一个文件夹,名字叫 webpack-test1,使用的命令就是:

         mkdir webpack-test1

       


       我们先查看一下当前 f 盘下面有多少个文件夹以及我们刚刚创建的文件夹,命令  ls  

       


       好了,我们已经新建了一个webpack-test1文件夹,下面开始下载 webpack ,我这里

      采用全局安装,也就是下载的 webpack 工具每个项目都可以使用,不是任何一个项目

      所单独拥有的;  命令: npm install webpack@3.0.0 -g    ,就不演示过程了

      (这个命令是下载指定的版本3.0.0  );


        现在我们打开我们的项目目录,然后创建index.html 和abc.js:

        

        


        创建完成之后,我们使用webpack进行处理:

              

         webpack abc.js  obj.js  的意思是把abc.js文件打包成最后的obj.js,

         我们最后引用的就是这个obj.js文件;

        访问index.html 正常输出 “ abc ”,

         

        现在可以看到 webpack就是这样一个工具,帮助我们更好的进行开发和优化;

        并且  webpack是一个仅仅处理  js 文件的工具,那么css  图片等其他文件怎么处理,

        webpack可以通过loader进行转换然后处理我们的资源,后面会说明,


        本篇简单的对webpack有了一个印象,下一篇会通过一个例子,加深印象并且学习新的东西。。。

      

     

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值