webpack打包图片资源说明

npm run build打包后，一些图是转为base64了，一些是在static/img文件夹。

路径问题：

1、直接引用修改方法：

首先修改config目录下的index.js文件，将其中build的配置项assetsPublicPath进行修改，改为assetsPublicPath: './',目的是将资源文件的引入路径，改为相对地址（相对index.html）

 

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    productionSourceMap: true,    
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],    
    bundleAnalyzerReport: process.env.npm_config_report
  },
  dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      // 代理所有的以 /api 开头的请求到 http://172.69.8.48:8080
      '/api': {
        target: 'http://172.69.8.48:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },    
    cssSourceMap: false
  }
}
assetsPublicPath: './',
    productionSourceMap: true,    
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],    
    bundleAnalyzerReport: process.env.npm_config_report
  },
  dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      // 代理所有的以 /api 开头的请求到 http://172.69.8.48:8080
      '/api': {
        target: 'http://172.69.8.48:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },    
    cssSourceMap: false
  }
}

 

 

 

 

 

2、css样式引用修改方法：

此时的修改方法是，修改build文件夹中的utils.js文件，修改如下这一行：

 

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }publicPath:'../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }