加载图片
First of all ，我们需要安装对应的loader，它会将样式中引用到的图片转换为模块来进行处理，ok我们开始安装：
npm install url-loader --save-dev
当然也可以去 package.json 中添加依赖，然后 npm install 是一样的效果
现在我们去项目目录下创建一个img的文件夹，放两张图分别为png格式和jpg格式。
然后修改 webpack.package.js:
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" },
{ test: /\.(png|jpg)$/, loader: "url-loader?limit=8192" } // 添加到这！并且会按照文件大小, 或者转化为 base64, 或者单独作为文件
//在大小限制后可以加上&name=./[name].[ext]，会将我们的文件生成在设定的文件夹下。
]
接下来在index.html中添加：
<div id="pic1"></div>
<div id="pic2"></div>
然后在css中添加：
#pic1{
width: 300px;
height: 300px;
background-image: url(img/m.png);
}
#pic2{
width: 200px;
height: 200px;
background-image: url(img/shaizi.jpg);
}
继续运行webpack，如果正确无报错直接打开浏览器就可以看到图片，如果报错，运行如下命令：
npm install file-loader --save-dev
再次进行尝试！
现在我们打开浏览器的调试工具，可以看到小于8K的 背景图片 图片已经被转化成了base64的编码，而大于8k的图片则并没有转化（注意它的地址的变化！）。 直接使用img导入的图也并没有进行base64的转化。
热加载
当项目逐渐丰满健壮起来的时候，webpack的编译时间会变长，可以通过设置一些参数让编译输出的内容带有进度和颜色
webpack --progress --colors
- 最基本的启动webpack命令。
webpack
- 提供watch方法，实时进行打包更新。
webpack -w
- 对打包后的文件进行压缩
webpack -p
- 提供SourceMaps，方便调试
webpack -d
- 输出性能数据，可以看到每一步的耗时
webpack --profile
- 默认情况下 node_modules 下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块
webpack --display-modules
Tips
在编程过程中，你会不会觉得我们每次做一些修改都要反反复复去命令行里敲这个webpack很繁琐，所以webpack人性化的有一种监听的机制，下面介绍。
webpack 为我们提供了一个webpack --watch，他会启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的。
在我们执行该命令后，修改一下css样式表，刷新浏览器发现样式发生了我们预期要的变化，但是显然这个还要我们去手动刷新浏览器，这不是我想要的结果，所以使用webpack-dev-server会是一个更好的办法！
安装 npm install webpack -dev-server -g
运行 webpack -dev-server
