webpack4 issues

[JoelParke]

Note: for support questions, please use one of these channels: Chat: AngularClass.slack or Twitter: @TipeIO

• What is the current behavior? the webpack4 branch can be made to build, when I shift to MiniCssExtractPlugin() from ExtractTextPlugin(). This works fairly well. Basically: I added:

  const MiniCssExtractPlugin = require('mini-css-extract-plugin'); /**

  • Extract CSS files from .src/styles directory to external CSS file */ { test: /.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'], include: [helpers.root('src', 'styles')] },

    /**

  • Extract and compile SCSS files from .src/styles directory to external CSS file */ { test: /.scss$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'], include: [helpers.root('src', 'styles')] },

And I replaced new ExtractTextPlugin(....) with:

  new MiniCssExtractPlugin({
               filename: '[name]-[hash].css',
          chunkFilename: '[name]-[chunkhash].css'}),

I also updated all the packages to the latest versions - on 4-22.

I have a large project built around angular-starter, which works great with webpack 3. But with webpack4, even with the changes above, I get killed late in the build

 `WARNING in ./node_modules/@angular/core/esm5/core.js
 System.import() is deprecated and will be removed soon. Use import() instead.
 For more info visit https://webpack.js.org/guides/code-splitting/
  @ ./src/environments/environment.ts 6570:15-36 2:0-47 4:0-14
  @ ./src/main.browser.ts

 WARNING in ./node_modules/@angular/core/esm5/core.js
 System.import() is deprecated and will be removed soon. Use import() instead.
 For more info visit https://webpack.js.org/guides/code-splitting/
 @ ./src/environments/environment.ts 6590:15-102 2:0-47 4:0-14
 @ ./src/main.browser.ts

 ERROR in ./node_modules/font-awesome-webpack/font-awesome.config.js (./node_modules/font-awesome-webpack/node_modules/css-loader!./node_modules/font-awesome-webpack/node_modules/less-loader!./node_modules/font-awesome-webpack/font-awesome-styles.loader.js!./node_modules/font-awesome-webpack/font-awesome.config.js)
 Module build failed: TypeError: Cannot read property 'lessLoader' of undefined
at Object.module.exports (/home/joel/workspace/Tracker3/node_modules/font-awesome-webpack/node_modules/less-loader/index.js:50:18)
  @ ./node_modules/font-awesome-webpack/node_modules/style-loader!./node_modules/font-awesome-webpack/node_modules/css-loader!./node_modules/font-awesome-webpack/node_modules/less-loader!./node_modules/font-awesome-webpack/font-awesome-styles.loader.js!./node_modules/font-awesome-webpack/font-awesome.config.js 4:14-154
  @ ./node_modules/font-awesome-webpack/index.js
  @ ./src/app/app.module.ts
  @ ./src/app/index.ts
  @ ./src/main.browser.ts
 Child html-webpack-plugin for "index.html":
 1 asset
Entrypoint undefined = index.html
[MFLM] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 2.08 KiB {0} [built]
    factory:4095ms building:18ms = 4113ms
[YuTi] (webpack)/buildin/module.js 497 bytes {0} [built]
    [MFLM] 4113ms -> [LvDl] 169ms -> factory:9ms building:5ms = 4296ms
[yLpj] (webpack)/buildin/global.js 489 bytes {0} [built]
    [MFLM] 4113ms -> [LvDl] 169ms -> factory:9ms building:5ms = 4296ms
    + 1 hidden module

` SO it seems that font-awesome is killing the build for webpack 4. Any thoughts as to why this might be, would be very helpful. I would like to experiment with some strategies to split chunks, but until I can get it running in production, it seems somewhat pointless.

• Please tell us about your environment:
  • Ubuntu, latest node, npm, etc. Intellij ide, Angular 5.2.x, Chrome

[govi2010]

@JoelParke how are you importing font-awesome

[JoelParke]

I should have mentioned that to get the above working, I needed to add '"less-loader": "^1.0.0",' to my package.json. (which settles into 4.1.0)

For font-awesome, I have:
"font-awesome": "^4.7.0",
"font-awesome-webpack": "0.0.5-beta.2",

When working for webpack 3, these are the same, but without less-loader, which is not needed.

For consistency, I added less-loader: ^4.1.0, into the webpack 3 build, nothing changes.

[JoelParke]

I dug a bit deeper, and there is an issue with the dependencies from font-awesome-webpack -- which seems a bit abandoned. But someone did a fork, and updated the dependencies.
When I did: yarn add font-awesome-webpack@https://github.com/jarecsni/font-awesome-webpack#440af2a2efe7ba1779d039556f04538e57bad4bb --dev All works as expected - with expected warnings... So I am back working away. Thanks for looking at this, and I am hoping that this will help others upgrading to webpack 4.

[konuch]

@JoelParke Hey, Im also struggling with running angular-starter with webpack 4. Could you please share your webpack config files and maybe your package.json file so I could see what I'm doing wrong? Thanks in advance.

[JoelParke]

Here are the changes etc... For config/webpack.prod.js Remove: const ExtractTextPlugin = require('extract-text-webpack-plugin'); const HashedModuleIdsPlugin = require('webpack/lib/HashedModuleIdsPlugin') and replace with: const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HashedModuleIdsPlugin = require('webpack/lib/HashedModuleIdsPlugin');

And, change:

        /**
         * Extract CSS files from .src/styles directory to external CSS file
         */
        {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: 'css-loader'
          }),
          include: [helpers.root('src', 'styles')]
        },

        /**
         * Extract and compile SCSS files from .src/styles directory to external CSS file
         */
        {
          test: /\.scss$/,
          loader: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: 'css-loader!sass-loader'
          }),
          include: [helpers.root('src', 'styles')]
        },

