Question

在我的react js应用程序中，我想在 body 上添加背景图片。当我在开发模式下工作但投入生产时，它工作正常它不起作用。
进行生产时，我使用的是dist单独的文件夹，可能会造成某些路径问题。
在这里我的scss

body {
    font-family: Helvetica,Arial,sans-serif;
    font-size: $m-size;
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    background-image: url(/images/bg4.png);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: top; 
    background-size:cover;
}

我的 webpack.config

module.exports = {
    entry:{
      vendor: VENDOR_LIBS,
      main: './src/app.js',
    },
  output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].bundle.js',
        chunkFilename: '[name].bundle.js',
        publicPath: '/',
  },
  devtool: 'source-map',  
  module: {
    rules: [

      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      { test: /\.bundle\.js$/, use: { loader: 'bundle-loader', options: {lazy: true} } },
      {
        test: /\.s?css$/,
        use: [
            MiniCssExtractPlugin.loader,
            {
                loader: 'css-loader?url=false',
                options: {
                    sourceMap: true,
                }
            },
            {
                loader: 'sass-loader',
                options: {
                    sourceMap: true
                }
            }

        ]
    },{
        test: /\.(gif|svg|jpg|png|ttf|eot|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        loader: "file-loader?name=[name].[ext]",
    }
    ]
  },
  plugins: [
    new CleanWebpackPlugin('dist', {} ),
    new MiniCssExtractPlugin({
      filename: 'style.[contenthash].css',
    }),
    new HtmlWebpackPlugin({
      inject: true,
      hash: true,
      template: './src/index.html',
      filename: 'index.html',
      favicon: './public/images/fav.ico'
    }),
    new WebpackMd5Hash(),
    new webpack.DefinePlugin({
        'process.env': {
          'NODE_ENV': JSON.stringify('production')
        }
      }),

  ],
  optimization: {
    splitChunks: {
        cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
                    name: 'vendor',
          chunks: 'all',
          minChunks: 2
        },
      }
    },
    runtimeChunk: true,
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true,
        uglifyOptions: {
          compress: {
            inline: false
          }
        }
      }),
      new OptimizeCSSAssetsPlugin({})
    ],
  },
};

webpack将其他图像生成到 base64 中，但不适用于该图像。它在dist文件夹中不可用。

任何人都可以帮助我，我搜索了很多问题，但无法解决。
我不希望任何外部链接加载图片。

Answer 1

在生产中，您当前的目录将更改为/dist/index.html，这就是为什么您用于开发/images/bg4.png的路径找不到文件的原因。

解决方案是在构建过程中将静态图像文件（如背景）复制到/dist文件夹中。

假设您的项目目录类似于以下内容：

...
/images/bg4.png
package.json

然后将这些命令添加到您的webpack构建脚本中，以将图像复制到生产目录/dist中。

// in package.json
"scripts": {
    ...
    "build": "...your webpack build commands... && cp -a images\\. dist\\images",
    ...
},

您的新文件目录如下

/dist/...your index.html, bundles, etc...
     /images/bg4.png
/images/bg4.png
package.json

，您的图像路径现在应该可以找到图像文件。

无法在reactjs中使用webpack 4将背景图像加载到身体上

1 个答案: