New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

webpack 4.0.0-alpha.5 feedback #6357

Closed
sokra opened this Issue Jan 22, 2018 · 25 comments

Comments

Projects
None yet
@sokra
Member

sokra commented Jan 22, 2018

Complete changelog for 4.0.0-alpha.5 compared to version 3:

Items changed from 4.0.0-alpha.4 to 4.0.0-alpha.5 are prefixed with [new]

Big changes

  • Environment
    • Node.js 4 is no longer supported. Source Code was upgraded to a higher ecmascript version.
  • Usage
    • You have to choose (mode or --mode) between two modes now: production or development
      • production enables all kind of optimizations to generate optimized bundles
      • development enables comments and hint for development and enables the eval devtool
        • WIP: addition hints in development mode
      • production doesn't support watching, development is optimized for fast incremental rebuilds
      • production also enables module concatenating (Scope Hoisting)
      • You can configure this in detail with the flags in optimization.* (build your custom mode)
      • process.env.NODE_ENV are set to production or development (only in built code, not in config)
      • There is a hidden none mode which disables everything
  • Syntax
    • import() always returns a namespace object. CommonJS modules are wrapped into the default export
      • This probably breaks your code, if you used to import CommonJs with import()
  • Configuration
    • You no longer need to use these plugins:
      • NoEmitOnErrorsPlugin -> optimization.noEmitOnErrors (on by default in production mode)
      • ModuleConcatenationPlugin -> optimization.concatenateModules (on by default in production mode)
      • NamedModulesPlugin -> optimization.namedModules (on by default in develoment mode)
    • [new] CommonsChunkPlugin was removed -> optimization.splitChunks
  • JSON
    • webpack now handles JSON natively
      • You may need to add type: "javascript/auto" when transforming JSON via loader to JS
      • Just using JSON without loader should still work
    • allows to import JSON via ESM syntax
      • unused exports elimination for JSON modules
  • Optimization
    • Upgrade uglifyjs-webpack-plugin to v1
      • ES15 support

Big features

  • Modules
    • webpack now supports these module types:
      • javascript/auto: (The default one in webpack 3) Javascript module with all module systems enabled: CommonJS, AMD, ESM
      • javascript/esm: EcmaScript modules, all other module system are not available
      • javascript/dynamic: Only CommonJS and, EcmaScript modules are not available
      • json: JSON data, it's available via require and import
      • webassembly/experimental: WebAssembly modules (currently experimental)
    • javascript/esm handles ESM more strict compared to javascript/auto:
      • Imported names need to exist on imported module
      • Non-ESM can only imported via default import, everything else (including namespace import) emit errors
    • In .mjs modules
      • javascript/esm is used
    • WebAssembly modules
      • can import other modules (JS and WASM)
      • Exports from WebAssembly modules are validated by ESM import
        • You'll get a warning/error when trying to import a non-existing export from WASM
  • Optimization
    • sideEffects: false is now supported in package.json
    • Instead of a JSONP function a JSONP array is used -> async support
    • [new] New optimization.splitChunks option was introduced
      Details: https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693
    • [new] Dead branches are now removed by webpack itself
      • Before: Uglify removed the dead code
      • Now: webpack removes the dead code (in some cases)
      • This prevents crashing when import() occur in a dead branch
  • Syntax
    • webpackInclude and webpackExclude are supported by the magic comment for import(). They allow to filter files when using a dynamic expression.
    • [new] Using System.import() now emits a warning
      • You can disable the warning with Rule.parser.system: true
      • You can disable System.import with Rule.parser.system: false
  • Configuration
    • Resolving can now be configured with module.rules[].resolve. It's merged with the global configuration.
    • optimization.minimize has been added to switch minimizing on/off
      • By default: on in production mode, off in development mode
    • optimization.minimizer has been added to configurate minimizers and options
    • many config options which support placeholders now also support a function
  • Usage
    • Some Plugin options are now validated
      • WIP: Better output, no process exit, stack trace, more plugins
    • CLI has been move to webpack-cli, you need to install webpack-cli to use the CLI
    • The ProgressPlugin (--progress) now displays plugin names
      • At least for plugins migrated to the new plugin system
  • Performance
    • UglifyJs now caches and parallizes by default
    • Multiple performance improvements, especially for faster incremental rebuilds
    • performance improvement for RemoveParentModulesPlugin
  • Stats
    • Stats can display modules nested in concatenated modules

