Ionic-app-scripts: Unable to use url-loader or file-loader

[bunny1985]

Short description of the problem:

Files included with url-loader does not appear in "build" folder

What behavior are you expecting?

Files "required" with url-loader/file-loader should be emited to build directory.

Steps to reproduce:

1. Eject Webpack.config form node_modules/@ionic/app-script/config
2. setup package jso to use custom webpack.config.js:
   Add following:

  "config": {
    "ionic_bundler": "webpack",
    "ionic_webpack": "./webpack.config.js",
  },

1. Add url-loader to dependencies: "npm install -save-dev url-loader"
2. Add Webpack Configuration for loader:

      {
        test: /\.jpg$/,
        exclude: /node_modules/,
        //debug: true, 
        loader: 'file-loader?name=[name].[ext]&publicPath=/&limit=0'
      }

1. add webpack require function to declarations.d.ts in src directory:
   declare function require(string: string): string;
2. "require" jpg image in some ts file:
   this.t = require("file-loader?name=[name].[ext]&limit=0!./bg.jpg");
3. run ionic build nonexistingPlatform and watch the build directory
4. now comment out this:

  plugins: [
    ionicWebpackFactory.getIonicEnvironmentPlugin()
  ],

run once again and see the result

Which @ionic/app-scripts version are you using?
@ionic/app-scripts": "1.3.0

[bunny1985]

ignore point 8 - it seems to me know that behaveiour is not deterministic. Sometimes i can see that everything is fine, next time I don't see emited file in build directory.

[jbarbede]

We have the same problem using v1.3.4. The file-loader doesn't emit the file. If we console.log the require('file-loader?...'), it outputs the correct path but the file is not present in the build folder.

We tried point 8 like indicated by @bunny1985 and now files loaded through file-loader are there.

[shprink]

Same here

[jbarbede]

The following line is responsible for limiting webpack to output only certain files: https://github.com/ionic-team/ionic-app-scripts/blob/master/src/webpack.ts#L116

I think any file starting with the build directory should be outputted, not only .js and .js.map.

[ngfk]

I noticed that there are tests preventing css files to be written to the build dir so I guess the proper way to resolve this would be to replace:

return dirname(file.path).indexOf(context.buildDir) >= 0 && (file.path.endsWith('.js') || file.path.endsWith('.js.map'));

with:

return dirname(file.path).indexOf(context.buildDir) >= 0 && !file.path.endsWith('.css') && !file.path.endsWith('.css.map');

Is this acceptable?

Personally I would like to use the file-loader to output files into the assets directory, so I would perfer to filter on context.wwwDir instead of context.buildDir. This does mean that the webpack tests have to be adjusted to provide the wwwDir instead of the buildDir.

With these changes using the file-loader will still fail when targeting a non existing subfolder e.g. 'assets/i18n' because writeFileAsync does not check the existence of subfolders before writing the file.

Can we get an update on this? If necessary I would be happy to provide a pull request for this after some feedback. Note: I don't know if this will resolve any url-loader issues.

[danbucholtz]

Can you try nightly? I think I fixed this.

npm install @ionic/app-scripts@nightly

It should just work in theory.

Thanks,
Dan

[ngfk]

Nightly works perfect, thanks!