TO

        /**
         * Extract CSS files from .src/styles directory to external CSS file
         */
        {
          test: /\.css$/,
          use: [MiniCssExtractPlugin.loader, 'css-loader'],
          include: [helpers.root('src', 'styles')]
        },

        /**
         * Extract and compile SCSS files from .src/styles directory to external CSS file
         */
        {
          test: /\.scss$/,
          use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
          include: [helpers.root('src', 'styles')]
        },

And Replace:

      /**
       * Plugin: ExtractTextPlugin
       * Description: Extracts imported CSS files into external stylesheet
       *
       * See: https://github.com/webpack/extract-text-webpack-plugin
       */
      new ExtractTextPlugin('[name].[contenthash].css'),

With:

      new MiniCssExtractPlugin({
                   filename: '[name]-[hash].css',
              chunkFilename: '[name]-[chunkhash].css'}),

And in UglifyJsPlugin() you can set sourceMap: false Which will speed up the builds tremendously.

I will attach my package.json, and yarn.lock.
NOTE: you can update all the packages, EXCEPT! rxjs - as they have some breaking changes! ALSO if you are using font-awsesome-webpack, please see the issue with webpack4 and fix earlier.
packages.tar.gz

[JoelParke]

Let me know how it goes.  I have enabled the compression, but I noticed that if I delete the existing files, then index.html cannot be found, and I it unclear to me how much the compression saves on loading.  

I would be curious what your experience is.  

Thanks,

[konuch]

@JoelParke Thanks a lot mate! Tried it out and it seems to be working well. Also thanks for the sourceMap tip ;)

[lanovoy]

We have no problems whatsoever with font-awesome and Webpack 4 with latest versions of plugins... I supposed the issues described here were fixed, so no need for workarounds anymore. Closing this one.

[httpete]

I am getting this:

`WARNING in ./node_modules/@angular/core/esm5/core.js
 System.import() is deprecated and will be removed soon. Use import() instead.
 For more info visit https://webpack.js.org/guides/code-splitting/
  @ ./src/environments/environment.ts 6570:15-36 2:0-47 4:0-14
  @ ./src/main.browser.ts

I tried to ignore the error with a stats: {} configuration but it still spills out all over. It is telling the truth, that files does contain System.import even in the latest Angular 6.0.9. I wish we could force webpack to use the other module formats. Can we?

[lanovoy]

I believe you can safely ignore it. This is something that Angular team will have to handle eventually.