Add a static prefix to urls generated in webpack

Question

I want to add a prefix ("/static/") to every static url generated by webpack. However I want the generated bundle to ignore this, so app.js and staticfiles all end up in the same directory. The file loader allows specifying a prefix with ?name=static/[name].[ext] but my bundle then comes within a static/ dir in the output.

I want to do this because I am serving my app from tornado, so every path needs some kind of prefix or I can't serve the homepage

Webpack Config

module: {
    loaders: [
        ...
        {test: /\.(jpg|ttf|html|eot|woff2?|svg)$/, loader: "file?name=static/[hash].[ext]"},
    ]
},

Tornado config

ROOT_DIR = os.path.abspath(os.path.dirname(__file__))

application = tornado.web.Application(handlers=[
        (r'/', MainHandler),
        (r'/socket', SocketHandler),
        (r'/utilization', UtilizationHandler)
    ],
    autoreload=True,
    debug=False,
    template_path=os.path.join(ROOT_DIR, 'templates'),
    static_path=os.path.join(ROOT_DIR, 'public'),
    static_url_prefix='/static/'
)

The static_url_prefix set above is actually the default. I can't set it to empty or the root path goes to tornado's staticHandler instead of my mainHandler.

Answer 1

In webpack.config.js set the publicPath option.

output: {
    path: "/home/proj/public/assets",
    publicPath: "/static/"
}

https://github.com/webpack/docs/wiki/configuration#outputpublicpath