CODEWITHSUNDEEP
node.jsreactjswebpack
N P
N P

Reputation: 2619

Webpack config with React

I am creating a React application, I used npm eject so I could get to the Webpack config. I want to change the paths to assets so they don't have the leading slash. This is because when I run my application I copy the files over to a Ratpack server, so when the path is /assets/js/main.js it points to my route rather than my assets folder.

So my current webpack config is 

  output: {
    // The build folder.
    path: paths.appBuild,
    // Generated JS file names (with nested folders).
    // There will be one main bundle, and one file per asynchronous chunk.
    // We don't currently advertise code splitting but Webpack supports it.
    filename: 'assets/static/js/[name].[chunkhash:8].js',
    chunkFilename: 'assets/static/js/[name].[chunkhash:8].chunk.js',
    // We inferred the "public path" (such as / or /my-project) from homepage.
    publicPath: publicPath
  },

However it always adds on the leading slash.

Like so

<script type="text/javascript" src="/assets/static/js/main.4d5cbecd.js">

Is there a way to have it so it builds like

<script type="text/javascript" src="assets/static/js/main.4d5cbecd.js">

Upvotes: 1

Views: 345

Answers (1)

Vincas Stonys
Vincas Stonys

Reputation: 1135

Assuming you are talking about create-react-app's config, you could remove the line publicPath: publicPath, and it will generate it without leading slash.

However, I think your server should serve files too, when they are requested specifically, instead of redirecting to index page. If that's what's happening.

Another advice is for production, use production build instead of development build.

Upvotes: 1

Related Questions