Shulou(Shulou.com)06/01 Report--

Recently, the project will be upgraded to webpack2.2. The original webpack version is 1.12.When upgrading the project, translate the official upgrade documents and remove some unusual configurations.

Resolve.root, resolve.fallback,resolve.modulesDirectories, and all three options are now merged into one resolve.modules option. For more information about resolving

Resolve.extensions

This configuration item no longer forces an empty string to be passed in, and this behavior is moved to the resolve.enforceExtension configuration item

Resolve.*

More configuration items that are not commonly used are no longer listed one by one. For more information, please see resolving.

Module.loaders is now converted to module.rules

The more powerful rules system replaces the old version of loader, but the old moduler.loader writing is still supported, the new naming rules are easier to understand, and it is highly recommended to use the new module.rules.

Chain loaders

Similar to webpack1.x, chained loaders continues to support chained writing, and matching files can be passed from one loader to the next loader. In the new rule.use configuration item, you can specify the loader list that you need to use through the use entry, which is needed in webpack1.x! To split different loader, the new version only supports this type of writing in module.loader.

The-loader extension is not allowed to be omitted when configuring loader. For example, style-loader cannot be abbreviated to style.

If you want to continue to use the omitted-loader method, you can configure the omitted-loader in resolveLoader.moduleExtensions, but this is not recommended

Json-loader is no longer required and does not need to be installed separately

When loader is not configured for json files, webpack automatically uses json-loader to load json files by default

In webpack 1, the resolve is relative to the matched file under the default configuration of loader. The default configuration of resolve in webpack 2 is relative to the context configuration item.

This solves some problems, such as overloading when using npm link or referencing modules other than context.

Removed module.preloaders and module.postLoaders

UglifyJsPlugin sourceMap

The sourceMap configuration item for UglifyJsPlugin now defaults to false instead of true.

This means that if you enable source map when compressing the code, or if you want the uglifyjs warning to correspond to the correct line of code, you need to set the sourceMap of UglifyJsPlugin to true.

UglifyJsPlugin warnings

The compress.warnings configuration item for UglifyJsPlugin now defaults to false instead of true.

This means that if you want to see a warning from uglifyjs, you need to set compress.warnings to true.

UglifyJsPlugin minimize loaders

UglifyJsPlugin no longer compresses loaders. For a long time to come, you will need to set up minimize:true to compress loaders. Refer to the relevant configuration items in the loader documentation.

The compression mode of loaders will be removed in webpack 3 or later.

In order to be compatible with the old loaders,loaders, you can switch to compressed mode through plug-ins:

DedupePlugin is now loaded by default

Remove webpack.optimize.DedupePlugin from your configuration file

Great changes in BannerPlugin

Instead of accepting two parameters, BannerPlugin takes an object

OccurrenceOrderPlugin no longer needs to be joined manually and is now the default

Great changes in ExtractTextWebpackPlugin

ExtractTextPlugin 1.0.0 does not work under webpack v2. You need to install ExtractTextPlugin v2.

Npm install-save-dev extract-text-webpack-plugin@beta

The configuration of the new ExtractTextPlugin plug-in has also changed greatly

Require.ensure and AMD require are asynchronous

Now these functions are always asynchronous, rather than calling their callback synchronously when chunk has already been loaded.

Note that require.ensure now relies on the native Promise. If you use require.ensure in an environment that does not support Promise, you need to add polyfill.

Use options to configure loader

The use of custom properties to configure loder is no longer allowed in webpack.config.js, for example, custom properties in the ts configuration item will not be used correctly in webpack2:

What is options?

Strictly speaking, there are two ways to configure webpack's loader. A typical options, called query, is a string that can be added to the loader name. It is more like a query string, but actually has more powerful capabilities:

But it can also be separated and written as a separate object, immediately following the loader attribute:

LoaderOptionsPlugin context

Some loader need to read some context information from the configuration. This will need to be passed in through loader options for a long time to come. See the relevant options in the loader documentation for details.

To maintain compatibility with the old loaders, this information can be passed in through the plug-in:

Debug

In webpack 1, the debug configuration item switches from loaders to debug mode. This will need to be passed through the loader configuration item for a long time to come. See the relevant options in the loader documentation for details.

The debug mode of loaders will be cancelled in webpack 3 or later versions.

To maintain compatibility with the old loaders, loader can switch to debug mode through plug-ins.

ES6 code segmentation

In webpack v1, you can use require.ensure as a method to lazily load chunks into your application:

The ES2015 module loading specification defines the import () method to dynamically load ES2015 modules at run time.

Webpack uses import () as the split point and places the requested module in a separate chunk.

Import () takes the module name as a parameter and returns a Promise.

The advantage is that if loading chunk fails, we can handle it because it is now based on Promise.

Warning: require.ensure allows you to simply name chunk with the optional third parameter, but import API doesn't provide this feature yet. If you want to keep this feature, you can continue to use require.ensure.

Dynamic expression

You can pass part of the expression to import (). This is consistent with the way CommonJS handles expressions (webpack creates a context for all files that may match).

Import () creates a separate chunk for each possible module.

Mixed use of es6, AMD and CommonJS

You are free to mix three module types (even in the same file). In this case, webpack behaves in the same way as babel and node-eps:

Note, however, that you cannot let babe parse these modules so that they can be used by webpack. You can do this by setting the following configuration to .babelrc or babel-loader.

Hints

Template string

Webpack now supports template strings in expressions. Now you can use this:

Use Promise in configuration

Webpack now supports returning Promise in the configuration file. This allows you to do asynchronous processing in the configuration file.

Advanced loader matching

Ebpack now supports more ways of matching loader.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.