webpack 基础

1，什么是webpack？

      webpack是近期最火的一款模块加载器兼打包工具，它的目的就是把有依赖关系的各种文件打包成一系列的静态资源。 其简洁的说就是 js模块打包器 把所有依赖2的文件生成一个图，打包成文件。

2，它有那些优势？

（1）webpack是以commonJs的形式来写脚本的，对AMD/CMD的支持比较全面，方便代码迁移。

（2）支持很多模块加载器的调用，使模块加载器灵活定制。

（3）开发比较方便。

3，优化有哪些？

       webpack 的有化有 ： css优化压缩  、图片优化、js优化压缩、detool与sourceMap、异步加载、tree shaking（摇树）、代码分包...等等。

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

    对于浏览器来说，加载的资源越少，响应的速度也就越快，所以有时候我们为了优化浏览器的性能，会尽可能的将资源合并到一个主文件app.js里面。但是这导致的很大的缺点：当你的项目十分庞大的时候，不同的页面不能做到按需加载，而是将所有的资源一并加载，耗费时间长，性能降低。 会导致依赖库之间关系的混乱，特别是大型项目时，会变得难以维护和跟踪。

5，安装部骤

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

6，通过全局安装webpack

      在c盘下会生成node_modules文件夹中会包含webpack，此时此刻我们可以使用webpack命令；在常规项目中把webpack依赖加入到package.json

    加入命令：    npm init npm install webpack --save

7，配置webpack

每个目录下都必须有一个webpack.config.js，

   具体用法推荐去看   流浪的诗人   webpack入门全面理解和运用plugins和loader，

8，利用webpack实现在页面上合理使用打包过后的js文件和图片

可以参考下图：

    
    


    

    
    





index.js代码
require('./index.css');


index.css样式 
#content{
    width:121px;
    height:140px;
    background-color: red;
}