Using webpack, I have a basic configuration like this:
{
entry: {
'example1': path.join(__dirname, '/demo/example1/app.ts'),
'example2': path.join(__dirname, '/demo/example2/app.ts'),
},
output: {
filename: '[name]/app.js',
path: path.join(__dirname, '/demo'),
},
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
loader: 'source-map-loader'
},
{
test: /\.ts$/,
loader: 'ts-loader',
options: {
onlyCompileBundledFiles: true
},
exclude: /node_modules/,
},
{
test: /\.s?[ac]ss$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
},
},
{
loader: 'resolve-url-loader'
},
{
loader: 'sass-loader',
},
{
loader: 'sass-bulk-import-loader',
},
],
},
// File loader
{
test: /\.(woff(2)?|ttf|eot|png|svg|md)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
limit: 8192,
name: 'asset.[hash].[ext]',
},
}
]
}
],
},
resolve: {
modules: ['node_modules', path.resolve(process.cwd(), 'demo')],
extensions: ['.ts', '.js'],
},
devtool: 'inline-source-map',
devServer: {
port: 3000,
historyApiFallback: {
index: 'demo/'
},
contentBase: [path.join(process.cwd(), 'demo')],
},
};
Everything is working fine. I can enjoy my code.
However, assets are not loaded with the file-loader.
Indeed, I have this error:
Failed to load resource: the server responded with a status of 404 (Not Found)
This is due to the path which is not good. Because, with this configuration, it is trying to get the asset at this url: http://localhost:3000/example2/asset.857adff9b6c.svg
And, it works with this path: http://localhost:3000/asset.857adff9b6c.svg
How can I configure webpack to make it works ?
