Abhi Abhi - 3 years ago 131
React JSX Question

Output JS file of Webpack is not accessible in subdirectories

I am generating a output JS file named

transformed.js
through webpack. But there is a problem with the way it is injecting it in html file. In HTML file, it is not including a slash in front of this file. Due to which if I move to any subdirectory then browser fails to find
transformed.js
because it starts looking for this file in that subdirectory. I am attaching screenshot of error for better clarification

enter image description here

It is happening because in HTML file it is getting injected like this

<script type="text/javascript" src="transformed.js"></script>


But ideally it should be getting injected like this

<script type="text/javascript" src="/transformed.js"></script>


My Webpack configfuration is this

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'
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.svg$/,
loader: 'react-svg'
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=88192'
}
]
},
devServer: {
historyApiFallback: true,
contentBase: './'
},
output: {
filename: 'transformed.js',
path: __dirname + '/build'
},
plugins: [HTMLWebpackPluginConfig]
};


Please suggest how can I fix this?

Answer Source

Try setting publicPath:

output: {
    path: path.join(__dirname, '/build'),
    filename: 'transformed.js',
    publicPath: '/'
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download