Cannot see generated files in dev-server

[lamuertepeluda]

Hi there,

I'm using this plugin together with HtmlWebpackPlugin and HtmlWebpackTemplate

It works fine while bundling, i.e. generating the folders with the icons and the rest. However when using the dev server such files are emitted but are not created, i.e. when browsing the
http://localhost:<port>/webpack-dev-server URL I cannot see the folder with the icons listed and when the browser requests, for instance, a favicon, I get a 404:

http://localhost:<port>/icons-<hash>/favicon.ico
response: Cannot GET /icons-1a4ee607/favicon.ico

This is a bit annoying when developing. How can I check if I'm doing something wrong? Or is this just a bug?

Al plugins are latest versions and so is webpack

Configuration

const webpackTemplate = require('html-webpack-template')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const AppManifestWebpackPlugin = require('app-manifest-webpack-plugin')


...
  const html = new HtmlWebpackPlugin({
    inject: false,
    title: globals.title,
    template: webpackTemplate,
    mobile: true,
    appMountId: globals.appMountId,
    meta: getMetas(contentSecurityPolicy),
    links: getLinks(LINKS),
    lang: 'en',
    filename: 'index.html',
    // favicon: path.join(appDirectory, srcDirectory, 'assets', 'favicons', 'favicon.ico'),
    chunks: chunkNames,
    scripts: getScripts(SCRIPTS),
    window: globalVars
  })

const appManifest = new AppManifestWebpackPlugin({
    logo: path.resolve(srcDirectory, 'assets', logoFileName),
    emitStats: true,
    inject: true,
    statsFilename: 'iconstats.json',
    persistentCache: true,
    // Prefix for file names (html will be container icons with this prefix)
    prefix: globals.publicPath,
    // Output path for icons (icons will be saved to output.path(webpack config) + this key)
    output: '/icons-[hash:8]/',
    config: {
      appName: globals.title, // Your application's name. `string`
      appDescription: globals.description, // Your application's description. `string`
      developerName: 'Mobile Solutions LINKS Foundation', // Your (or your developer's) name. `string`
      developerURL: 'https://linksfoundation.com/en/about/research-areas/', // Your (or your developer's) URL. `string`
      background: backgroundColor, // Background colour for flattened icons. `string`
      theme_color: chromeThemeColor, // Theme color for browser chrome. `string`
      display: 'standalone', // Android display: "browser" or "standalone". `string`
      orientation: 'portrait-primary', // Android orientation: "portrait" or "landscape". `string`
      start_url: `${globals.publicPath}index.html`, // Android start application's URL. `string`
      version: '1.0', // Your application's version number. `number`
      logging: true, // Print logs to console? `boolean`
      icons: {
        // Platform Options:
        // - offset - offset in percentage
        // - shadow - drop shadow for Android icons, available online only
        // - background:
        //   * false - use default
        //   * true - force use default, e.g. set background for Android icons
        //   * color - set background for the specified icons
        //
        android: true, // Create Android homescreen icon. `boolean` or `{ offset, background, shadow }`
        appleIcon: true, // Create Apple touch icons. `boolean` or `{ offset, background }`
        appleStartup: true, // Create Apple startup images. `boolean` or `{ offset, background }`
        coast: false, // Create Opera Coast icon with offset 25%. `boolean` or `{ offset, background }`
        favicons: true, // Create regular favicons. `boolean`
        firefox: true, // Create Firefox OS icons. `boolean` or `{ offset, background }`
        windows: true, // Create Windows 8 tile icons. `boolean` or `{ background }`
        yandex: false // Create Yandex browser icon. `boolean` or `{ background }`
      }
    }
  })

const plugins = [html, appManifest ...]

globals.publicPath is '/' in dev-server mode in my setup.

[lamuertepeluda]

After some try/fail/repeat I found out that setting

output: './'

works.

Also

    // Prefix for file names (html will be container icons with this prefix)
    prefix: `${globals.publicPath}icons/`,
    // Output path for icons (icons will be saved to output.path(webpack config) + this key)
    output: './icons/'

works (with globals.publicPath ending in '/'). Using hash:8 screws up everything since it's not supported in prefix.

Other settings do not work for me, because of a MemoryFileSystem EACCESS permission denied error 😕 which I found out using webpack --verbose

Hope this helps fixing bugs (if any) or other people struggling against similar issues.

[graup]

Thanks, that helps. You can still use the hash for production builds like this:

    prefix: publicPath + (process.env.NODE_ENV === 'production' ? '/' : '/icons'),
    output: process.env.NODE_ENV === 'production' ? '/icons-[hash:8]/' : './icons/',

[hrafnkellbaldurs]

Using

output: './'

in dev-server works perfectly for the root path, e.g. http://localhost:port/

But when you navigate to a deeper path in your website, you'll unfortunately get a 404 error, since it will be relative to the current path.

My webpack output.publicPath is '/', so I'm not sure what to do to make this work 100% both in development and production.