title: Webpack dev server : define WWW root
body: <p>Using webpack I have separated source files from distribution files.</p>
  
  <p>One problem that I have run into relates to <code>output.publicPath</code>, if I define one, the generated index.html has the wrong path to CSS and JS resources. I think the problem is related to <code>extract-text-webpack-plugin</code> See: <a href="https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/246" rel="noreferrer">https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/246</a></p>
  
  <p>Now that I have separated the code into source and distribution my <code>index.html</code> is available at <code>http://localhost/target/classes/war</code>. And every page refresh needs to have the URL typed in by hand because the routes fail to recognise the folder name. The <code>&lt;base /&gt;</code> tag in the head does not seem to have an effect.</p>
  
  <p>How can I instruct webpack to display the contents of the folder <code>./target/classes/war</code> at <code>http://localhost/</code> ? (without using <code>output.publicPath</code>)</p>
  
  <p>For completeness, find below the entire <code>webpack.config.js</code> as it stands :</p>
  
  <pre><code>var path = require('path');
  var webpack = require('webpack');
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  var ExtractTextPlugin = require('extract-text-webpack-plugin');
  var GoogleFontsPlugin = require("google-fonts-webpack-plugin");
  
  module.exports = {
  
      entry: {
          polyfills: './src/main/webapp/polyfills.ts',
          vendor: './src/main/webapp/vendor.ts',
          app: './src/main/webapp/app/core/global/main/main.ts'
      },
  
      output: {
          filename: 'target/classes/war/script/[name].[hash].bundle.js'
      },
  
      resolve: {
          extensions: ['.ts', '.js'],
  
          alias: {
              css: path.resolve(__dirname, "src/main/webapp/WEB-INF/scss"),
              src: path.resolve(__dirname, "src/main/webapp"),
              dist: path.resolve(__dirname, "target/class/war")
          }
      },
  
      module: {
  
          rules: [
              {
                  test: /\.ts$/,
                  loaders: [
                      {
                          loader: 'awesome-typescript-loader',
                          options: {
                              configFileName: path.resolve(__dirname, "src/main/webapp/WEB-INF/conf/tsconfig.json")
                          }
                      },
                      'angular2-template-loader'
                  ]
              },
              {
                  test: /\.html$/,
                  loader: 'html-loader'
              },
              {
                  test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                  loaders: [
                      {
                          loader: "file-loader",
                          options: {
                              hash: "sha512",
                              digest: "hex",
                              name: "/target/classes/war/assets/[name].[hash].[ext]"
                          }
                      }
                  ]
              },
              {
                  test: /\.(css|scss)$/,
                  exclude: path.resolve(__dirname, "src/main/webapp/scss"),
                  include: path.resolve(__dirname, "src/main/webapp/app"),
                  loaders: [
                      {
                          loader: "raw-loader"
                      },
                      {
                          loader: "sass-loader"
                      }
                  ]
  
              },
              {
                  test: /\.(css|scss)$/,
                  exclude: path.resolve(__dirname, "src/main/webapp/app"),
                  use: [
                      {
                          loader: "style-loader" // creates style nodes from JS strings
                      }, 
                      {
                          loader: "css-loader" // translates CSS into CommonJS
                      },
                      {
                          loader: "resolve-url-loader" // compiles Sass to CSS
                      },
                      {
                          loader: "sass-loader" // compiles Sass to CSS
                      }
                  ]
              }
          ]
      },
      plugins: [
          // Workaround for angular/angular#11580
          new webpack.ContextReplacementPlugin(
                  // The (\\|\/) piece accounts for path separators in *nix and Windows
                  /angular(\\|\/)core(\\|\/)@angular/,
                  path.resolve(__dirname, "src/main/webapp"), // location of your src
                  {} // a map of your routes
          ),
  
          new webpack.optimize.CommonsChunkPlugin({
              name: ['app', 'vendor', 'polyfills']
          }),
  
          new HtmlWebpackPlugin({
              template: 'src/main/webapp/index.html',
              filename: 'target/classes/war/index.html',
              chunksSortMode: function (chunk1, chunk2) {
                  var order = ['polyfills', 'vendor', 'app'];
                  var order1 = order.indexOf(chunk1.names[0]);
                  var order2 = order.indexOf(chunk2.names[0]);
                  return order1 - order2;
              }
          }),
  
          new ExtractTextPlugin({
              filename: "target/classes/war/css/styles.[contenthash].css"
          }),
          new GoogleFontsPlugin({
              fonts: [
                  {family: "Lato"}
              ],
              path: "src/main/webapp/scss/fonts/",
              filename: "src/main/webapp/scss/fonts/fonts.css"
          })
      ]
  };
  </code></pre>