2017-07-17 3 views
1

私はWebPACKの-devのサーバー^ 2.5.1とWebPACKの3を実行している、としています私は、複数の/とURLのパス入力したときの、ブラウザを間違ったディレクトリを探して、私の資産がすべて入っている私のパブリックフォルダを探します。私はローカルホストに行くときたとえば、:8080 /レベル1 /レベル2、私はlocalhostの404を取得:8080 /レベル1 /スタイル/ style.cssに、それはそこに存在しないため。 localhost:8080/styles/style.cssだけを調べるべきです。パブリックフォルダが常に正しいパスで検索されるようにするにはどうすればよいですか?WebPACKの3つの静的ファイルは、複雑なパス(複数/にロードしないの)

私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 
    } 
}; 

これはまた、index.htmlをを返し、私はそれが代わりに404を返すように設定を除いて、Expressを使用して、私のserver.jsで発生します。

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"); 

答えて

1

答えはWebPACKの構成では、実際にはありませんでしたが、私のindex.htmlで:ここに私の設定はそのためです。私は自分のHTMLヘッダーに含まれる各静的資産のパスをルートにしなければなりませんでした。つまり、それぞれの前に '/'を追加する必要がありました。

たとえば、私は<link rel="stylesheet" href="styles/style.css">, でしたが、修正するには、<link rel="stylesheet" href="/styles/style.css">としました。

関連する問題