加载图片

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中添加：

![](img/m.png)
<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

1. 最基本的启动webpack命令。

webpack

2. 提供watch方法，实时进行打包更新。

webpack -w

3. 对打包后的文件进行压缩

webpack -p

4. 提供SourceMaps，方便调试

webpack -d

5. 输出性能数据，可以看到每一步的耗时

webpack --profile

6. 默认情况下 node_modules 下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块

webpack --display-modules

Tips

在编程过程中，你会不会觉得我们每次做一些修改都要反反复复去命令行里敲这个webpack很繁琐，所以webpack人性化的有一种监听的机制，下面介绍。

webpack 为我们提供了一个webpack --watch，他会启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的。

在我们执行该命令后，修改一下css样式表，刷新浏览器发现样式发生了我们预期要的变化，但是显然这个还要我们去手动刷新浏览器，这不是我想要的结果，所以使用webpack-dev-server会是一个更好的办法！

安装  npm install webpack -dev-server -g

运行  webpack -dev-server