preface

Pure hand translation, there are also a small part of the more blunt translation, forgive that part I do not understand 😂

Big changes

  • The environment

    Nodejs 4 is not supported. The source code has been updated to a higher version of ECMAScript.

  • use

    • You must choose one of the two modes (modeor--mode) : Production or development
      • Production opens up all optimization features to create an optimized package
      • Development opens comments and hints and enables the Eval DevTool functionality
      • Production does not support listening mode, and Development has faster incremental builds
      • You can go throughoptimization.*To set up more detailed configurations (build your custom schema)
      • process.env.NODE_ENVVariables have been set in both production and development modes (only in built code, not in configuration)
      • There is also a hiddennoneMode, which disables everything

  • grammar

    • import()Always return an object with a namespace. The CommonJS module will be packaged into export default.
      • This is likely to break your code if you use itimport()To import your CommonJS code.

  • configuration

    • You no longer need to use these plugins:
      • NoEmitOnErrorsPlugin ->optimization.noEmitOnErrors(Production mode is enabled by default.)
      • ModuleConcatenationPlugin ->optimization.concatenateModules(Production mode is enabled by default.)
      • NameModulesPlugin -> optimization.nameModules(Development mode is enabled by default)
    • CommonsChunkPluginHas been removed ->optimization.splitChunks.optimization.runtimeChunk

  • JSON

    • Webpack can now handle native JSON
      • When you need to use the Loader to convert JSON to JS, you may need to addtype:"javascript/auto"
      • It is also possible to use JSON without using a Loader
    • Allows JSON to be imported using ESM syntax
      • Unused export parts of JSON modules are eliminated

  • To optimize the

    • updateuglifyjs-webpack-pluginTo the v1
      • ES2015 support

Big functions

  • The module

    • Webpack now supports the following module types:

      • Javascript /auto:(default type in webpack 3) javascript modules within all modules

        System support: CommonJS, AMD, ESM

      • Javascript/ESM: EcmaScript module, all other system module types will not be available

      • Javascript/Dynamic: only CommonJS and EcmaScript modules will not be available

      • Json: Json data, which can be obtained by require or import

      • Webassembly /experimental: WebAssembly module (currently experimental)

    • Javascript/ESM Avoiding javascript/ Auto is stricter when handling ESM

      • The imported name needs to exist in the imported module

      • Dynamic modules (non-ESM, such as CommonJS) are only available in import default

        All other methods (including namespace imports) generate an error.

    • Javascript/ESM mode will be used by default in.mjs modules

    • WebAssembly module

      • Other modules can be imported (JS and WASM)
      • Modules exported from WebAssembly are verified by ESM import
        • Active warning/error when you try to import a non-existent content from a WASM export.
      • It can only be used in asynchronously loading chunks and does not work in initialized chunks. (Significant impact on page performance).
        • throughimport()To import the WASM module

  • To optimize the

    • SideEffects: False is now supported in package.json

      • Inside the package. The jsonsideEffectGlob expressions and arrays of glob expressions are allowed

    • JSONP arrays have replaced JSONP functions with -> asynchronous script tag support, and order is no longer important.

    • Add the new option optimization.splitChunks

      Details: gist.github.com/sokra/1522d…

    • Webpack itself removes obsolete branch code

      • Before: Uglify removes unused code
      • Now: Webpack removes unused code (same case)
      • When it comes to discarded branch code it containsimport()The removal operation will be stopped.

  • grammar

    • Import () supports black-tech comments: webpackInclude and webpackExclude.

      They allow you to filter out some files when importing using dynamic expressions.

    • Using system.import () will prompt a warning

      • You can go throughRule.parser.system:trueTurn off these warnings
      • You can go throughRule.parser.sustem:falseTo disableSystem.import

  • configuration

    • Can be achieved bymodule.rules[].resolveTo configure the resolution mode. This will be combined with the global configuration.
    • optimization.minimizeHas been added to the configuration with its minimize/compress function on/off.
      • This is enabled by default in Production mode and disabled by default in Development mode
    • optimization.minimizerHas been added to the configuration to set compression handlers and options.

  • use

    • Some plug-in options have been disabled
    • The CLI has migrated to Webpack-CLI, and you need to install Webpack-CLI to use the CLI
    • The ProgressPlugin plug-in (–progress) now prints the name of the display plug-in
      • At least for plug-ins that have migrated to the new plug-in system

  • performance

    • UglifyJs is now cached and parallelized by default
    • Lots of performance improvements, especially faster incremental builds
    • RemoveParentModulesPlugin performance improvement

  • Stats

    Stats now prints display hierarchy nesting in cascaded modules

