javascript - webpack打包文件资源问题

问题描述

问 题

使用webpack打包工具，将图片资源文件打包完之后发现一个问题。
在打包文件bundle.js中

我的图片引用的是相对路径。而我上线的项目入口html和资源文件是分开的。请问有什么方法在生产环境中打包的时候直接将引用图片的相对位置改为我设置的绝对位置。

看了下别人的方案，有的说修改webpack.config.js中的output。

我给publicPath设置了位置，但是我查看了下bundle.js中图片的引用位置，还是相对的。。。。。求解

const { resolve } = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');

module.exports = {
  entry: [
    './index.js'
  ],
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  context: resolve(__dirname, 'src'),
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'babel-loader',
        ],
        exclude: /node_modules/
      },
      {
        test:/\.(png|gif|jpg|jpeg|bmp)$/i,
        use:[
          'url-loader?limit=8192&name=images/[hash:8].[name].[ext]',//限制大小8kb
          "file-loader?name=images/[hash:8].[name].[ext]"
        ],
      },
      {
        test:/\.(png|woff|woff2|svg|ttf|eot)($|\?)/i,
        use:[
          'url-loader?limit=8192&name=images/[hash:8].[name].[ext]',//限制大小小于8kb
          "file-loader?name=images/[hash:8].[name].[ext]"
        ],
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
        ],
      },
      {
        test: /\.scss$/,
        include:resolve(__dirname, 'src'),
        loaders: [
          'style-loader',
          'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[hash:base64:8]',
          'postcss-loader',
        ]
      },
    ],
  },

  plugins: [
    // webpack 内置的 banner-plugin
    new webpack.BannerPlugin("Copyright by [e-mail]"),
    // html 模板插件
    new HtmlWebpackPlugin({
        template: __dirname + '/index.html'
    }),
    new webpack.LoaderOptionsPlugin({
        options: {
            postcss: function(){
                return [
                    require("autoprefixer")({   //通过这个插件，能够将CSS3的后缀自动添加上。
                        browsers: ['ie>=8','>1% in CN']
                    })
                ]
            }
        }
    })
  ],
};

解决方案

你把css不要打包到bundle.js中，单独抽取成css文件试试看里面的路径看，然后我看你贴出来的webpack中的publicPath还是/。我本地的测试的效果如下。

这篇关于javascript - webpack打包文件资源问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！