Features

  • Configuration
    • Module type is automatically choosen for mjs, json and wasm extensions. Other extensions need to be configured via module.rules[].type
    • Incorrect options.dependencies configurations now throw error
    • Rule.ident is now allowed by schema
    • sideEffects can be overriden via module.rules
    • output.hashFunction can now be a Constructor to a custom hash function
      • You can provide a non-cryto hash function for performance reasons
    • add output.globalObject config option to allow to choose the global object reference in runtime exitCode
  • Runtime
    • Error for chunk loading now includes more information and two new properties type and request.
  • Performance
    • webpacks AST can be passed directly from loader to webpack to avoid extra parsing
    • Unused modules are no longer unnecessarly concatenated
    • [new] Add a ProfilingPlugin which write a (Chrome) profile file which includes timings of plugins
    • [new] Migrate to using for of instead of forEach
    • [new] Migrate to using Map and Set instead of Objects
    • [new] Migrate to using includes instead of indexOf
    • [new] Replaced some RegExp with string methods
    • [new] Queue don't enqueues the same job twice
  • Optimization
    • When using more than 25 exports mangled export names are shorter.
    • script tags are no longer text/javascript and async as this are the default values (saves a few bytes)
    • The concatenated module now generates a bit less code
    • constant replacements now don't need __webpack_require__ and argument is omitted
  • Defaults
    • webpack now looks for the .wasm, .mjs, .js and .json extensions in this order
    • output.pathinfo is now on by default in develoment mode
    • in-memory caching is now off by default in production
    • entry defaults to ./src
    • output.path defaults to ./dist
    • Use production defaults when omiting the mode option
  • Usage
    • Add detailed progress reporting to SourceMapDevToolPlugin
  • Stats
    • Sizes are now shown in kiB instead of kB in Stats
    • [new] entrypoints are now shows by default in Stats
    • [new] chunks now display <{parent}> >{children}< and ={siblings}= in Stats
  • Syntax
    • A resource query is supported in context
    • Parser now understand new Foo() expressions
    • Parser can now evaluate **, &, |, ^, >>>, >>, << and ~
    • Referencing entry point name in import() now emits a error instead of a warning
    • [new] Upgraded to acorn 5

Bugfixes

  • Generated comments no longer break on */
  • webpack no longer modifies the passed options object
  • Compiler "watch-run" hook now has the Compiler as first parameter
  • add chunkCallbackName to the schema to allow configurating WebWorker template
  • Using module.id/loaded now correctly bails out of Module Concatentation (Scope Hoisting)
  • OccurenceOrderPlugin now sorts modules in correct order (instead of reversed)
  • timestamps for files are read from watcher when calling Watching.invalidate
  • Avoid using process.exit and use process.exitCode instead
  • fix bluebird warning in webpack/hot/signal
  • fix incorrect -! behavior with post loaders
  • add run and watchRun hooks for MultiCompiler
  • [new] this is now undefined in ESM
  • [new] Initial chunks no longer contribute to chunkhash of runtime chunk and hashes don't occur in chunk hash map
  • [new] VariableDeclaration are correctly identified as var, const or let
  • [new] Parser now parse the source code with the correct source type (module/script) when the module type javascript/dynamic or javascript/module is used.

Internal changes

  • Replaced plugin calls with tap calls (new plugin system)
  • Migrated many deprecated plugins to new plugin system API
  • added buildMeta.exportsType: "default" for json modules
  • Remove unused methods from Parser (parserStringArray, parserCalculatedStringArray)
  • Remove ability to clear BasicEvaluatedExpression and to have multiple types

Removed features

  • removed module.loaders
  • removed loaderContext.options
  • removed Compilation.notCacheable flag
  • removed NoErrorsPlugin
  • removed Dependency.isEqualResource
  • removed NewWatchingPlugin
  • [new] removed CommonsChunkPlugin