function

  • configuration
    • Module types are automatically selected in MJS, JSON, and WASM extensions. Other extensions need to passmodule.rules[].typeIn the configuration.
    • The wrongoptions.dependenciesThe configuration throws an error.
    • sideEffectsThis can be overridden by module.rules
    • output.hashFunctionIt can now be a custom hash function
      • For performance reasons, you can provide a non-Cryto hash function
    • addoutput.globalObjectConfig option to allow global object references to be selected in run time exitCode
  • The runtime
    • Incorrect chunk loads now have more information and two new attributestypeandrequest
  • devtool
    • Remove bottom comments in sourcemaps and Eval
    • Soucemap added in Evalinclude test 和excludeThe support of
  • performance
    • The AST of Webpack can be passed correctly in the loader to avoid additional repetitive parsing
    • Modules that are not used will no longer be associated
    • Add a ProfillingPlugin that can write (Chrome) profiles containing timings
    • The migration,for ofInstead offorEach
    • The migration,MapandSetInstead of Objects
    • The migration,includesInstead ofindexOf
    • Replace some string methods with regular expressions
    • Queues no longer query the same job twice
    • Use the faster MD4 hash for hashing by default
  • To optimize the
    • Shorter export names when using more than 25 exports
    • Script tag is no longer addedtext/javascriptandasyncBecause they are the default values (save some bytes)
    • Serial modules generate less code
    • Constant substitution is not required now__webpack_require__And parameters have been deleted
  • The default
    • Webpack will now press.wasm..mjs..js..jsonExtension to find files sequentially
    • output.pathinfoDevelopment mode is now enabled by default
    • Production mode disables memory caching by default
    • entryThe default point to./src
    • output.pathThe default point to./dist
    • Production mode is used by default when mode is not specified
  • grammar
    • Context supported resource query
    • inimport()The name of an entry node applied in the system changes from a warning to an error
    • Update ACorn5 to support ES2018
  • The plug-in
    • doneNow it’s an asynchronous hook

Bug fix

  • Comment creation will no longer be interrupted by */
  • Webpack no longer modifies past option objects
  • The compiler “watch-run” hook now contains the compiler itself as the first argument
  • addoutput.chunkCallbackNameTo allow the webworker template to be configured
  • usemdoule.id/loadedCan jump out of module links correctly (scope promotion)
  • OccurenceOrderPlugin now sorts modules correctly (not the other way around)
  • When callingWatching.invalidateThe timestamp of the file is retrieved from the listener
  • Fix incorrect post loader-!behavior
  • inMultiCompileraddrunandwatchRunhook
  • In the ESMthisWill beundefined
  • Can be achieved byvar.let.constTo make the correct variable declaration
  • The parser is now using module typesjavascript/dynamicorjavascript/module, parse the source code with the correct source code (module/script).
  • In case ofbuildMetaOf Null does not interrupt module loss
  • Add in the electron targetoriginal-fsThe module
  • HMRPlugin canpluginsAdd to the compiler

Internal changes

  • usetapCall to replacepluginCall (new plug-in system)
  • Migrate many abandoned plug-ins to the new plug-in system API
  • addbuildMeta.exprotsType:defaultInto the JSON module
  • Don’t remove parser functions (parserStringArray parserCalculatedStringArray)
  • Remove to removeBasicEvaluatedExpressionAnd the ability to have multiple types
  • Replace the new Buffer with buffur. from
  • Avoid forEach and use for of instead
  • withneo-asyncInstead ofasync
  • Update the exploitable and enhanced-resolve dependencies to the new major version
  • Using a Prettier

Removed features

  • Remove the module loaders

  • Remove loaderContext. The options

  • Remove the Compliation.notCacheable flag

  • Remove NoErrorsPlugin

  • Remove the Dependency. IsEqualResource

  • Remove NewWatchingPlugin

  • Remove CommonsChunkPlugin

    ​

    ​

Destructive changes for plug-ins/loaders

  • New plug-in system
    • pluginMethod backward compatibility
    • Plug-ins should useCompiler.hooks.xxx.tap(<plugin name>, fn)
  • New major version enhanced parsing
  • The Chunks template can now generate multiple assets
  • Chunk.chunks/parents/blocksIt’s no longer an array. Internally, a Set is used, and there are methods to access it.
  • Parser.scope.renamesandParser.scope.definitionsInstead of Object/Array, Map/Set.
  • Parser useStackedSetMap(LevelDB array structure) instead of an array
  • No longer set when applying plug-insCompiler.options
  • As a result of refactoring, harmonious dependencies have changed
  • Dependency.getReference()One will now be returnedweakProperties.Dependency.weakHas now beenDependencyIs used by the base class ofgetReference()From the internal base IMPL
  • Constructor arguments to allmodulechange
  • mergeContextModuleandresolveDependenciesThe options in the
  • Change and renameimport()Dependency inside
  • The migrationCompiler.resolverstoCompiler.resolverFactoryTo make it accessible to the plug-in
  • Dependency.isEqualResourcebeDependency.getResourceIdentifierreplace
  • TemplateThe methods inside are now static methods
  • Add a new RuntimeTemplate class,outputOptionsandrequestShortenerMigrate to this class
    • Many methods are updated to use RuntimeTemplate instead
    • We plan to move code that has access to the runtime to a new class
  • Module.metabeModule.buildMetaalternative
  • newModule.buildInfoandModule.factoryMeta
  • ModuleSome properties are moved to a new object
  • Add that pointcontextOf the optionsloaderContext.rootContext. Loaders may need it to create content relative to the program root
  • newthis.hotFlags to the loader context when HMR is enabled
  • buildMeta.harmonybebuildMeta.exportType: "namespace"alternative
  • The Chunk diagram has changed:
    • Previously: Chunks are related to each other through parent-child relationships
    • Now: Chunk groups are associated through parent-child relationships, and chunk groups contain chunks
    • Before: Asynchronously dependent blocks reference a set of chunks
    • Now: Asynchronous dependencies reference a single chunk group
  • File /contextTimstamps is now Maps
  • map/foreach Chunks/Modules/ParentsThe method has been removed
  • NormalModule receives the option object in the constructor
  • Add the necessary build parameters to NormalModule
  • Inside NormalModuleFactorycreateGeneratorandgeneratorHooks are generated in custom code
  • Allows custom rendering of Chunks mainfest via hooks