技术栈

主页 > 前端开发 >

webpack傻瓜式入门教程-07

技术栈 - 中国领先的IT技术门户

前言

  随着这么一两周走来,webpack的入门教程也到了最后一节课了,本节课将会教给大家如何打包编译图片,字体等静态资源。

本系列教程如下表所示:

图片打包

  1. jscss,模板文件目录统计创建一个assets文件目录,然后随意放入一张图片。

  2. 将css文件中的元素,设置一个背景图,如下所示:

#container{
  background: url("../../assets/bg.jpg");
}
  1. 运行编译webpack
报错:

很不幸,报错了,但是这里告诉我们缺少一个对图片文件处理的loader。

  1. 安装file-loader和配置webpack.config.js
{
  test: /.(png|jpg|gif|jpeg|svg)$/,
  loaders: ["file-loader"]
}
  1. 运行webpack编译看看

我们可以看到这次我们编译并没有报错,但是我们打开页面看看效果呢!

报错:

找不到我们的图片文件,这是由于路径问题所导致的,那么我们怎么规避这种问题呢?很简单,在webpack的配置文件中配置一下就可以了。如下所示:

output: {
        path: path.resolve(__dirname, "dist"),
        publicPath:  "http://localhost:8888/webpack-demo/dist/",
        filename: "js/[name]/[name].js"
    }

运行一下先看看效果:

解析:

大家可以看到图片出来了,为什么呢?
因为在webpack的配置文件中,我们配置了一个publicPath,这个是做什么的呢,这个东西是指定了咱们文件资源的路径相当于,所以只要配置了这个,那么需要的一切静态资源文件,都会以这个为根路径来查找,所以咱们最终找到了这个图片。关于字体等用法,大家依葫芦画瓢,相信你们自己可以的,加油!

后言

webpack的教程到这里就暂且告一段落,若我后面继续深入webpack或者有什么新的心的,会继续写文分享给大家的,希望可以陪着大家一起成长,至今为止从0开始自学前端已经差不多13个月了,从一边工作一边学习中收获了很多,学习了很多,2018,对自己说加油!

责任编辑:admin  二维码分享:
本文标签: webpack报错js图片编译loader