Breaking changes for plugins/loaders

  • new plugin system
    • plugin method is backward-compatible
    • Plugins should use Compiler.hooks.xxx.tap(<plugin name>, fn) now
  • New major version of enhanced-resolve
  • Templates for chunks may now generate multiple assets
  • Chunk.chunks/parents/blocks are no longer Arrays. A Set is used internally and there are methods to access it.
  • Parser.scope.renames and Parser.scope.definitions are no longer Objects/Arrays, but Map/Sets.
  • Parser uses StackedSetMap (LevelDB-like datastructure) instead of Arrays
  • Compiler.options is no longer set while applying plugins
  • Harmony Dependencies has changed because of refactoring
  • Dependency.getReference() may now return a weak property. Dependency.weak is now used by the Dependency base class and returned in the base impl of getReference()
  • Constructor arguments changed for all Modules
  • Merged options into options object for ContextModule and resolveDependencies
  • Changed and renamed dependencies for `import()
  • Moved Compiler.resolvers into Compiler.resolverFactory accessible with plugins
  • Dependency.isEqualResource has been replaced with Dependency.getResourceIdentifier
  • Methods on Template are now static
  • A new RuntimeTemplate class has been added and outputOptions and requestShortener has been moved to this class
    • Many methods has been updated to use the RuntimeTemplate instead
    • We plan to move code which accesses the runtime to this new class
  • Module.meta has been replaced with Module.buildMeta
  • Module.buildInfo and Module.factoryMeta have been added
  • Some properties of Module have been moved into the new objects
  • added loaderContext.rootContext which points to the context options. Loaders may use it to make stuff relative to the application root.
  • add this.hot flag to loader context when HMR is enabled
  • buildMeta.harmony has been replaced with buildMeta.exportsType: "namespace
  • [new] The chunk graph has changed:
    • Before: Chunks were connected with parent-child-relationships.
    • Now: ChunkGroups are connected with parent-child-relationships. ChunkGroups contain Chunks in order.
    • Before: AsyncDependenciesBlocks reference a list of Chunks in order.
    • Now: AsyncDependenciesBlocks reference a single ChunkGroup.

Migration

Node.js

If you are still using Node.js 4 or smaller:

Install Node.js 8. You could also install Node.js 6 but it's slower (2x).

CLI

To use the command line interface:

yarn add -D webpack-cli

or

npm install -D webpack-cli

Configuration

  // webpack.production.config.js
  module.exports = {
+   mode: "production",
    plugins: [
-     new UglifyJsPlugin(/* ... */),
-     new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
-     new webpack.optimize.ModuleConcatenationPlugin(),
-     new webpack.NoEmitOnErrorsPlugin()
    ]
  }
  // webpack.development.config.js
  module.exports = {
+   mode: "development",
    plugins: [
-     new webpack.NamedModulesPlugin(),
-     new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
    ]
  }

import() CommonJs

import() now always returns the namespace object and not the exports directly for non-ESM.

- import("./commonjs").then(exports => {
+ import("./commonjs").then({ default: exports } => {
    // ...
  })

Note: ESM modules are not affected.

Note: Babel transpiled ESM (__esModule: true) will work in .js modules (javascript/auto), but not in .mjs modules.

Note: For JSON the same is true, but as JSON modules also export each property as exports you could pick property via destruction.

CommonsChunkPlugin

The following guides try to give 1 to 1 translations for the CommonsChunkPlugin. This does not neccessary fit bet pratices.

Best practise

optimization: {
  splitChunks: {
    chunks: "all"
  }
}

You need to generate the HTML from stats json. Use the entrypoints property from Stats to know which files to include for each entrypoint.

Initial vendor chunk

entry: {
  vendor: ["react", "lodash", "angular", ...]
}
new CommonsChunkPlugin({
  name: "vendors",
})
entry: {
  vendor: ["react", "lodash", "angular", ...]
},
optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        chunks: "initial",
        test: "vendor",
        name: "vendor",
        enforce: true
      }
    }
  }
}

Alternative:

optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        chunks: "initial",
        test: path.resolve(__dirname, "node_modules")
        name: "vendor",
        enforce: true
      }
    }
  }
}

Difference: This includes all used modules from node_modules and allows tree shaking.

Note: You don't need to specify a entry for the alternative.

Commons chunk

new CommonsChunkPlugin({
  name: "commons",
  minChunks: 3
})
optimization: {
  splitChunks: {
    cacheGroups: {
      commons: {
        chunks: "initial",
        minChunks: 3,
        name: "commons",
        enforce: true
      }
    }
  }
}

Better vendor chunk

new CommonsChunkPlugin({
  name: "vendors",
  minChunks: module => {
    return module.resource && /react|angluar|lodash/.test(module.resource);
  }
})
optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        test: /react|angluar|lodash/
        chunks: "initial",
        name: "vendor",
        enforce: true
      }
    }
  }
}

Async commons chunk

new CommonsChunkPlugin({
  async: true,
  // ...
})

Just omit it. The defaults already do such optimization.

Deep Children

Anything with deepChildren: true and no async.

See configuration above but use chunks: "all".

Loaders consuming JSON

  module.rules: [
    {
      test: /\.special\.json$/,
+     type: "javascript/auto",
      use: "special-loader"
    }
  ]
@johnnyreilly

This comment has been minimized.

Contributor

johnnyreilly commented Jan 22, 2018

Hey @sokra,

Just wanted to flag up that we're still hitting issues regarding when we're attempting to adding extra errors to the compilation.errors property in after-compile in ts-loader. Is there an alternate approach for registering errors with webpack that we could use instead?

@sokra

This comment has been minimized.

Member

sokra commented Jan 22, 2018

hey @johnnyreilly

I have no clue about your issue. errors is a standard Array, without any special stuff. As long you pushing Errors into it it should work fine. Maybe you can open a separate issue, with a minimal loader repro repo.

@johnnyreilly

This comment has been minimized.

Contributor

johnnyreilly commented Jan 22, 2018

Thanks @sokra - will do!

@johnnyreilly

This comment has been minimized.

Contributor

johnnyreilly commented Jan 22, 2018

@sokra I spent some more time digging into this; it looks like the trigger for making webpack hang is registering errors in the after-compile hook when mode has not been specified. Not quite sure why that happens.

I'm going to go through our test pack and make sure that our configs are webpack 4 compliant.

@HipsterZipster

This comment has been minimized.

HipsterZipster commented Jan 23, 2018

@sokra Amazing! Where can I find more information on sideEffects support? Will we be able to tree shake typescript transpiled code? See: mishoo/UglifyJS2#1261

@vladshcherbin

This comment has been minimized.

vladshcherbin commented Jan 23, 2018

@sokra Is it somehow possible to remove webpack webpackBootstrap code from bundle in webpack 4? Rollup produces far more cleaner output but doesn't have all plugins that webpack has.

I've tried different config configurations, concatenateModules option, etc with no luck.

@michael-ciniawsky

This comment has been minimized.

Member

michael-ciniawsky commented Jan 23, 2018

@vladshcherbin

webpack.config.js

optimization: {
  runtimeChunk: true
}
@vladshcherbin

This comment has been minimized.

vladshcherbin commented Jan 23, 2018

@michael-ciniawsky close, but it just extracts it into separate chunk which I don't need.

@TheLarkInn

This comment has been minimized.

Member

TheLarkInn commented Jan 23, 2018

@vladshcherbin it sounds like you are looking to suggest a library target feature? If so open a separate issue regarding this plz 🙇

@drcmda

This comment has been minimized.

drcmda commented Jan 23, 2018

It suddenly stopped working in production, anyone knows where my error is?

ERROR in Error: The loader ".../node_modules/html-webpack-plugin/lib/loader.js 
!.../index.template.ejs" didn't return html.

Relevant parts of webpack config

output: {
    filename: '[name].[hash].bundle.js',
    chunkFilename: '[name].[hash].chunk.js',
    path: path.resolve('./dist'),
    publicPath: '/',
},
plugins: [
    new HtmlWebpackPlugin({ 
        template: path.resolve('./.dev/index.template.ejs'), 
        inject: 'body' 
    }),
],
optimization: {
    runtimeChunk: true,
    splitChunks: { chunks: 'all' },
},
mode: 'production',

This only happens when runtimeChunk: true, if it's false, it runs through.

index.template.ejs

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>stepdoctor</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
</head>
<body>
    <div id="root"></div>
</body>
</html>

Another thing i thought was odd,

mode: production wires up uglify, env and so many other things, but it doesn't seem to minimize loaders by default, which i think maybe it should?

I have to provide: new webpack.LoaderOptionsPlugin({ minimize: true, debug: false }), or else the bundle grows a couple of KB.

@sokra

This comment has been minimized.

Member

sokra commented Jan 23, 2018

@drcmda cc @jantimon

Seems like the optimization options also affect child compilations. This seem to cause more (virtual) files than html-webpack-plugin expects. We can provide a hook for child compilers to specify if they can handle multiple initial chunks in entrypoints.

@sokra

This comment has been minimized.

Member

sokra commented Jan 23, 2018

@sokra Is it somehow possible to remove webpack webpackBootstrap code from bundle in webpack 4? Rollup produces far more cleaner output but doesn't have all plugins that webpack has.

No that's currently not possible. We may add such a mode in future, but this is not a goal of the 4.0.0 release. webpack is more focused on applications when readability of the output files is not relevant.

@Andarist

This comment has been minimized.

Andarist commented Jan 23, 2018

Super cool, list of changes is amazing ❤️ it even has a thing that I was about to request last week but didn't have time yet to create an issue ("[new] Dead branches are now removed by webpack itself")

@Andarist

This comment has been minimized.

Andarist commented Jan 23, 2018

For a config:

const webpack = require('webpack');

module.exports = {
  devtool: false,
  module: {
    defaultRules: [{
      test: /\.js$/i,
      type: "javascript/esm"
    }],
  }
}

and input

// test.js
module.exports = {
  a() { return 'a' },
  b() { return 'b' },
}

// index.js
import smth from './test'

export default function () {
	return smth.a()
}

I get

ERROR in ./src/index.js
5:8-12 "export 'default' (imported as 'smth') was not found in './test'
 @ ./src/index.js

And according to the announcement "Non-ESM can only imported via default import, everything else (including namespace import) emit errors" I was under impression that this should work (which actually was a confusing to me, so I wen to check out how this actually works)

@ooflorent

This comment has been minimized.

Member

ooflorent commented Jan 23, 2018

Output is correct. You should get an error. module is not defined in ESM and import statements are processed at compile time.

@sokra

This comment has been minimized.

Member

sokra commented Jan 23, 2018

@Andarist

module.defaultRules: use module.rules instead.

Like @ooflorent already says, you rules say: "Threat every module as ESM-only. This basically opts-out of CommonJs. So test.js contains nothing meaningful for webpack. So nothing is exported and import will show this as error.


You probably want to do this instead:

No module.rules/module.defaultRules.

// test.js
module.exports = {
  a() { return 'a' },
  b() { return 'b' },
}

// index.mjs <- MJS
import smth from './test'
// import { a } from './test' // this would show an error in .mjs but not in .js

export default function () {
	return smth.a()
}
@Andarist

This comment has been minimized.

Andarist commented Jan 23, 2018

module.defaultRules: use module.rules instead.

Thanks! I was unsure how to use it and found example of defaultRules in the source code 😄

Actually the result was kinda what I wanted. I was just confused by those statements from the announcement:

javascript/esm handles ESM more strict compared to javascript/auto:

  • Imported names need to exist on imported module
  • Non-ESM can only imported via default import, everything else (including namespace import) emit errors

And I still dont know what second point is about. What form under what rules does it allow? I have understood it this way:

  • javascript/esm is more strict than javascript/auto
  • AND imported specifiers need to exist in imported module
  • AND non-esm can be imported only as default

It seems that:

  • my understanding of that part of the announcement is incorrect
  • announcement in that part is worded incorrectly
@zanettin

This comment has been minimized.

zanettin commented Jan 23, 2018

hi!
great new features ❤️
@sokra your "docs" for common chunks seams to be outdated:

optimization: {
    splitChunks: {
      chunkGroups: {
        vendor: {
          chunks: 'initial',
          test: path.resolve(__dirname, 'node_modules'),
          name: 'vendors',
          enforce: true,
        },
      },
    },
  },

output

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.optimization.splitChunks should be one of these:
   false | object { chunks?, minSize?, minChunks?, maxAsyncRequests?, maxInitialRequests?, name?, cacheGroups? }
   -> Optimize duplication and caching by splitting chunks by shared modules and cache group
   Details:
    * configuration.optimization.splitChunks should be false
    * configuration.optimization.splitChunks has an unknown property 'chunkGroups'. These properties are valid:
      object { chunks?, minSize?, minChunks?, maxAsyncRequests?, maxInitialRequests?, name?, cacheGroups? }

you may want to change chunkGroups to cacheGroups

@pavelloz

This comment has been minimized.

pavelloz commented Jan 24, 2018

16.7.0 Darwin Kernel Version
node v8.9.3
npm 5.6.0
Wepback 4 alpha 5,

In production mode, with config:

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WriteFilePlugin = require('write-file-webpack-plugin');
const dev = process.env.NODE_ENV === 'development';
const BUILD_DIR = path.join(__dirname, 'dist');
const extractCSS = new ExtractTextPlugin('[name].css');

module.exports = {
  entry: {
    map: './src/app'
  },
  output: {
    filename: '[name].js',
    path: BUILD_DIR
  },
  plugins: [new WriteFilePlugin({ log: false, force: true }), extractCSS],
  module: {
    rules: [
      {
        test: /\.js/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader?cacheDirectory'
        }
      },
      {
        test: /(\.css|\.scss)$/,
        exclude: /node_modules/,
        use: extractCSS.extract({
          fallback: 'style-loader',
          use: ['cache-loader', 'css-loader?url=false&minimize=true', 'postcss-loader', 'sass-loader']
        })
      }
    ]
  },
  mode: dev ? 'development' : 'production'
};
webpack-cli

(node:57516) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
~/project/node_modules/webpack/lib/Chunk.js:463
                throw new Error("Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead");
                ^

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
    at Chunk.get (~/project/node_modules/webpack/lib/Chunk.js:463:9)
    at ~/project/node_modules/extract-text-webpack-plugin/dist/index.js:176:48
    at Array.forEach (<anonymous>)
    at ~/project/node_modules/extract-text-webpack-plugin/dist/index.js:171:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (~/project/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (~/project/node_modules/tapable/lib/Hook.js:35:21)
    at Compilation.seal (~/project/node_modules/webpack/lib/Compilation.js:787:27)
    at hooks.make.callAsync.err (~/project/node_modules/webpack/lib/Compiler.js:460:17)
    at _err0 (eval at create (~/project/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:11:1)
    at _addModuleChain (~/project/node_modules/webpack/lib/Compilation.js:672:11)
    at processModuleDependencies.err (~/project/node_modules/webpack/lib/Compilation.js:614:8)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
npm ERR! code ELIFECYCLE

package.json:

"devDependencies": {
    "@babel/core": "^7.0.0-beta.38",
    "@babel/preset-env": "^7.0.0-beta.38",
    "autoprefixer": "^7.2.5",
    "babel-loader": "^8.0.0-beta.0",
    "babel-plugin-transform-object-assign": "^6.22.0",
    "cache-loader": "^1.2.0",
    "css-loader": "^0.28.9",
    "extract-text-webpack-plugin": "^3.0.2",
    "node-sass": "^4.7.2",
    "postcss-calc": "^6.0.1",
    "postcss-fixes": "^2.0.1",
    "postcss-focus": "^3.0.0",
    "postcss-loader": "^2.0.10",
    "postcss-pseudoelements": "^5.0.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1",
    "webpack": "^4.0.0-alpha.5",
    "webpack-cli": "^2.0.4",
    "write-file-webpack-plugin": "^4.2.0"
  },

Cheers, great work with the 4.0 - having a blast testing and seeing improvements :)

@filipesilva filipesilva referenced this issue Jan 24, 2018

Closed

fix(@angular/cli): use webpack 4 #8611

2 of 14 tasks complete
@sokra

This comment has been minimized.

Member

sokra commented Jan 24, 2018

@pavelloz extract-text-webpack-plugin is not yet compatible.

@zanettin Thanks. I'll fix the docs.

@Andarist I'll try to reword this.

@drcmda

This comment has been minimized.

drcmda commented Jan 24, 2018

@sokra There is a bug (still in beta.0) that misinterpretates this, relates to:

[new] this is now undefined in ESM

I first thought it's babel: babel/babel#7264

According to @Andarist

I suspect that webpack thought that this was referring here to "top level", but actually it refers to the class' instance. You can file a bug issue on their boards.

This turns:

import React from 'react'

class A {
    constructor() {
        this.b = 1
    }
    method(a = this.b) {
        console.log(a)
    }
}

into method(a = undefined.b), but for some reason it seems to happen only if an import is made above (see babel github issue).

@ooflorent

This comment has been minimized.

Member

ooflorent commented Jan 24, 2018

@drcmda could you file an issue? I’d be happy to fix this. I must admit i didn’t think about this case.

@benthemonkey

This comment has been minimized.

Contributor

benthemonkey commented Jan 25, 2018

What is the reasoning behind giving each entry its own runtime chunk (when runtimeChunk: true)? Is there no longer a way to have a single "global" runtime chunk?

E.g. entries a.js and b.js will each get their own a-runtime.js and b-runtime.js

This is the biggest source of friction so far as I try to upgrade. (PS: Overall I love the simplifications + improvements made, great job!)

EDIT: I just made a quick plugin to create a single runtime chunk to fit my needs: https://gist.github.com/benthemonkey/05eceda801b8e1cee5a4dfd368caab2b

@sokra

This comment has been minimized.

Member

sokra commented Jan 25, 2018

@benthemonkey The chunk map in the runtime chunk contains only chunks referenced from that entry point. But I can see scenarios where a single runtime chunk is needed (i. e. using multiple entrypoints in a single page). If you want to you can contribute runtimeChunk: "single" in a PR.

@sokra

This comment has been minimized.

Member

sokra commented Jan 25, 2018

This alpha is over, please report bugs with the beta version as issues now.

@sokra sokra closed this Jan 25, 2018

@webpack webpack locked as resolved and limited conversation to collaborators Jan 25, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.