webpack-dev-server

how to control webpack-dev-server generate script src like localhost:3000/static/js/xxx.js?

when I use cra create a react app and npm run start, I see the dom tree like beblow

enter image description here

but for some special reason I hope it should be like

enter image description here

does anybody know how to change the webpackDevServer.config.js to achieve my goal?

Solution

  • You could achieve that by using output property in your webpack.config.js file. You can do something like this,

    const BUILD_DIR = path.resolve(__dirname, 'point_to_static_folder')
output: {
    path: BUILD_DIR,
    filename: 'bundle.js',
    publicPath: "http://localhost:3000/static/",
}

    For your other files you can define rules to have those files as well.