webpack入门（二）：对 webpack 有一个简单的认识-蒲公英云

webpack入门（二）：对 webpack 有一个简单的认识

冷不防 2022-05-30 12:12 226阅读 0赞

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

webpack 就是一个工具，什么样的工具呢？

我们一步步的来看：

  首先我们打开 Gitbash , 这是一个命令行工具，你下载node的时候,不仅仅会下载node环境，
  还会一并下载 npm 和  Gitbash;
  我们打开Gitbash( 或者其它的也行)：就是这个样子的；
  ![70][]
  我们先转到 F盘，因为我要在F盘中创建我的项目，那么命令就是： cd  f :  
 ![70 1][]
  现在我们已经在 F 盘了，下面我创建一个文件夹，名字叫 webpack-test1,使用的命令就是：
     mkdir webpack-test1
   ![70 2][]
   我们先查看一下当前 f 盘下面有多少个文件夹以及我们刚刚创建的文件夹，命令  ls  ：
   ![70 3][]
   好了，我们已经新建了一个webpack-test1文件夹，下面开始下载 webpack ,我这里
  采用全局安装，也就是下载的 webpack 工具每个项目都可以使用，不是任何一个项目
  所单独拥有的；  命令： npm install webpack@3.0.0 -g    ，就不演示过程了，
  (这个命令是下载指定的版本3.0.0  )；
    现在我们打开我们的项目目录，然后创建index.html 和abc.js：
    ![70 4][]
    ![70 5][]
    创建完成之后，我们使用webpack进行处理：
    ![70 6][]      
     webpack abc.js  obj.js  的意思是把abc.js文件打包成最后的obj.js,
     我们最后引用的就是这个obj.js文件；
    访问index.html 正常输出 “ abc ”，
    现在可以看到 webpack就是这样一个工具，帮助我们更好的进行开发和优化；
    并且  webpack是一个仅仅处理  js 文件的工具，那么css  图片等其他文件怎么处理，
    webpack可以通过loader进行转换然后处理我们的资源，后面会说明，
    本篇简单的对webpack有了一个印象，下一篇会通过一个例子，加深印象并且学习新的东西。。。