javascript - 使用webpack打包工具,如何在打包后使得所有路径使用相对路径?

 绝望的贵族_500 发布于 2022-11-12 22:21

本人的项目是 Android、iOS app内部集成的H5页面,所有的路径需要相对路径,比如引用图片、引用js、引用css;

当前项目使用的多入口点,利用html-webpack-plugin自动注入。
大概配置如下:

var path = require('path')
var webpack = require('webpack')
var glob = require('glob'); 
var entries = getEntry('./src/module/**/*.js');
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = {
  //entry: './src/main.js',
  entry: entries,          
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/',  
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue',
        options: {
          loaders: {
            'scss': 'vue-style-loader!css-loader!sass-loader'
          }
        }
      },
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file',
        options: {
          name: 'assets/image/[name].[ext]?[hash]'
        }
      },
      { 
        test: /\.scss$/,
        loader:  ['style', 'css', 'resolve-url', 'sass']
      },
      {
        test:/\.css$/,
        loader:['style', 'css']
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue',
      'pubscss':path.resolve(__dirname, 'src/assets/scss'),
      'pubimg': path.resolve(__dirname, 'src/assets/image/public')
    }
  },
  devServer: {
    contentBase: path.join(__dirname, "dist/"),
    historyApiFallback: true,
    noInfo: true
  },
  devtool: '#eval-source-map',
  plugins:[]
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}


//获取多页面的路径
function getEntry(globPath) {
  var entries = {},
      basename, tmp, pathname;

  glob.sync(globPath).forEach(function (entry) {
    basename = path.basename(entry, path.extname(entry));  //basename 为:detail
    tmp = entry.split('/').splice(-3);
    //pathname = tmp.splice(0, 1) + '\/' + basename; // 正确输出js和html的路径
    pathname = tmp[0] + '\/' + tmp[1] + '\/' + basename; // modify by ls正确输出js和html的路径
    entries[pathname] = entry;
  });
  console.log(entries);
  return entries;
}



//add by ls 自动注入
var pages = getEntry('./src/module/**/*.html');
for (var pathname in pages) {
  // 配置生成的html文件,定义路径等
  var conf = {
    filename: pathname + '.html', 
    template: pages[pathname],    
    chunks: [pathname, 'vendor', 'manifest'], 
    inject: true             
  };

  module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

当前生成的 html 中js 的路径为:

css中引用的图片路径为:

h1 {
    background: transparent url(/assets/image/jingbao.png?1e0b744364551fe3f9ee92bf57bc9880) repeat scroll 0 0;
}

请问,如何能够生成相对路径的 ?? 改如何配置 webpack??

1 个回答
  • 通过修改webpack配置里的output.publicPath为相对路径即可达到你的目的。

    你现在的publicPath是'/',你先改成'./'来打包,这时候浏览器应该会报错的(路径出错),然后你就看着办来改相对路径呗。

    详情可参考《webpack多页应用架构系列(二):webpack配置常用部分有哪些?》

    2022-11-12 22:21 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有