How do I add new loaders?

[delebash]

I would like to use autoprefixer with sass currently I have

 module: {
 loaders: [
      { test: /\.scss$/, loader: 'style!css?sourceMap!postcss!sass?sourceMap'}
    ]
  },
  postcss: [
    autoprefixer({
      browsers: ['last 2 versions']
    })
  ]

Would I just do

loaders: [ { test: /\.scss$/, loader: 'style!css?sourceMap!postcss!sass?sourceMap'},{another loader}]

and this would append these loaders to the easy-webpack loaders array in the same manner as how you add new plugins?

┆Issue is synchronized with this Asana task

[rodhoward]

+1 very interested in adding stylus plugin to my aurelia typescript webpack skeleton. From the docs I really don't know where to start.

[niieani]

I'll be writing docs regarding aurelia-specific configuration. However @delebash's on the money - you just add an object with the desired webpack configuration required for loading given CSS and pass it somewhere into generateConfig. For now, Aurelia doesn't support loading using custom CSS loaders directly from templates (except for sass or less, if you have either of those loaders installed), so you'll have to import them in the ViewModels.

[delebash]

@rodhoward Just some info until the official docs are out, but this is working for me. Excerpt from development switch. As you can see the normal plugins: are just wrapped as an object and you just add new plugins per normal. Same with loaders you wrap the normal module: as an object and then add loader's to the normal loaders array. Also in the below case since I am not using the require('@easy-webpack/config-css')(), and since I am using a non easy-webpack loader I have to install whatever webpack loaders that I need. Example npm install style-loader.

{plugins: [new ExtractTextPlugin('styles.css', {
        allChunks: true
      })]},
      {module: {
      loaders: [{
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
      },{ test: /\.scss$/, loader: 'style!css?sourceMap!postcss!sass?sourceMap'}]
        }
      }

Full config

[niieani]

Looks good @delebash, keep in mind that you've only added this to the development section, so it won't build properly for production.

[delebash]

Windows 7 node v5.9.1 npm 3.7.3

@niieani Working on it. I need a little help with building config-sass for testing. I am getting typescript compile errors as outlined below. I am also new to debugging node modules and webpack loaders. I have successfully setup debugging in Webstorm for webpack loaders and am hitting my breakpoints but I need to build config-sass in order for me to test changes made in index.ts

I cloned config-sass and am using Webstorm as ide compiling with ts 1.8.10 using tsconfig.json. ran npm install and typings install

Typescript compiler errors as follows:

Error:Error: Parse tsconfig error [{"messageText":"Unknown compiler option 'lib'.","category":1,"code":5023}]

Tried removing lib line from tsconfig resulting in many errors but the main one I think is

Error:(5, 65) TS2304: Cannot find name 'WebpackConfig'.

In tsconfig.json I added

  "files": [
    "./typings/main.d.ts"
  ],

In main.dts I added

/// <reference path="../node_modules/@easy-webpack/core/dist/webpack.d.ts" />
/// <reference path="../node_modules/@easy-webpack/core/dist/index.d.ts" />

Still getting same errors

Thanks

[niieani]

Hey @delebash, the reason is I used TypeScript@next (2.0 beta) instead of the 1.8. Some features (like the lib config, or this specific function) are TypeScript 2.0 specific. You can try compiling either with TS which is installed locally, or npm install typescript@next -g to have it available globally.

[rodhoward]

