利用webpack中的loader来打包css文件

loader介绍

  webpack本身不支持css,less,sass,js,image等相关资源的打包工作，它仅仅提供了一个基础的框架，在这个框架上借助于相关的loader才可以实现css,less,sass,js,image等相关资源的打包工作。

package.json

package.json特点

  package.json是Node.js的包管理文件，其在其中起到的作用类似于pom.xml在Maven中起到的作用。

  package.json中记录的主要信息为项目的配置信息（比如名称、版本、许可证等数据源）以及项目的各种依赖包管理模块信息。

  与Maven类似，在Maven项目中，每个项目的根目录中都有一个pom.xml，而同样的package.json也同样存在于每个Node.js项目的根目录中。

  package.json由npm init命令行指令自动生成，由npm install 模块名 --save-dev将所依赖的模块打入package.json中。

  当项目执行npm i（等价于npm install）时，其会依据package.json中的项目依赖模块信息自动的去Node.js仓库中下载所需依赖，同时在项目的根目录中生成一个node-modules项目Node.js依赖模块仓库，而我们所下载的Node.js依赖模块就存放在该本地仓库中。

package.json注意事项

不要对node-modules仓库打压缩包

  最后需要特别指出的是，在打项目压缩包时，千万不要将node-modules依赖仓库打入压缩包中，否则后果是惨痛的！

  如上面所示，上面的打包时间耗时将近1小时（实际1小时还不止），这还不算完，其占用的磁盘空间也是大的惊人，上面显示其压缩包压缩前是3.4G，压缩后的大小为996.2MB，也就是说，正因为如此，其庞大的体积一下子让我的C盘与E盘爆满了！

<