How to separate index.html and assets in webpack-d

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.

Answer 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

Answer 2

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