Thanks @delebash I have used your config as a template at that seems to work I can import/require .styl files without webpack complaining. However its not applying the styles. {plugins: [new ExtractTextPlugin('styles.css', { allChunks: true })]}, {module: { loaders: [ { test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' } ] }}, I'm currently importing them in the view module as @niieani advised but it still doesn't seem to work. There are no errors and the dialog.styl module is loading its just the styles are not applied. import './dialog.styl';

I feel a little bit like I have chosen the supper difficult path but I really like the idea of webpack, typescript, aurelia and now stylus its just they are all such a pain to actually get up and running ;).

[delebash]

@rodhoward When you use the ExtractTextPlugin it pulls all the css into a seperate css file instead of being in the js file. So you just need to reference this in your index.html add this to index.html <link rel="stylesheet" href="styles.css">

I have also found it difficult to get it setup. I like Typescript but it gave me some problems for awhile so I just switched to js and webpack. I don't know Typescript very well as far as refernece d.ts files and other errors that I have worked through but took time. Webpack also took time to understand but it was not so bad @niieani has made that easier and more robust but it is a little different if you already understand Webpack configs but if you have not used Webpack before the niieanis solution helps alot.

There has been some major changes recently to Webpack Typescript and I think once good docs are released it will all come together and be much easier to setup

[niieani]

The part: <link rel="stylesheet" href="styles.css"> should be automatically added when you're using config-generate-html. I'll be writing more docs regarding Aurelia usage with Easy Webpack soon.

[delebash]

From what I can tell the ExtractTextPlugin in both easy-webpack css and sass in not firing correctly I had to stop looking at the code yesterday but when I set it to true no css file was generated. I will verify and fix with the pull request for autoprefixer. I am guessing the config-generate-html should only put a link if ExtractTextPlugin is firing, correct? Oh and the typescirpt 2.0 fixed all problems, thanks

[niieani]

Indeed. I am aware of the bug regarding ExtractTextPlugin. We'll investigate. @Vheissu did you have any luck finding the problem with ExtractTextPlugin?

[delebash]

Yeah I think its just the logic here constextractCss = extractText === true. I will look at it today but even when extractText=true extractCss ends up = false then the below ternary results in false thus = null

[delebash]

Wait that makes no sense const extractCss = extractText === true extractCss is true, uggh any way the ternary is returning null:

Update: Your original statement is const extractCss = extractText === false which results in ternary = false but something is still wrong even after I changed statement to be true so ternary returned an instance of ExtractTextPlugin

[delebash]

Ok, I figured out where I left off. Now that the ExtractTextPlugin instance is good I am getting below error even though the sass-loader should be installed. I see that config-sass does have sass-loader , node-sass, style-laoder and css-loader dependencies so I am not sure why this error is occurring.

ERROR in ./sass/styles.scss
Module build failed: ModuleParseError: Module parse failed: f:\Development\GitHub\delebash\Webpack-debug\skeleton-esnext-webpack\node_modules\sass-loader\index.js!f:\Development\GitHub\delebash\Webpack-debug\skeleton-esnext-webpack\sass\styles.scss Unexpected token (1:5)
You may need an appropriate loader to handle this file type.

[delebash]

@rodhoward Sorry I just realized I sent you the wrong webpack file, here is the corrected one https://gist.github.com/delebash/25c31e3ce22de8df4c9ef34506a97d99

You need the ExtractTextPlugin for each file type that you want to extract.

Change this { test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' } to

{ test: /\.styl$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!stylus-loader")}

If you also import regular css and want that extracted then you need to add ExtractTextPlugin to that loader

      // Extract CSS
      { test: /\.css/,
        loader: ExtractTextPlugin.extract("style", "css?sourceMap")}

[niieani]

It should be possible to use a single instance in order to get a single concatenated css result file. @Vheissu said to me yesterday he has something working.

[delebash]

That's great @Vheissu would love to see your config file when you get a chance

[rodhoward]

Thanks @delebash I now have stylus working!!

[niieani]

It is now possible to add additional loaders using the parameter additionalLoaders. Example (autoprefixer):

const autoprefixer = require('autoprefixer');

generateConfig(
  // ..., 
  require('@easy-webpack/config-css')
    ({ filename: 'styles.css', sourceMap: false, additionalLoaders: ['postcss'] }),
  {
    postcss: [
      autoprefixer({
        browsers: ['last 2 versions']
      })
    ]
  }
);

The same thing should work for SASS and LESS.

For stylus support, you can use e.g.:

generateConfig(
  // ..., 
  require('@easy-webpack/config-css')
    ({ test: /\.styl$/, additionalLoaders: ['stylus'], filename: 'styles.css', sourceMap: false })
);

[don-bluelinegrid]

@niieani Can you please provide a working example for loading LESS, in the context of the current version tag of the typescript-webpack skeleton?

[niieani]

@don-bluelinegrid just use @easy-webpack/config-less. Not sure what you mean about context / version tag?

[don-bluelinegrid]

@niieani

In my Aurelia HTML template I have this:

<require from="../less/blg.less"></require>

In the 'development' case of the webpack config I include this:

require('@easy-webpack/config-less')(),

When I run the 'npm run build:dev' webpack build, I get this output:

[code] WARNING in ./~/less-loader!./less/blg.less Module parse failed: /Users/.../Documents/gc-2/node_modules/less-loader/index.js!/Users/.../Documents/gc-2/less/blg.less Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type. | @font-face { | font-family: 'Lato'; | src: url('fonts/muli/lato-black.eot'); @ ./src ^.\/.*$ @ ./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js @ multi aurelia

[/code]

And, I do not see any of the LESS file content processed into an output file in the /dost directory. However, I see this warning whether I include the config-less or not.

Is there a working example of including and processing LESS files in an @easy-webpack build? I ask this, because the aurelia-typescript-webpack skeleton is using @easy-webpack, but doesn't include such a working example for LESS - and webpack is a less straightforward and less documented system than something like Grunt/Gulp. I've seen some comments that there may be more config needed, or that the addition of loaders in the webpack config may be necessary.

My comment about the version tag was to see a working example, based on the current tag in the skeleton project.

Regards, Don

[niieani]

@don-bluelinegrid you did run npm install @easy-webpack/config-less --save-dev, right? seems like the loader isn't there.

[don-bluelinegrid]

@niieani Correct, I did do that:

"devDependencies": { "@easy-webpack/config-aurelia": "^2.0.1", "@easy-webpack/config-babel": "^2.0.2", "@easy-webpack/config-common-chunks-simple": "^2.0.1", "@easy-webpack/config-css": "^2.3.2", "@easy-webpack/config-less": "^1.1.1",

[don-bluelinegrid]

@niieani

And, I do also see this modules in the node_modules directory: @easy-webpack/config-less less less-loader

[don-bluelinegrid]

@niieani

Does the fact that we see this in the warning suggest that the loader is in fact present, and is trying to process the file?

"WARNING in ./~/less-loader!./less/blg.less"

[niieani]

How to you require the blg.less file now? import? <require> in View?

[don-bluelinegrid]

No, with require. Sorry, I had meant to include this in the post above:

In my Aurelia HTML template I have this:

<require from="../less/blg.less">

[niieani]

If you want to use less in Aurelia's View, you need to extend it manually. It has nothing to do with Webpack, aside from the fact that you need less-loader to be installed. Try looking through the issues of aurelia/loader, I think somebody posted a solution on how to do that.

[don-bluelinegrid]

I don't necessarily need to use LESS in the View - I was following Aurelia examples that showed this, requiring the .css files into the view templates.

My requirement is to have the .less file processed by the skeleton's webpack build and then output into a .css file. Can you advise on the optimal way to do this?

[niieani]

just import './my-file.less' in one of your .js/.ts files, not in the View. It should work. If you want to generate an external CSS file, use this config:

  require('@easy-webpack/config-less')
    ({ filename: 'styles.css', sourceMap: false }),

[don-bluelinegrid]

@niieani

OK, thanks, I've tried that. It is not working yet.

I have added this to a .ts file: import '../less/blg.less'

And have added this to 'development' in the webpack config:

require('@easy-webpack/config-less') ({ filename: 'blg.css', allChunks: !!ELECTRON, sourceMap: false }), Do I need a modules/loader config in the webpack config, like this?

module: { loaders: [{ test: /\.less$/, loader: ExtractTextPlugin.extract({ loader: 'css-loader!less-loader' }) }] }, plugins: [ new ExtractTextPlugin("blg.css") ],

With or without the module/loader config added, I receive this error:

/Users/.../Documents/gc-2/node_modules/webpack/lib/Compilation.js:461 rebuilding.forEach(function(cb) { ^ TypeError: Cannot read property '/Users/.../Documents/gc-2/node_modules/extract-text-webpack-plugin' of null at /Users/.../Documents/gc-2/node_modules/extract-text-webpack-plugin/index.js:257:27 at /Users/.../Documents/gc-2/node_modules/webpack/lib/Compilation.js:462:4 at Array.forEach (native) at callback (/Users/.../Documents/gc-2/node_modules/webpack/lib/Compilation.js:461:14) at Compilation.<anonymous> (/Users/.../Documents/gc-2/node_modules/webpack/lib/Compilation.js:482:4) at /Users/.../Documents/gc-2/node_modules/webpack/lib/Compilation.js:326:10 at /Users/.../Documents/gc-2/node_modules/async/lib/async.js:52:16 at Object.async.forEachOf.async.eachOf (/Users/.../Documents/gc-2/node_modules/async/lib/async.js:236:30) at Object.async.forEach.async.each (/Users/.../Documents/gc-2/node_modules/async/lib/async.js:209:22) at Compilation.addModuleDependencies (/Users/.../Documents/gc-2/node_modules/webpack/lib/Compilation.js:192:8) at Compilation.processModuleDependencies (/Users/.../Documents/gc-2/node_modules/webpack/lib/Compilation.js:177:7) at Compilation.<anonymous> (/Users/.../Documents/gc-2/node_modules/webpack/lib/Compilation.js:469:8) at /Users/.../Documents/gc-2/node_modules/webpack/lib/Compilation.js:124:4 at Array.forEach (native) at callback (/Users/.../Documents/gc-2/node_modules/webpack/lib/Compilation.js:123:12) at /Users/.../Documents/gc-2/node_modules/webpack/lib/Compilation.js:147:10 at setError (/Users/.../Documents/gc-2/node_modules/webpack/lib/NormalModule.js:214:3) at /Users/.../Documents/gc-2/node_modules/webpack/lib/NormalModule.js:178:18 at /Users/.../Documents/gc-2/node_modules/webpack/lib/NormalModule.js:137:11 at /Users/.../Documents/gc-2/node_modules/loader-runner/lib/LoaderRunner.js:328:11 at /Users/.../Documents/gc-2/node_modules/loader-runner/lib/LoaderRunner.js:150:20 at context.callback (/Users/.../Documents/gc-2/node_modules/loader-runner/lib/LoaderRunner.js:87:13) at Object.<anonymous> (/Users/.../Documents/gc-2/node_modules/extract-text-webpack-plugin/loader.js:89:12) at Compiler.<anonymous> (/Users/.../Documents/gc-2/node_modules/webpack/lib/Compiler.js:251:10) at /Users/.../Documents/gc-2/node_modules/webpack/lib/Compiler.js:442:12 at next (/Users/.../Documents/gc-2/node_modules/tapable/lib/Tapable.js:81:11) at Compiler.<anonymous> (/Users/.../Documents/gc-2/node_modules/extract-text-webpack-plugin/loader.js:82:4) at next (/Users/.../Documents/gc-2/node_modules/tapable/lib/Tapable.js:83:14) at Compiler.<anonymous> (/Users/.../Documents/gc-2/node_modules/awesome-typescript-loader/src/instance.ts:391:13) at next (/Users/.../Documents/gc-2/node_modules/tapable/lib/Tapable.js:83:14)

I've also tried using the additional loaders property that you described above, with the same result.

What am I missing here?

Regards, Don

[niieani]

Try npm update, looks like a Webpack bug. If that won't help, try passing extractText: false as one of the options to config-less.

[AmitM30]

I am trying to move from systemjs to webpack (systemjs is throwing tantrums on mobile, fantastic on desktop though).

The only issue I am facing is the bundle size. The file size for app.bundle is coming to be around 350+kb (minified, but not gzip'ed). Is this ok. feels a little too large to me.

P.S.: I know this is out of context, but didn't know if to start a new thread for it.