第二课：webpack配置醒目加载各种静态资源（图片，css预处理器） 上一节我们使用webpack来加载了.vue文件，这节课我们使用它加载各种静态资源，加载静态资源的方法和加载.vue文件的方法是相同的，即配置loader module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: '\.(gif|jpg|jpeg|png|svg)$', use: [ { loader: 'url-loader', options: { limit: 1024, name: '[name]-aaa.[ext]' } } ] } ] } css-loader只是帮我们处理了css文件，而css需要写到html文件中才能正常的起到作用，换言之css-loader只能处理外链的css样式，而内联样式和行内样式它无法处理，这是我们还需要配合使用style-loader来处理所有的css。也就是处理.css需要两个loader(css-loader、style-loader)。这两个loader如何书写呢？方法有两个： 方法1：使用use配置项替代loader配置项，use接收一个数组，数组中是多个loader url-loader可以把图片资源处理成base64编码的图片资源写入js文件，而不用生成一个新的图片文件。这种方式对于一些小的图片是比较适用的（比如小于1M的文件），可以减少http请求。但是比较大的图片就不适用了，因为处理之后的base64代码会非常多， 无形的增大js文件的体积。 所以在配置图片处理器的时候，我们向use数组中传入的是对象，因为该对象有个options配置项，可以为loader配置一些参数，例如上面的limit: 1024，告诉url-loader在处理图片时小于1024kb的图片进行base64，超过1024kb的不做处理。 url-loader其实是封装了一下file-loader，file-loader读取图片并且做一些简单的操作之后，将图片文件换一个名字然后再换一个地方将其存起来。而url-loader是判断一下这个文件如果小于1024kb的话，就把这个文件进行base64然后插入到js文件中去。 name用来指定输出的图片文件的名字，其中[name]表示原文件名，[ext]表示原文件的后缀 OK，现在我们去安装这些loader style-loader url-loader file-loader(安装file-loader是因为url-loader依赖于file-loader) 安装完这些loader之后我们就可以在代码中import进来图片资源了，现在我们在src目录下创建assets目录，该目录用来存放图片资源和样式资源。assets目录中继续创建两个目录images和styles images目录用来存放图片； styles目录用来存放样式； 我们在styles目录下创建一个test.css文件： body { color: blue; background-image: url('../images/bg.jpeg'); } 在images目录下放入一个图片，这里我放入的是bg.jpeg图片 接下来在入口文件index.js文件中去import进来test.css文件和bg.jpeg文件 import './assets/styles/test.css' import ‘./assets/images/bg.jpeg’ 神奇之处在于：test.css文件中依赖了bg.jpeg文件，webpack依然会帮我们打包bg.jpeg文件 css文件功能太有限，并且书写起来非常麻烦，所以我们可以使用css预处理器来解决这些问题，例如sass ，想使用它我们当然也需要配置loader