首页
前端开发
Webpack
Webpack打包后页面图片路径错误的解决方案

Webpack打包后页面图片路径错误的解决方案

0 次浏览 0 条评论
pdf
pdf

Webpack 打包后的图片路径出错，真挺常见的，尤其是你想直接在浏览器里打开index.html的时候。图片不显示，多半是publicPath没设对，路径走偏了。

Webpack 的publicPath其实就是告诉浏览器：‘嘿，静态资源去哪找！’如果你设置成'/src/'，结果路径就成了/src/images/xxx.png，而你页面根本没这个路径，就挂了。

开发环境下，路径设灵活点问题不大，比如：

output: {
  publicPath: '/src/'
}

这样在本地跑没啥事。但到了生产环境，建议你把publicPath设成'/'，保持统一，比如：

output: {
  publicPath: '/'
}

嗯，说到底，不同环境得用不同配置。

还有啊，loader也得配好。像图片文件，建议你用url-loader，限制一下大小还能转 base64，小图更高效：

module: {
  loaders: [
    {
      test: /\.(png|jpg)$/,
      loader: 'url-loader',
      options: {
        limit: 8192,
        name: 'images/[hash:8].[name].[ext]',
        publicPath: '/'
      }
    }
  ]
}

记住一点，路径统一 + loader 设置正确，基本就不会出问题。

如果你还想搞清楚publicPath背后的逻辑，可以看看Webpack 中 publicPath 路径详解；想系统配置 Webpack，也推荐Webpack 配置文件指南。

哦对了，如果你要切换环境配置，别忘了可以写成函数根据NODE_ENV来判断，那样就更灵活啦。

pdf 文件大小：51.66KB