webpack 踩坑之对于打包的图片路径错误

一、什么是webpack？

    webpack是模块打包工具

二、webpack安装

        版本：4.6.0

npm install webpack --save-dev
npm install webpack-cli --save-dev

三、配置文件webpack.config.js

publiPath的默认地址为当前目录。

module.exports = {
    entry:{
  		main:"./main.js"
  	},
    output:{
  		path:path.join(__dirname,"./dist"),     //webpack打包后文件的输出目录
  	         publicpath:"./dist"         //引用资源的目录，公共路径
  		filename:"main.js"
    },

注意，此时/指的是根目录。也就是所在的盘。

四、index.html引入的文件

  引入的js、css文件为path路径中的文件。

五、对于webpack打包css、js、图片的路径问题

 此时，如果,js、css中有引入图片、字体等文件。资源的引用路径就会是publicPath+fillname。

 1.如果是绝对路径，图片路径就不会存在问题。（因为路径是绝对问题）

     publicPath：“/vue-SPA/dist/”。/是指根目录（盘）。

    在css、js中资源的引用都不会有问题。（一定会找到资源）

        

2.如果publicPath是相对路径，图片路径就会存在问题。（因为路径是绝对问题）

 publicPath：“/vue-SPA/dist/设置。此时的图片引用地址为./dist/filename.jpg。。由于是相对地址，引用图片的地址 发生了错误。