webpack--记录--基础二(主要记录webpack打包处理路径问题)

上一篇文章说了webpack打包时候将css文件是直接打包到js中，但是项目中我们并不想这么做，需要单独抽离出来

1、抽离css文件到单独文件

使用 mini-css-extract-plugin 可以将css抽离到单独目录


npm i mini-css-extract-plugin -D

在配置文件中引入

  const MiniCssExtractPlugin = require('mini-css-extract-plugin')

在配置文件中的plugins中使用，filename是将css文件打包到dist目录下的指定文件下

打包之后的位置

并且和js一样，打包之后都会自动引入html文件中

2、webpack处理图片

项目中调用图片时候的方法是使用import导入使用，我这里只是写了一个例子

在没有使用loader时候打包是会报错的，因为不能解析图片

webpack 处理图片也需要loader去处理，可以使用file-loader或者url-loader去处理

url-loader是依赖file-loader的，所以在下载的时候就会自动下载file-loader

这两个区别不是很大，在使用中最大的区别的就是url-loader可以将图片转成base64，可以减少请求

从上面的图片可以看出，这两个loader在配置中只多了一个limit属性，limit的值是你想将最大多大的图片转成base64的，超过这个大小就不可以再转base64，不然到时候在浏览器中看到的就是很长的一段儿字符串，我这里设置的是1*1024的，就是1kb

例如：下面的图片是300多kb，我将limit的值修改到了 400*1024 ，所以这里就是使用的base64调用，但是这个图片太大，所以这么看体验不好，所以在工作中还是根据实际情况定义limit大小。

注意：
打包成base64的图片不会在打包到指定文件夹内

这是时候页面就可以正常浏览图片了，可以看一下浏览器中的img

当把limit改小之后，img标签中就是使用路径调用的

可以看到只是因为limit大小不同

3、图片使用背景图片打包之后路径错误的问题

先看一下在开发时候的文件路径

在配置文件中，图片打包路径的配置

css和img打包之后在dist目录中的位置，和上面css引入img的背景图片被打包之后的样子，可以看到上面是使用相对路径引入，而打包之后的却没有了“…/”，这是被webpack给处理，那这样的路径引入在我们把包放到生产环境肯定是报错的，因为css文件下并没有assets这个目录

如何解决上面路径错误的问题呢？

使用 webpack有一个属性output.publicPath配置

官网的解释地址

我自己的理解就是，这里配置的路径是什么，在css中的背景图片路径处理中去掉相对路径之后得到结果，就在结果的前缀就加什么，如果不配置就是什么也不加

例如：我现在不配置publicPath看一下输出的路径

图一是浏览器渲染的，图二是开发中的代码，图三是打包之后的代码，可以看到打包之后把“.”开头的相对路径给处理掉了

如果我现在配置publicPath之后看一下,
这里我将 publicPath配置成 “/init_webpack/dist/”，是因为我把打包之后的dist包放到了init_webpack这个目录下，可以适情况而定

从上面的图片中可以看出，配置publicPath之后打包之后的路径也变了，而且也可以正确的看到了背景