webpack基础入门(四)

加载图片

试试加载图片,首先第一件事情就是安装对应的loader。它会将样式引用到的图片转为模块来处理。

npm install url-loader  --save-dev

当然你也可以在package.json添加依赖，然后再npm install 一样的效果。

现在去我们的项目目录中添加img文件夹，添加两张图片，一张大图jpg,一张小图png

然后在webpack.config.js中添加

在html中添加：

<h1 id="app"></h1>
<img src="img/good1.png" />
<div id="qwe"></div>
<div id="asd"></div>

在style.css中添加

#qwe{
background-image: url(img/good1.png);
width: 300px;
height: 300px;
}
#asd{
background-image: url(img/red.png);
width: 300px;
height: 300px;

}

继续运行webpack如果正确的话，打开浏览器，可以看到正确的图片显示。

如果不正确，先运行 npm install file-loader -D,再进行尝试

打开浏览器的调试工具，看到背景图片已经被转化成了base64的编码

  热部署

当项目逐渐变大，webpack的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色

webpack --progress --colors

热部署不需要每次手动刷新浏览器，webpack-dev-server是热部署的好方法。

它将在localhost:8080启动一个express静态资源web服务器，并且会一监听模式自动运行webpack，在浏览器打开localhost:8080/或者http://localhost:8080/webpack-dev-server/可以浏览项目中的页面和编译后的资源输出，并且通过一个socket.io服务实时监听它们的变化并自动刷新页面。

#安装

cnpm install webpack-dev-server  -g

#运行

webpack-dev-server