Webpack初体验（二）--添加CSS样式、图片和第三方库

==>添加css文件：

1.安装loader插件：(css-loader会遍历css文件，找到所有的url(...)并且处理；style-loader会把所有的样式插入到你页面的一个style tag中)

cnpm install css-loader --save-dev

cnpm install style-loader --save-dev

2.在webpack.config.js配置loader:(loaders的书写方式，test里面包含一个正则，包含需要匹配的文件，loaders是一个数组，包含要处理这些程序的loaders，这里我们用了css和style，注意loaders的处理顺序是从右到左的，这里就是先运行css-loader然后是style-loader.)

注：开始把loaders写错写成loader，导致cmd语法报错

3.新建一个css文件，并在入口文件index.js引用它:

(注：记得把css文件放在app这个文件夹里面！)

新建main.css文件：

index.js文件引用：

4.cmd运行webpack，刷新页面即能显示效果

==>添加sass文件：

1.安装loader插件：

cnpm install sass-loader --save-dev

开始装完-sass-loader插件之后，运行webpack报错，根据报错，后再安装相关模块:cnpm install node-sass --save-dev即解决问题

2.在webpack.config.js配置loader:

3.添加两个sass文件，并在入口文件index.js引用它:（注：都放在app根目录下）

4.cmd运行webpack，刷新页面即能显示效果

==>处理图片和其他静态文件：

1.安装url-loader插件：(这个和其他一样，也许你也已经会玩了。安装loader，处理文件。诸如图片，字体等等，不过有个神奇的地方它可以根据你的需求将一些图片自动转成base64编码的，为你减轻很多的网络请求。)

cnpm install url-loader --save-dev

2.在webpack.config.js配置:

3.在app下新建一个imgs文件，并在scss中添加如下内容:

4.cmd运行webpack，刷新页面即能显示效果

/*********过程遇到的报错情况：*********/

引入的图片格式为jpeg，运行webpack报错内容，如上图所示 报错内容如上图所示，后运行cnpm install file-loader --save-dev即解决问题

==>添加第三库：

有的时候还想来点jquery，moment，undersocre之类的库，webpack可以非常容易的做到这一点，有谣言说Bower即将停止开发了, 作者推荐都使用npm来管理依赖。那么我们现在安装在我们的app中添加jquery和moment的支持。

1.安装jquery和moment库：

cnpm install jquery --save-dev

cnpm install moment --save-dev

2.在js中引用：

3.cmd运行webpack，刷新页面即能显示效果：