Question

我正在使用webpack-dev-server ^ 2.5.1运行webpack 3，当我输入带有多个/的URL的路径时，浏览器会查找错误的目录以找到包含我所有资产的公共文件夹在里面。例如，当我转到localhost：8080 / level1 / level2时，我得到了一个404 for localhost：8080 / level1 / styles / style.css，因为那里不存在。它应该只在localhost：8080 / styles / style.css中查找。如何确保始终以正确的路径搜索我的公用文件夹？

无论路径如何，我的transformed.js都能正确显示，但我公共文件夹中的静态资源却没有。

这是我的webpack配置文件。

var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPLuginConfig = new HTMLWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: __dirname + '/app/index.js',

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  output: {
    filename: 'scripts/transformed.js',
    path: __dirname + '/build',
    publicPath: '/'
  },


  plugins: [HTMLWebpackPLuginConfig],

  devServer: {
    contentBase: './public',
    compress: true,
    historyApiFallback: true
  }
};

我的server.js使用Express也会发生这种情况，除了我将其配置为而不是返回404，它返回index.html。这是我的配置：

const express = require('express');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();

app.use(express.static(__dirname + '/build'));
app.use(express.static(__dirname + '/public'));

app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'build/index.html'))
});

app.listen(port);
console.log("Server started");

Answer 1

答案实际上不是在webpack配置中，而是在我的index.html中。我必须根据我的html标题中包含的每个静态资源中的路径，这意味着我必须在每个静态资产的前面添加一个'/'。

例如，我有<link rel="stylesheet" href="styles/style.css">，但为了解决问题，我做了<link rel="stylesheet" href="/styles/style.css">。

Webpack 3静态文件未在复杂路径中加载（多个/的）

1 个答案: