webpack入门和实战(一)--webpack配置及技巧

一、全面理解webpack

1、什么是 webpack？

       webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理,它能有Grunt或Gulp所有基本功能。webpack的官网是 https://webpack.github.io/ ，文档地址是https://webpack.github.io/docs，官网对webpack的定义是MODULE BUNDLER，他的目的就是把有依赖关系的各种文件打包成一系列的静态资源。 请看下图：

2、webpack 的优势

        其优势主要可以归类为如下几个：

1. webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
2. 支持很多模块加载器的调用，可以使模块加载器灵活定制，比如babel-loader加载器，该加载器能使我们使用ES6的语法来编写代码;less-loader加载器，可以将less编译成css文件；
3. 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
4. 可以通过配置打包成多个文件，有效的利用浏览器的缓存功能提升性能。

3、wepback它的目标是是什么？

webpack它能将依赖的模块转化成可以代表这些包的静态文件

• 将依赖的模块分片化，并且按需加载
• 解决大型项目初始化加载慢的问题
• 每一个静态文件都可以看成一个模块
• 可以整合第三方库
• 能够在大型项目中运用
• 可以自定义切割模块的方式

• 4、webpack较之其他类似工具有什么不同？

  有同步和异步两种不同的加载方式
  Loader,加载器可以将其他资源整合到JS文件中，通过这种方式，可以讲所有的源文件形成一个模块
  优秀的语法分析能力，支持 CommonJs AMD 规范
  有丰富的开源插件库，可以根据自己的需求自定义webpack的配置

  5、webpack为什么要将所有资源放在一个文件里面？

  我们知道，对于浏览器来说，加载的资源越少，响应的速度也就越快，所以有时候我们为了优化浏览器的性能，会尽可能的将资源合并到一个主文件app.js里面。但是这导致的很大的缺点：

  当你的项目十分庞大的时候，不同的页面不能做到按需加载，而是将所有的资源一并加载，耗费时间长，性能降低。
  会导致依赖库之间关系的混乱，特别是大型项目时，会变得难以维护和跟踪。比如:哪些文件是需要A模块加载完后才能执行的？哪些页面会受到多个样式表同时影响的？ 等许多问题。
  而webpack可以很好的解决以上缺点,因为它是一个十分聪明的模块打包系统，当你正确配置后，它会比你想象中的更强大，更优秀。
  二、开启wbpack之旅

• 安装步骤如下：

  1、生成package.json文件；

  先装好node和npm，因为webpack是一个基于node的项目。然后首先我们需要在根目录下生成package.json文件，需要进入项目文件内根目录下执行如下命令：npm init

• 

• 如上通过一问一答的方式后会在根目录下生成package.json文件，如下所示：

• 

• 2 . 通过全局安装webpack

  执行命令如下：npm install -g webpack 如下所示：

• 

• 在c盘下会生成node_modules文件夹中会包含webpack，此时此刻我们可以使用webpack命令了；

  在常规项目中把webpack依赖加入到package.json

  npm init npm install webpack --save

  更详尽的安装方法个可以参