How to separate index.html and assets in webpack-dev-server?

Question

i want to have the following build folder structure:

/build/index.html
/build/static/bundlename.js
/build/static/bundlename.css
/build/static/img/*
/build/static/fonts/*

How can i achieve this? I have figured out this by addition /static prefix to bundlename itself for webpack normal build itself. But when i run this config in webpack-dev-server it doesn't server files by /static/ path.

I use file-loader and url-loader for fonts, how i can change their path as well? THey appear in /build root and i want them in /static/fonts folder.

I use html-webpack-plugin to generate index.html and append styles link (have no idea why webpack want to add them from js by default, it's crazyness, just as option i can see, but not as default way)

I run webpack by gulp.

You can see my config here. https://github.com/rantiev/template-angular

Thanks in advance.

score 1 · Answer 1 · answered Mar 19 '16 at 19:43

1

You can specify output.path:

output: {
    path: "build/static",
    publicPath: "/static/"
}

and change path from index.html to ../index.html in html-webpack-plugin

answered Mar 19 '16 at 19:43

Bob Sponge

4,708
1
23
25

It works in webpack build but doesn't work when i run it with webpack-dev-sever. Neither by opening / or /static webpack-dev-server gives nothing. I added publicPath, change index.html path to go with ../, added publicPath + historyApiFallback to webpack-dev-server. The problem is that i can't make it work with devserver not webpack simple build. Have you tried this by yourself with webpack-dev-server? Please provide your settings if so. Cool idea but doesn't work for me. Might did something wrong. – Rantiev Mar 19 '16 at 21:40
Sorry, but I'm not using webpack-dev-server, anyway I tried to make it works but lo luck :( – Bob Sponge Mar 20 '16 at 14:51

score 0 · Answer 2 · answered Dec 04 '16 at 04:06

You have output.path, output.publicPath & output.filename (see here)
output.path option determines the location on disk the files are written

In your case you want path: path.resolve(__dirname, 'build')
That'll put the index.html from the HtmlWebpackPlugin into your build directory.

output.filename

Specifies the name of each output file on disk. You must not specify an absolute path here! The output.path option determines the location on disk the files are written. filename is used solely for naming the individual files.

In your case you'll want filename: './static/bundlename.js'
That'll put the bundled JS into the static directory

To get the CSS into your static directory you'll need the ExtractTextPlugin. Once you get that going you'll want to put something in your webpack plugins like new ExtractTextPlugin('static/bundlename.css')

For your images & fonts you can specify in your loaders something like this:

{
    test: /\.(ttf|otf|eot|woff|woff2)$/
    include: [
      path.resolve(__dirname, 'font location here')
    ],
    loader: 'url',
    query: {
      limit: 10000,
      name: 'static/fonts/[name].[ext]'
    }
  },
  {
    test: /\.svg$/,
    include: [
      path.resolve(__dirname, 'image location here')
    ],
    loader: 'file',
    query: {
      limit: 10000,
      minetype: 'image/svg+xml',
      name: 'static/img/[name].[ext]'
    }
  }

output.publicPath specifies the public URL address of the output files when referenced in a browser. You might want to try
publicPath: http://localhost:8000/ and look at this Webpack "OTS parsing error" loading fonts

How to separate index.html and assets in webpack-dev-server?

2 Answers2

Linked