diff --git a/src/content/concepts/configuration.mdx b/src/content/concepts/configuration.mdx index e5bbce18772c..cf0f8276a007 100644 --- a/src/content/concepts/configuration.mdx +++ b/src/content/concepts/configuration.mdx @@ -10,13 +10,14 @@ contributors: You may have noticed that few webpack configurations look exactly alike. This is because **webpack's configuration file is a JavaScript file that exports a webpack [configuration](/configuration/).** This configuration is then processed by webpack based upon its defined properties. -Because it's a standard Node.js CommonJS module, you **can do the following**: +Because it's a standard ECMAscript Module, you **can do the following**: -- Import other files via `require(...)` -- use utilities on npm via `require(...)` +- Import other files via `import...from...` +- use utilities on npm via `import` - use JavaScript control flow expressions, e.g. the `?:` operator - use constants or variables for often used values - write and execute functions to generate a part of the configuration +- emulate `__dirname` using `fileURLToPath(import.meta.url)` and `path.dirname()` for path resolution Use these features when appropriate. @@ -35,9 +36,13 @@ The examples below describe how webpack's configuration can be both expressive a **webpack.config.js** ```javascript -const path = require('path'); +import path from 'path'; +import { fileURLToPath } from 'url'; -module.exports = { +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +export default { mode: 'development', entry: './foo.js', output: { diff --git a/src/content/concepts/entry-points.mdx b/src/content/concepts/entry-points.mdx index 437c8799b12d..5ed8a331b8fd 100644 --- a/src/content/concepts/entry-points.mdx +++ b/src/content/concepts/entry-points.mdx @@ -23,7 +23,7 @@ Usage: `entry: string | [string]` **webpack.config.js** ```javascript -module.exports = { +export default { entry: './path/to/my/entry/file.js', }; ``` @@ -33,7 +33,7 @@ The single entry syntax for the `entry` property is a shorthand for: **webpack.config.js** ```javascript -module.exports = { +export default { entry: { main: './path/to/my/entry/file.js', }, @@ -45,7 +45,7 @@ We can also pass an array of file paths to the `entry` property which creates wh **webpack.config.js** ```javascript -module.exports = { +export default { entry: ['./src/file_1.js', './src/file_2.js'], output: { filename: 'bundle.js', @@ -62,7 +62,7 @@ Usage: `entry: { string | [string] } | {}` **webpack.config.js** ```javascript -module.exports = { +export default { entry: { app: './src/app.js', adminApp: './src/adminApp.js', @@ -91,7 +91,7 @@ An object of entry point description. You can specify the following properties. **webpack.config.js** ```javascript -module.exports = { +export default { entry: { a2: 'dependingfile.js', b2: { @@ -107,7 +107,7 @@ module.exports = { **webpack.config.js** ```javascript -module.exports = { +export default { entry: { a2: './a', b2: { @@ -122,7 +122,7 @@ module.exports = { Make sure `runtime` must not point to an existing entry point name, for example the below config would throw an error: ```javascript -module.exports = { +export default { entry: { a1: './a', b1: { @@ -136,7 +136,7 @@ module.exports = { Also `dependOn` must not be circular, the following example again would throw an error: ```javascript -module.exports = { +export defualt { entry: { a3: { import: './a', @@ -159,7 +159,7 @@ Below is a list of entry configurations and their real-world use cases: **webpack.config.js** ```javascript -module.exports = { +export deafult { entry: { main: './src/app.js', vendor: './src/vendor.js', @@ -170,7 +170,7 @@ module.exports = { **webpack.prod.js** ```javascript -module.exports = { +export default { output: { filename: '[name].[contenthash].bundle.js', }, @@ -180,7 +180,7 @@ module.exports = { **webpack.dev.js** ```javascript -module.exports = { +export default { output: { filename: '[name].bundle.js', }, @@ -198,7 +198,7 @@ T> In webpack version < 4 it was common to add vendors as a separate entry point **webpack.config.js** ```javascript -module.exports = { +export default { entry: { pageOne: './src/pageOne/index.js', pageTwo: './src/pageTwo/index.js', diff --git a/src/content/concepts/index.mdx b/src/content/concepts/index.mdx index 84ab67f61ff5..4a0c05169355 100644 --- a/src/content/concepts/index.mdx +++ b/src/content/concepts/index.mdx @@ -54,7 +54,7 @@ By default its value is `./src/index.js`, but you can specify a different (or mu **webpack.config.js** ```js -module.exports = { +export default { entry: './path/to/my/entry/file.js', }; ``` @@ -70,9 +70,13 @@ You can configure this part of the process by specifying an `output` field in yo **webpack.config.js** ```javascript -const path = require('path'); +import path from 'path'; +import { fileURLToPath } from 'url'; -module.exports = { +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +export default { entry: './path/to/my/entry/file.js', output: { path: path.resolve(__dirname, 'dist'), @@ -99,9 +103,9 @@ At a high level, **loaders** have two properties in your webpack configuration: **webpack.config.js** ```javascript -const path = require('path'); +import path from 'path'; -module.exports = { +export default { output: { filename: 'my-first-webpack.bundle.js', }, @@ -132,10 +136,10 @@ In order to use a plugin, you need to `require()` it and add it to the `plugins` **webpack.config.js** ```javascript -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const webpack = require('webpack'); //to access built-in plugins +import HtmlWebpackPlugin from 'html-webpack-plugin'; +import webpack from 'webpack'; //to access built-in plugins -module.exports = { +export default { module: { rules: [{ test: /\.txt$/, use: 'raw-loader' }], }, @@ -154,7 +158,7 @@ Using plugins in your webpack configuration is straightforward. However, there a By setting the `mode` parameter to either `development`, `production` or `none`, you can enable webpack's built-in optimizations that correspond to each environment. The default value is `production`. ```javascript -module.exports = { +export default { mode: 'production', }; ``` diff --git a/src/content/concepts/loaders.mdx b/src/content/concepts/loaders.mdx index 6c04910dd0a8..baf37e7224d5 100644 --- a/src/content/concepts/loaders.mdx +++ b/src/content/concepts/loaders.mdx @@ -34,7 +34,7 @@ And then instruct webpack to use the [`css-loader`](/loaders/css-loader) for eve **webpack.config.js** ```js -module.exports = { +export default { module: { rules: [ { test: /\.css$/, use: 'css-loader' }, @@ -61,7 +61,7 @@ This is a concise way to display loaders, and helps to maintain clean code. It a Loaders are evaluated/executed from right to left (or from bottom to top). In the example below execution starts with sass-loader, continues with css-loader and finally ends with style-loader. See ["Loader Features"](/concepts/loaders/#loader-features) for more information about loaders order. ```js -module.exports = { +export default { module: { rules: [ { diff --git a/src/content/concepts/output.mdx b/src/content/concepts/output.mdx index 20053247a762..558135a11019 100644 --- a/src/content/concepts/output.mdx +++ b/src/content/concepts/output.mdx @@ -20,7 +20,7 @@ The minimum requirement for the `output` property in your webpack configuration **webpack.config.js** ```javascript -module.exports = { +export default { output: { filename: 'bundle.js', }, @@ -34,7 +34,7 @@ This configuration would output a single `bundle.js` file into the `dist` direct If your configuration creates more than a single "chunk" (as with multiple entry points or when using plugins like CommonsChunkPlugin), you should use [substitutions](/configuration/output/#outputfilename) to ensure that each file has a unique name. ```javascript -module.exports = { +export default { entry: { app: './src/app.js', search: './src/search.js', @@ -55,7 +55,7 @@ Here's a more complicated example of using a CDN and hashes for assets: **config.js** ```javascript -module.exports = { +export default { //... output: { path: '/home/proj/cdn/assets/[fullhash]', diff --git a/src/content/concepts/plugins.mdx b/src/content/concepts/plugins.mdx index b0d67294f969..caed21db2cd6 100644 --- a/src/content/concepts/plugins.mdx +++ b/src/content/concepts/plugins.mdx @@ -26,7 +26,7 @@ A webpack **plugin** is a JavaScript object that has an [`apply`](https://develo ```javascript const pluginName = 'ConsoleLogOnBuildWebpackPlugin'; -class ConsoleLogOnBuildWebpackPlugin { +export deafult class ConsoleLogOnBuildWebpackPlugin { apply(compiler) { compiler.hooks.run.tap(pluginName, (compilation) => { console.log('The webpack build process is starting!'); @@ -34,7 +34,6 @@ class ConsoleLogOnBuildWebpackPlugin { } } -module.exports = ConsoleLogOnBuildWebpackPlugin; ``` It is recommended that the first parameter of the tap method of the compiler hook should be a camelized version of the plugin name. It is advisable to use a constant for this so it can be reused in all hooks. @@ -50,11 +49,11 @@ Depending on how you are using webpack, there are multiple ways to use plugins. **webpack.config.js** ```javascript -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const webpack = require('webpack'); //to access built-in plugins -const path = require('path'); +import HtmlWebpackPlugin from 'html-webpack-plugin'); +import webpack from 'webpack'; //to access built-in plugins +import path from 'path'; -module.exports = { +export default { entry: './path/to/my/entry/file.js', output: { filename: 'my-first-webpack.bundle.js', @@ -84,10 +83,10 @@ When using the Node API, you can also pass plugins via the `plugins` property in **some-node-script.js** ```javascript -const webpack = require('webpack'); //to access webpack runtime -const configuration = require('./webpack.config.js'); +import webpack from 'webpack'; //to access webpack runtime +import configuration from './webpack.config.js'; -let compiler = webpack(configuration); +const compiler = webpack(configuration); new webpack.ProgressPlugin().apply(compiler); diff --git a/src/content/concepts/targets.mdx b/src/content/concepts/targets.mdx index 0e00b23451e2..80ebceb33a1a 100644 --- a/src/content/concepts/targets.mdx +++ b/src/content/concepts/targets.mdx @@ -21,7 +21,7 @@ To set the `target` property, you set the target value in your webpack config: **webpack.config.js** ```javascript -module.exports = { +export default { target: 'node', }; ``` @@ -39,7 +39,7 @@ Although webpack does **not** support multiple strings being passed into the `ta **webpack.config.js** ```javascript -const path = require('path'); +import path from 'path'; const serverConfig = { target: 'node', output: { @@ -58,7 +58,7 @@ const clientConfig = { //… }; -module.exports = [serverConfig, clientConfig]; +export default [serverConfig, clientConfig]; ``` The example above will create a `lib.js` and `lib.node.js` file in your `dist` folder. diff --git a/src/content/concepts/under-the-hood.mdx b/src/content/concepts/under-the-hood.mdx index f87221a9928a..24060e93d626 100644 --- a/src/content/concepts/under-the-hood.mdx +++ b/src/content/concepts/under-the-hood.mdx @@ -39,7 +39,7 @@ When you describe an entry point - under the hood, you create a chunk group with **./webpack.config.js** ```js -module.exports = { +export default { entry: './index.js', }; ``` @@ -52,7 +52,7 @@ Another example: **./webpack.config.js** ```js -module.exports = { +export default { entry: { home: './home.js', about: './about.js', @@ -77,7 +77,7 @@ Each chunk has a corresponding **asset**. The assets are the output files - the **webpack.config.js** ```js -module.exports = { +export default { entry: './src/index.jsx', }; ``` diff --git a/src/content/configuration/cache.mdx b/src/content/configuration/cache.mdx index e228dd66e4b9..a6ac6be44d09 100644 --- a/src/content/configuration/cache.mdx +++ b/src/content/configuration/cache.mdx @@ -15,7 +15,7 @@ Cache the generated webpack modules and chunks to improve build speed. `cache` i **webpack.config.js** ```javascript -module.exports = { +export default { //... cache: false, }; @@ -34,7 +34,7 @@ Collect unused memory allocated during deserialization, only available when [`ca **webpack.config.js** ```js -module.exports = { +export default { cache: { type: 'filesystem', allowCollectingMemory: true, @@ -55,7 +55,7 @@ T> It's recommended to set `cache.buildDependencies.config: [__filename]` in you **webpack.config.js** ```javascript -module.exports = { +export default { cache: { buildDependencies: { // This makes all dependencies of this file - build dependencies @@ -77,9 +77,9 @@ Base directory for the cache. Defaults to `node_modules/.cache/webpack`. **webpack.config.js** ```javascript -const path = require('path'); +import path from 'path'; -module.exports = { +export default { //... cache: { type: 'filesystem', @@ -99,9 +99,9 @@ Locations for the cache. Defaults to `path.resolve(cache.cacheDirectory, cache.n **webpack.config.js** ```javascript -const path = require('path'); +import path from 'path'; -module.exports = { +export default { //... cache: { type: 'filesystem', @@ -120,7 +120,7 @@ Cache computation of modules which are unchanged and reference only unchanged mo **webpack.config.js** ```javascript -module.exports = { +export default { //... cache: { type: 'memory', @@ -142,7 +142,7 @@ Compression type used for the cache files. By default it is `false`. **webpack.config.js** ```javascript -module.exports = { +export default { //... cache: { type: 'filesystem', @@ -162,7 +162,7 @@ Algorithm used the hash generation. See [Node.js crypto](https://nodejs.org/api/ **webpack.config.js** ```javascript -module.exports = { +export default { //... cache: { type: 'filesystem', @@ -182,7 +182,7 @@ Time in milliseconds. `cache.idleTimeout` denotes the time period after which th **webpack.config.js** ```javascript -module.exports = { +export default { //.. cache: { type: 'filesystem', @@ -204,7 +204,7 @@ Time in milliseconds. `cache.idleTimeoutAfterLargeChanges` is the time period af **webpack.config.js** ```javascript -module.exports = { +export default { //.. cache: { type: 'filesystem', @@ -224,7 +224,7 @@ Time in milliseconds. `cache.idleTimeoutForInitialStore` is the time period afte **webpack.config.js** ```javascript -module.exports = { +export default { //.. cache: { type: 'filesystem', @@ -254,7 +254,7 @@ The amount of time in milliseconds that unused cache entries are allowed to stay **webpack.config.js** ```javascript -module.exports = { +export default { // ... cache: { type: 'filesystem', @@ -280,7 +280,7 @@ Define the lifespan of unused cache entries in the memory cache. **webpack.config.js** ```javascript -module.exports = { +export default { // ... cache: { type: 'memory', @@ -310,7 +310,7 @@ Define the lifespan of unused cache entries in the memory cache. **webpack.config.js** ```javascript -module.exports = { +export default { // ... cache: { type: 'filesystem', @@ -329,7 +329,7 @@ Cache computation of modules which are unchanged and reference only unchanged mo **webpack.config.js** ```javascript -module.exports = { +export default { //... cache: { type: 'filesystem', @@ -349,7 +349,7 @@ Name for the cache. Different names will lead to different coexisting caches. De **webpack.config.js** ```javascript -module.exports = { +export default { //... cache: { type: 'filesystem', @@ -367,7 +367,7 @@ Track and log detailed timing information for individual cache items of type `'f **webpack.config.js** ```javascript -module.exports = { +export default { //... cache: { type: 'filesystem', @@ -383,7 +383,7 @@ module.exports = { Prevent webpack from storing cache into file system. Only available when `cache.type === "filesystem"` and `cache.store === 'pack'`. ```js -module.exports = { +export default { //... cache: { type: 'filesystem', @@ -408,7 +408,7 @@ W> `pack` is the only supported mode since webpack 5.0.x **webpack.config.js** ```javascript -module.exports = { +export default { //... cache: { type: 'filesystem', @@ -426,7 +426,7 @@ Sets the `cache` type to either in memory or on the file system. The `memory` op **webpack.config.js** ```javascript -module.exports = { +export default { //... cache: { type: 'memory', @@ -445,7 +445,7 @@ Version of the cache data. Different versions won't allow to reuse the cache and **webpack.config.js** ```javascript -module.exports = { +export default { //... cache: { type: 'filesystem', diff --git a/src/content/configuration/configuration-languages.mdx b/src/content/configuration/configuration-languages.mdx index 7f8052d4538b..7d483611f13d 100644 --- a/src/content/configuration/configuration-languages.mdx +++ b/src/content/configuration/configuration-languages.mdx @@ -72,7 +72,6 @@ There are three solutions to this issue: - Modify `tsconfig.json` and add settings for `ts-node`. - Install `tsconfig-paths`. - The **first option** is to open your `tsconfig.json` file and look for `compilerOptions`. Set `target` to `"ES5"` and `module` to `"CommonJS"` (or completely remove the `module` option). The **second option** is to add settings for ts-node: @@ -82,7 +81,7 @@ You can keep `"module": "ESNext"` for `tsc`, and if you use webpack, or another ```json { "compilerOptions": { - "module": "ESNext", + "module": "ESNext" }, "ts-node": { "compilerOptions": { @@ -141,25 +140,27 @@ and then proceed to write your configuration: **webpack.config.coffee** ```coffeescript -HtmlWebpackPlugin = require('html-webpack-plugin') -webpack = require('webpack') -path = require('path') +import HtmlWebpackPlugin from 'html-webpack-plugin'; +import webpack from 'webpack'; +import path from 'path'; -config = - mode: 'production' - entry: './path/to/my/entry/file.js' +export default { + mode: 'production', + entry: './path/to/my/entry/file.js', output: - path: path.resolve(__dirname, 'dist') - filename: 'my-first-webpack.bundle.js' - module: rules: [ { - test: /\.(js|jsx)$/ - use: 'babel-loader' - } ] + path: path.resolve(process.cwd(), 'dist'), + filename: 'my-first-webpack.bundle.js', +}, + module: { + rules: [ { + test: /\.(js|jsx)$/, + use: 'babel-loader', + }, ], plugins: [ - new HtmlWebpackPlugin(template: './src/index.html') - ] + new HtmlWebpackPlugin(template: './src/index.html'), + ], + }; -module.exports = config ``` ## Babel and JSX diff --git a/src/content/configuration/configuration-types.mdx b/src/content/configuration/configuration-types.mdx index 67409df31ec3..51e92fe733cd 100644 --- a/src/content/configuration/configuration-types.mdx +++ b/src/content/configuration/configuration-types.mdx @@ -24,20 +24,21 @@ Eventually you will find the need to disambiguate in your `webpack.config.js` be - An options map (`argv`) as the second parameter. This describes the options passed to webpack, with keys such as [`output-path`](/api/cli/#flags) and [`mode`](/api/cli/#flags). ```diff --module.exports = { -+module.exports = function(env, argv) { -+ return { -+ mode: env.production ? 'production' : 'development', -+ devtool: env.production ? 'source-map' : 'eval', - plugins: [ - new TerserPlugin({ - terserOptions: { -+ compress: argv.mode === 'production' // only if `--mode production` was passed - } - }) - ] -+ }; -}; +import TerserPlugin from 'terser-webpack-plugin'; + +export default function(env, argv) { + return { + mode: env.production ? 'production' : 'development', + devtool: env.production ? 'source-map' : 'eval', + plugins: [ + new TerserPlugin({ + terserOptions: { + compress: argv.mode === 'production', // only if `--mode production` was + }, + }), + ], + }; +} ``` ## Exporting a Promise @@ -47,7 +48,7 @@ Webpack will run the function exported by the configuration file and wait for a T> It is possible to export multiple promises by wrapping them into `Promise.all([/* Your promises */]).` ```js -module.exports = () => { +export default () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve({ @@ -66,7 +67,7 @@ W> Returning a `Promise` only works when using webpack via CLI. [`webpack()`](/a Instead of exporting a single configuration object/function, you may export multiple configurations (multiple functions are supported since webpack 3.1.0). When running webpack, all configurations are built. For instance, this is useful for [bundling a library](/guides/author-libraries) for multiple [targets](/configuration/output/#outputlibrarytarget) such as AMD and CommonJS: ```js -module.exports = [ +export default [ { output: { filename: './dist-amd.js', @@ -97,7 +98,7 @@ In case you have a configuration that depends on the output of another configura **webpack.config.js** ```js -module.exports = [ +export default [ { name: 'client', target: 'web', @@ -121,13 +122,13 @@ In case you export multiple configurations, you can use the `parallelism` option **webpack.config.js** ```javascript -module.exports = [ +export const parallelism = 1; +export default [ { - //config-1 + // config-1 }, { - //config-2 + // config-2 }, ]; -module.exports.parallelism = 1; ``` diff --git a/src/content/configuration/dev-server.mdx b/src/content/configuration/dev-server.mdx index c9d916348e09..e103d008d9ef 100644 --- a/src/content/configuration/dev-server.mdx +++ b/src/content/configuration/dev-server.mdx @@ -40,9 +40,9 @@ This set of options is picked up by [webpack-dev-server](https://github.com/webp **webpack.config.js** ```javascript -const path = require('path'); +import path from 'path'; -module.exports = { +export default { //... devServer: { static: { @@ -103,9 +103,9 @@ Allows you to use custom server applications, such as `connect`, `fastify`, etc. **webpack.config.js** ```javascript -const connect = require('connect'); +import connect from 'connect'; -module.exports = { +export default { //... devServer: { app: () => connect(), @@ -122,7 +122,7 @@ This option allows you to allowlist services that are allowed to access the dev **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { allowedHosts: [ @@ -140,7 +140,7 @@ Mimicking Django's `ALLOWED_HOSTS`, a value beginning with `.` can be used as a **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { // this achieves the same effect as the first example @@ -162,7 +162,7 @@ When set to `'all'` this option bypasses host checking. **THIS IS NOT RECOMMENDE **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { allowedHosts: 'all', @@ -181,7 +181,7 @@ When set to `'auto'` this option always allows `localhost`, [`host`](#devserverh **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { allowedHosts: 'auto', @@ -204,7 +204,7 @@ This option broadcasts the server via [ZeroConf](http://www.zeroconf.org/) netwo **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { bonjour: true, @@ -229,7 +229,7 @@ You can also pass [custom options](https://github.com/watson/bonjour#initializin **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { bonjour: { @@ -251,7 +251,7 @@ Allows to set log level in the browser, e.g. before reloading, before an error o **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { client: { @@ -276,7 +276,7 @@ Shows a full-screen overlay in the browser when there are compiler errors or war **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { client: { @@ -313,7 +313,7 @@ For example, to disable compilation warnings, you can provide the following conf **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { client: { @@ -340,7 +340,7 @@ For example, to ignore errors thrown by [`AbortController.abort()`](https://deve **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { client: { @@ -368,7 +368,7 @@ Prints compilation progress in percentage in the browser. **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { client: { @@ -401,7 +401,7 @@ Tells dev-server the number of times it should try to reconnect the client. When **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { client: { @@ -420,7 +420,7 @@ npx webpack serve --client-reconnect When set to `false` it will not try to reconnect. ```javascript -module.exports = { +export default { //... devServer: { client: { @@ -439,7 +439,7 @@ npx webpack serve --no-client-reconnect You can also specify the exact number of times the client should try to reconnect. ```javascript -module.exports = { +export default { //... devServer: { client: { @@ -466,7 +466,7 @@ T> Providing `'ws'` or `'sockjs'` to [`webSocketServer`](#devserverwebsocketserv **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { client: { @@ -492,7 +492,7 @@ Using path to `CustomClient.js`, a custom WebSocket client implementation, along **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { client: { @@ -508,7 +508,7 @@ Using custom, compatible WebSocket client and server implementations: **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { client: { @@ -528,7 +528,7 @@ This option allows specifying URL to web socket server (useful when you're proxy **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { client: { @@ -556,7 +556,7 @@ You can also specify an object with the following properties: **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { client: { @@ -584,7 +584,7 @@ Enable [gzip compression](https://betterexplained.com/articles/how-to-optimize-y **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { compress: true, @@ -613,7 +613,7 @@ Provide options to [webpack-dev-middleware](https://github.com/webpack/webpack-d **webpack.config.js** ```javascript -module.exports = { +export default { devServer: { devMiddleware: { index: true, @@ -635,7 +635,7 @@ Adds headers to all responses: **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { headers: { @@ -650,7 +650,7 @@ You can also pass an array: **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { headers: [ @@ -670,7 +670,7 @@ module.exports = { You can also pass a function: ```javascript -module.exports = { +export default { //... devServer: { headers: () => { @@ -689,7 +689,7 @@ When using the [HTML5 History API](https://developer.mozilla.org/en-US/docs/Web/ **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { historyApiFallback: true, @@ -714,7 +714,7 @@ By providing an object this behavior can be controlled further using options lik **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { historyApiFallback: { @@ -733,7 +733,7 @@ When using dots in your path (common with Angular), you may need to use the `dis **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { historyApiFallback: { @@ -754,7 +754,7 @@ Specify a host to use. If you want your server to be accessible externally, spec **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { host: '0.0.0.0', @@ -807,7 +807,7 @@ Enable webpack's [Hot Module Replacement](/concepts/hot-module-replacement/) fea **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { hot: true, @@ -832,7 +832,7 @@ To enable Hot Module Replacement without page refresh as a fallback in case of b **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { hot: 'only', @@ -859,7 +859,7 @@ Setting it to `true` will listen to a socket at `/your-os-temp-dir/webpack-dev-s **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { ipc: true, @@ -878,9 +878,9 @@ You can also listen to a different socket with: **webpack.config.js** ```javascript -const path = require('path'); +import path from 'path'; -module.exports = { +export default { //... devServer: { ipc: path.join(__dirname, 'my-socket.sock'), @@ -897,7 +897,7 @@ By default, the dev-server will reload/refresh the page when file changes are de **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { liveReload: false, @@ -928,7 +928,7 @@ Provides the ability to execute a custom function when webpack-dev-server starts **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { onListening: function (devServer) { @@ -952,7 +952,7 @@ Tells dev-server to open the browser after server had been started. Set it to `t **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { open: true, @@ -977,7 +977,7 @@ To open a specified page in a browser: **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { open: ['/my-page'], @@ -996,7 +996,7 @@ To open multiple specified pages in browser: **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { open: ['/my-page', '/another-page'], @@ -1015,7 +1015,7 @@ Provide browser name to use instead of the default one: **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { open: { @@ -1038,7 +1038,7 @@ The object accepts all [open](https://www.npmjs.com/package/open) options: **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { open: { @@ -1063,7 +1063,7 @@ Specify a port number to listen for requests on: **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { port: 8080, @@ -1082,7 +1082,7 @@ npx webpack serve --port 8080 **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { port: 'auto', @@ -1109,7 +1109,7 @@ With a backend on `localhost:3000`, you can use this to enable proxying: **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { proxy: [ @@ -1129,7 +1129,7 @@ If you don't want `/api` to be passed along, we need to rewrite the path: **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { proxy: [ @@ -1148,7 +1148,7 @@ A backend server running on HTTPS with an invalid certificate will not be accept **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { proxy: [ @@ -1175,7 +1175,7 @@ E.g. for a browser request, you want to serve an HTML page, but for an API reque **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { proxy: [ @@ -1201,7 +1201,7 @@ If you want to proxy multiple, specific paths to the same target, you can use an **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { proxy: [ @@ -1219,7 +1219,7 @@ Note that requests to root won't be proxied by default. To enable root proxying, **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { devMiddleware: { @@ -1240,7 +1240,7 @@ The origin of the host header is kept when proxying by default, you can set `cha **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { proxy: [ @@ -1265,7 +1265,7 @@ Allows to set server and options (by default 'http'). **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { server: 'http', @@ -1284,7 +1284,7 @@ To serve over `HTTPS` with a self-signed certificate: **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { server: 'https', @@ -1303,7 +1303,7 @@ To serve over `HTTP/2` using [spdy](https://www.npmjs.com/package/spdy) with a s **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { server: 'spdy', @@ -1324,7 +1324,7 @@ Use the object syntax to provide your own certificate: **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { server: { @@ -1353,10 +1353,10 @@ It also allows you to set additional [TLS options](https://nodejs.org/api/tls.ht **webpack.config.js** ```javascript -const fs = require('fs'); -const path = require('path'); +import fs from 'fs'; +import path from 'path'; -module.exports = { +export default { //... devServer: { server: { @@ -1384,7 +1384,7 @@ Allows to close dev server and exit the process on `SIGINT` and `SIGTERM` signal **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { setupExitSignals: true, @@ -1403,7 +1403,7 @@ Provides the ability to execute a custom function and apply custom middleware(s) **webpack.config.js** ```javascript -module.exports = { +export default { // ... devServer: { setupMiddlewares: (middlewares, devServer) => { @@ -1456,7 +1456,7 @@ This option allows configuring options for serving static files from the directo **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { static: false, @@ -1481,7 +1481,7 @@ To watch a single directory: **webpack.config.js** ```js -module.exports = { +export default { // ... devServer: { static: ['assets'], @@ -1500,7 +1500,7 @@ To watch multiple static directories: **webpack.config.js** ```js -module.exports = { +export default { // ... devServer: { static: ['assets', 'css'], @@ -1523,9 +1523,9 @@ Tell the server where to serve the content from. This is only necessary if you w **webpack.config.js** ```javascript -const path = require('path'); +import path from 'path'; -module.exports = { +export default { //... devServer: { static: { @@ -1540,9 +1540,9 @@ Provide an array of objects in case you have multiple static folders: **webpack.config.js** ```javascript -const path = require('path'); +import path from 'path'; -module.exports = { +export default { //... devServer: { static: [ @@ -1568,7 +1568,7 @@ It is possible to configure advanced options for serving static files from [`sta **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { static: { @@ -1589,9 +1589,9 @@ Tell the server at which URL to serve [`static.directory`](#directory) content. **webpack.config.js** ```javascript -const path = require('path'); +import path from 'path'; -module.exports = { +export default { //... devServer: { static: { @@ -1607,9 +1607,9 @@ Provide an array of objects in case you have multiple static folders: **webpack.config.js** ```javascript -const path = require('path'); +import path from 'path'; -module.exports = { +export default { //... devServer: { static: [ @@ -1637,9 +1637,9 @@ Tell dev-server to use [`serveIndex`](https://github.com/expressjs/serve-index) **webpack.config.js** ```javascript -const path = require('path'); +import path from 'path'; -module.exports = { +export default { //... devServer: { static: { @@ -1671,9 +1671,9 @@ Tell dev-server to watch the files served by the [`static.directory`](#directory **webpack.config.js** ```javascript -const path = require('path'); +import path from 'path'; -module.exports = { +export default { //... devServer: { static: { @@ -1701,9 +1701,9 @@ It is possible to configure advanced options for watching static files from [`st **webpack.config.js** ```javascript -const path = require('path'); +import path from 'path'; -module.exports = { +export default { //... devServer: { static: { @@ -1726,7 +1726,7 @@ This option allows you to configure a list of globs/directories/files to watch f **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { watchFiles: ['src/**/*.php', 'public/**/*'], @@ -1739,7 +1739,7 @@ It is possible to configure advanced options for watching files. See the [`choki **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { watchFiles: { @@ -1763,7 +1763,7 @@ The current default mode is `'ws'`. This mode uses [`ws`](https://www.npmjs.com/ **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { webSocketServer: 'ws', @@ -1778,7 +1778,7 @@ Using path to `CustomServer.js`, a custom WebSocket server implementation, along **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { client: { @@ -1794,7 +1794,7 @@ Using custom, compatible WebSocket client and server implementations: **webpack.config.js** ```javascript -module.exports = { +export default { //... devServer: { client: { diff --git a/src/content/configuration/dotenv.mdx b/src/content/configuration/dotenv.mdx index 6fc2b654d67c..f3931159e2a1 100644 --- a/src/content/configuration/dotenv.mdx +++ b/src/content/configuration/dotenv.mdx @@ -21,7 +21,7 @@ Enable and configure the built-in Dotenv plugin to load environment variables fr **webpack.config.js** ```javascript -module.exports = { +export default { //... dotenv: true, }; @@ -30,7 +30,7 @@ module.exports = { Setting `dotenv` to `true` enables the plugin with default options. For custom configuration, pass an options object: ```javascript -module.exports = { +export default { //... dotenv: { prefix: 'WEBPACK_', @@ -53,7 +53,7 @@ Only expose environment variables that start with the specified prefix(es). This **webpack.config.js** ```javascript -module.exports = { +export default { //... dotenv: { prefix: 'APP_', // Only expose APP_* variables @@ -64,7 +64,7 @@ module.exports = { **Multiple prefixes:** ```javascript -module.exports = { +export default { //... dotenv: { prefix: ['APP_', 'CONFIG_'], // Expose both APP_* and CONFIG_* variables @@ -89,7 +89,7 @@ The directory from which `.env` files are loaded. **webpack.config.js** ```javascript -module.exports = { +export default { //... dotenv: { dir: './config', // Load from ./config directory @@ -100,7 +100,7 @@ module.exports = { **Disable loading:** ```javascript -module.exports = { +export default { //... dotenv: { dir: false, // Only use process.env variables @@ -121,7 +121,7 @@ Files are loaded in the order specified, with later files overriding earlier one **webpack.config.js** ```javascript -module.exports = { +export default { //... mode: 'production', dotenv: { @@ -133,7 +133,7 @@ module.exports = { **Custom patterns:** ```javascript -module.exports = { +export default { //... dotenv: { template: [ @@ -212,7 +212,7 @@ SECRET_KEY=should-not-be-exposed # Won't be exposed (no WEBPACK_ prefix) **webpack.config.js** ```javascript -module.exports = { +export default { //... dotenv: true, // Uses default prefix "WEBPACK_" }; @@ -270,7 +270,7 @@ PRIVATE_KEY=secret # Won't be exposed **webpack.config.js** ```javascript -module.exports = { +export default { //... dotenv: { prefix: ['APP_', 'CONFIG_'], @@ -285,7 +285,7 @@ Load environment files from a custom location with custom naming: **webpack.config.js** ```javascript -module.exports = { +export default { //... dotenv: { dir: './environments', diff --git a/src/content/configuration/entry-context.mdx b/src/content/configuration/entry-context.mdx index 18e4187c7734..d9d1608f9bcf 100644 --- a/src/content/configuration/entry-context.mdx +++ b/src/content/configuration/entry-context.mdx @@ -23,9 +23,9 @@ The entry object is where webpack looks to start building the bundle. The contex The base directory, an **absolute path**, for resolving entry points and loaders from the configuration. ```js -const path = require('path'); +import path from 'path'; -module.exports = { +export default { //... context: path.resolve(__dirname, 'app'), }; @@ -46,7 +46,7 @@ A dynamically loaded module is **not** an entry point. A rule to consider: one entry point per HTML page. SPA: one entry point, MPA: multiple entry points. ```js -module.exports = { +export default { //... entry: { home: './home.js', @@ -65,7 +65,7 @@ If a string or array of strings is passed, the chunk is named `main`. If an obje If an object is passed the value might be a string, array of strings, or a descriptor: ```js -module.exports = { +export default { //... entry: { home: './home.js', @@ -95,7 +95,7 @@ Descriptor syntax might be used to pass additional options to an entry point. By default, the output filename for the entry chunk is extracted from [`output.filename`](/configuration/output/#outputfilename) but you can specify a custom output filename for a specific entry: ```js -module.exports = { +export default { //... entry: { app: './app.js', @@ -112,7 +112,7 @@ Descriptor syntax was used here to pass `filename`-option to the specific entry By default, every entry chunk stores all the modules that it uses. With `dependOn` option you can share the modules from one entry chunk to another: ```js -module.exports = { +export default { //... entry: { app: { import: './app.js', dependOn: 'react-vendors' }, @@ -126,7 +126,7 @@ The `app` chunk will not contain the modules that `react-vendors` have. `dependOn` option can also accept an array of strings: ```js -module.exports = { +export default { //... entry: { moment: { import: 'moment-mini', runtime: 'runtime' }, @@ -142,7 +142,7 @@ module.exports = { Also, you can specify multiple files per entry using an array: ```js -module.exports = { +export default { //... entry: { app: { import: ['./app.js', './app2.js'], dependOn: 'react-vendors' }, @@ -158,7 +158,7 @@ If a function is passed then it will be invoked on every [make](/api/compiler-ho > Note that the `make` event triggers when webpack starts and for every invalidation when [watching for file changes](/configuration/watch/). ```js -module.exports = { +export default { //... entry: () => './demo', }; @@ -167,7 +167,7 @@ module.exports = { or ```js -module.exports = { +export default { //... entry: () => new Promise((resolve) => resolve(['./demo', './demo2'])), }; @@ -178,7 +178,7 @@ For example: you can use dynamic entries to get the actual entries from an exter **webpack.config.js** ```js -module.exports = { +export default { entry() { return fetchPathsFromSomeExternalSource(); // returns a promise that will be resolved with something like ['src/main-layout.js', 'src/admin-layout.js'] }, @@ -194,7 +194,7 @@ It allows setting the runtime chunk for an entry point and setting it to `false` `optimization.runtimeChunk` allows setting it globally for unspecified entry points. ```js -module.exports = { +export default { //... entry: { home: { diff --git a/src/content/configuration/experiments.mdx b/src/content/configuration/experiments.mdx index f3d5268cbad5..2df446b83862 100644 --- a/src/content/configuration/experiments.mdx +++ b/src/content/configuration/experiments.mdx @@ -36,7 +36,7 @@ Available options: **webpack.config.js** ```javascript -module.exports = { +export default { //... experiments: { asyncWebAssembly: true, @@ -56,7 +56,7 @@ Enable backward-compat layer with deprecation warnings for many webpack 4 APIs. - Type: `boolean` ```js -module.exports = { +export default { //... experiments: { backCompat: true, @@ -90,7 +90,7 @@ When enabled, webpack can build remote resources that begin with the `http(s):` ```javascript // webpack.config.js - module.exports = { + export default { //... experiments: { buildHttp: true, @@ -114,7 +114,7 @@ A list of allowed URIs. ```javascript // webpack.config.js - module.exports = { + export default { //... experiments: { buildHttp: { @@ -138,7 +138,7 @@ Define the location for caching remote resources. ```javascript // webpack.config.js - module.exports = { + export default { //... experiments: { buildHttp: { @@ -262,7 +262,7 @@ Use defaults of the next major webpack and show warnings in any problematic plac **webpack.config.js** ```js -module.exports = { +export default { //... experiments: { futureDefaults: true, @@ -322,7 +322,7 @@ Compile entrypoints and dynamic `import`s only when they are in use. It can be u - Example 1: ```js - module.exports = { + export default { // … experiments: { lazyCompilation: true, @@ -333,7 +333,7 @@ Compile entrypoints and dynamic `import`s only when they are in use. It can be u - Example 2: ```js - module.exports = { + export default { // … experiments: { lazyCompilation: { @@ -357,7 +357,7 @@ Compile entrypoints and dynamic `import`s only when they are in use. It can be u Once enabled, webpack will output ECMAScript module syntax whenever possible. For instance, `import()` to load chunks, ESM exports to expose chunk data, among others. ```js -module.exports = { +export default { experiments: { outputModule: true, }, diff --git a/src/content/configuration/extending-configurations.mdx b/src/content/configuration/extending-configurations.mdx index 8d9e2dae11e5..fa06278d5e44 100644 --- a/src/content/configuration/extending-configurations.mdx +++ b/src/content/configuration/extending-configurations.mdx @@ -18,7 +18,7 @@ W> **This option is not supported via the Node API**: Extends will have no effec **base.webpack.config.js** ```javascript -module.exports = { +export default { module: { rules: [ { @@ -43,7 +43,7 @@ module.exports = { **webpack.config.js** ```javascript -module.exports = { +export default { extends: path.resolve(__dirname, './base.webpack.config.js'), entry: './src/index.js', output: { @@ -62,7 +62,7 @@ Configurations from the `extends` property are merged from right to left, meanin **js.webpack.config.js** ```javascript -module.exports = { +export default { module: { rules: [ { @@ -78,7 +78,7 @@ module.exports = { **css.webpack.config.js** ```javascript -module.exports = { +export default { module: { rules: [ { @@ -93,7 +93,7 @@ module.exports = { **webpack.config.js** ```javascript -module.exports = { +export default { extends: [ path.resolve(__dirname, './js.webpack.config.js'), path.resolve(__dirname, './css.webpack.config.js'), @@ -113,7 +113,7 @@ You can override configurations from the extended configuration by passing the s **base.webpack.config.js** ```javascript -module.exports = { +export default { output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', @@ -124,7 +124,7 @@ module.exports = { **webpack.config.js** ```javascript -module.exports = { +export default { extends: path.resolve(__dirname, './base.webpack.config.js'), entry: './src/index.js', // overriding the output path and filename @@ -142,7 +142,7 @@ You can also load configuration from third-party packages by passing the package **webpack.config.js** ```javascript -module.exports = { +export default { extends: require.resolve('webpack-config-foo'), entry: './src/index.js', output: { diff --git a/src/content/configuration/externals.mdx b/src/content/configuration/externals.mdx index 4515cb62f956..d267afa7acd2 100644 --- a/src/content/configuration/externals.mdx +++ b/src/content/configuration/externals.mdx @@ -45,7 +45,7 @@ For example, to include [jQuery](https://jquery.com/) from a CDN instead of bund **webpack.config.js** ```javascript -module.exports = { +export default { //... externals: { jquery: 'jQuery', @@ -72,7 +72,7 @@ Depending on the [externalsType](#externalstype), this could be the name of the You can also use the shortcut syntax if you're defining only 1 external: ```javascript -module.exports = { +export default { //... externals: 'jquery', }; @@ -81,7 +81,7 @@ module.exports = { equals to ```javascript -module.exports = { +export default { //... externals: { jquery: 'jquery', @@ -94,7 +94,7 @@ You can specify the [external library type](#externalstype) to the external with For example, if the external library is a [CommonJS module](#externalstypecommonjs), you can specify ```javascript -module.exports = { +export default { //... externals: { jquery: 'commonjs jquery', @@ -105,7 +105,7 @@ module.exports = { ### [string] ```javascript -module.exports = { +export default { //... externals: { subtract: ['./math', 'subtract'], @@ -120,7 +120,7 @@ When the `externalsType` is `commonjs`, this example would translate to `require Similar to the [string syntax](#string), you can specify the external library type with the `${externalsType} ${libraryName}` syntax, in the first item of the array, for example: ```javascript -module.exports = { +export default { //... externals: { subtract: ['commonjs ./math', 'subtract'], @@ -133,7 +133,7 @@ module.exports = { W> An object with `{ root, amd, commonjs, ... }` is only allowed for [`libraryTarget: 'umd'`](/configuration/output/#outputlibrarytarget) and [`externalsType: 'umd'`](#externalstype). It's not allowed for other library targets. ```javascript -module.exports = { +export default { //... externals: { react: 'react', @@ -188,7 +188,7 @@ As an example, to externalize all imports where the import path matches a regula **webpack.config.js** ```javascript -module.exports = { +export default { //... externals: [ function ({ context, request }, callback) { @@ -209,7 +209,7 @@ Other examples using different module formats: **webpack.config.js** ```javascript -module.exports = { +export default { externals: [ function (ctx, callback) { // The external is a `commonjs2` module located in `@scope/library` @@ -222,7 +222,7 @@ module.exports = { **webpack.config.js** ```javascript -module.exports = { +export default { externals: [ function (ctx, callback) { // The external is a global variable called `nameOfGlobal`. @@ -235,7 +235,7 @@ module.exports = { **webpack.config.js** ```javascript -module.exports = { +export default { externals: [ function (ctx, callback) { // The external is a named export in the `@scope/library` module. @@ -248,7 +248,7 @@ module.exports = { **webpack.config.js** ```javascript -module.exports = { +export default { externals: [ function (ctx, callback) { // The external is a UMD module @@ -270,7 +270,7 @@ Every dependency that matches the given regular expression will be excluded from **webpack.config.js** ```javascript -module.exports = { +export default { //... externals: /^(jquery|\$)$/i, }; @@ -285,7 +285,7 @@ Sometimes you may want to use a combination of the above syntaxes. This can be d **webpack.config.js** ```javascript -module.exports = { +export default { //... externals: [ { @@ -326,7 +326,7 @@ Specify externals by layer. **webpack.config.js** ```javascript -module.exports = { +export default { externals: { byLayer: { layer: { @@ -370,7 +370,7 @@ Supported types: **webpack.config.js** ```javascript -module.exports = { +export default { //... externalsType: 'promise', }; @@ -389,7 +389,7 @@ import fs from 'fs-extra'; **webpack.config.js** ```javascript -module.exports = { +export default { // ... externalsType: 'commonjs', externals: { @@ -420,7 +420,7 @@ jq('.my-element').animate(/* ... */); **webpack.config.js** ```javascript -module.exports = { +export default { // ... externalsType: 'global', externals: { @@ -455,7 +455,7 @@ jq('.my-element').animate(/* ... */); **webpack.config.js** ```js -module.exports = { +export default { experiments: { outputModule: true, }, @@ -495,7 +495,7 @@ async function foo() { **webpack.config.js** ```js -module.exports = { +export default { externalsType: 'import', externals: { jquery: 'jquery', @@ -546,7 +546,7 @@ async function foo() { **webpack.config.js** ```js -module.exports = { +export default { externalsType: 'module-import', externals: { jquery: 'jquery', @@ -582,19 +582,17 @@ Note that the output bundle will have an `import` or `import()` statement. When a module is not imported via `import` or `import()`, webpack will use the `"module"` externals type as a fallback. If you want to use a different kind of externals as a fallback, you can specify it with a function in the `externals` option. For example: ```js -module.exports = { - externalsType: "module-import", +export default { + externalsType: 'module-import', externals: [ - function ( - { request, dependencyType }, - callback - ) { - if (dependencyType === "commonjs") { + function ({ request, dependencyType }, callback) { + if (dependencyType === 'commonjs') { return callback(null, `node-commonjs ${request}`); } callback(); }, - ] + ], +}; ``` ### externalsType.node-commonjs @@ -611,7 +609,7 @@ jq('.my-element').animate(/* ... */); **webpack.config.js** ```js -module.export = { +export default { experiments: { outputModule: true, }, @@ -649,7 +647,7 @@ You can use `node-commonjs` to ensure that the prototype chain is preserved: ```js const { builtinModules } = require('module'); -module.exports = { +export default { experiments: { outputModule: true }, externalsType: 'node-commonjs', externals: ({ request }, callback) => { @@ -690,7 +688,7 @@ jq('.my-element').animate(/* ... */); **webpack.config.js** ```javascript -module.exports = { +export default { // ... externalsType: 'promise', externals: { @@ -720,7 +718,7 @@ jq('.my-element').animate(/* ... */); **webpack.config.js** ```javascript -module.exports = { +export default { // ... externalsType: 'self', externals: { @@ -743,7 +741,7 @@ Specify the default type of externals as `'script'`. Webpack will load the exter #### Syntax ```javascript -module.exports = { +export default { externalsType: 'script', externals: { packageName: [ @@ -759,7 +757,7 @@ module.exports = { You can also use the shortcut syntax if you're not going to specify any properties: ```javascript -module.exports = { +export default { externalsType: 'script', externals: { packageName: 'global@http://example.com/script.js', // no properties here @@ -776,7 +774,7 @@ Let's load a `lodash` from CDN: **webpack.config.js** ```js -module.exports = { +export default { // ... externalsType: 'script', externals: { @@ -795,7 +793,7 @@ console.log(_.head([1, 2, 3])); Here's how we specify properties for the above example: ```js -module.exports = { +export default { // ... externalsType: 'script', externals: { @@ -834,7 +832,7 @@ jq('.my-element').animate(/* ... */); **webpack.config.js** ```javascript -module.exports = { +export default { // ... externalsType: 'this', externals: { @@ -864,7 +862,7 @@ jq('.my-element').animate(/* ... */); **webpack.config.js** ```javascript -module.exports = { +export default { // ... externalsType: 'var', externals: { @@ -894,7 +892,7 @@ jq('.my-element').animate(/* ... */); **webpack.config.js** ```javascript -module.exports = { +export default { // ... externalsType: 'window', externals: { @@ -936,7 +934,7 @@ Using `node` preset will not bundle built-in modules and treats them as external **webpack.config.js** ```js -module.exports = { +export default { // ... externalsPresets: { node: true, diff --git a/src/content/configuration/infrastructureLogging.mdx b/src/content/configuration/infrastructureLogging.mdx index 49790173c35c..6a1436b2b970 100644 --- a/src/content/configuration/infrastructureLogging.mdx +++ b/src/content/configuration/infrastructureLogging.mdx @@ -18,7 +18,7 @@ Append lines to the output instead of updating existing output, useful for statu **webpack.config.js** ```javascript -module.exports = { +export default { //... infrastructureLogging: { appendOnly: true, @@ -45,7 +45,7 @@ Enable colorful output for infrastructure level logging. This option is used onl **webpack.config.js** ```javascript -module.exports = { +export default { //... infrastructureLogging: { colors: true, @@ -71,7 +71,7 @@ Customize the console used for infrastructure level logging. **webpack.config.js** ```javascript -module.exports = { +export default { //... infrastructureLogging: { console: yourCustomConsole(), @@ -88,7 +88,7 @@ Enable debug information of specified loggers such as plugins or loaders. Simila **webpack.config.js** ```javascript -module.exports = { +export default { //... infrastructureLogging: { level: 'info', @@ -115,7 +115,7 @@ Possible values: **webpack.config.js** ```javascript -module.exports = { +export default { //... infrastructureLogging: { level: 'info', @@ -134,7 +134,7 @@ Stream used for logging output. Defaults to `process.stderr`. This option is use **webpack.config.js** ```javascript -module.exports = { +export default { //... infrastructureLogging: { stream: process.stderr, diff --git a/src/content/configuration/mode.mdx b/src/content/configuration/mode.mdx index 833f1c7d5b25..5434f5e467b2 100644 --- a/src/content/configuration/mode.mdx +++ b/src/content/configuration/mode.mdx @@ -22,7 +22,7 @@ Providing the `mode` configuration option tells webpack to use its built-in opti Provide the `mode` option in the config: ```javascript -module.exports = { +export default { mode: 'development', }; ``` @@ -49,7 +49,7 @@ T> If `mode` is not provided via configuration or CLI, CLI will use any valid `N ```js // webpack.development.config.js -module.exports = { +export default { mode: 'development', }; ``` @@ -58,7 +58,7 @@ module.exports = { ```js // webpack.production.config.js -module.exports = { +export default { mode: 'production', }; ``` @@ -67,7 +67,7 @@ module.exports = { ```js // webpack.custom.config.js -module.exports = { +export default { mode: 'none', }; ``` @@ -80,7 +80,7 @@ var config = { //... }; -module.exports = (env, argv) => { +export default (env, argv) => { if (argv.mode === 'development') { config.devtool = 'source-map'; } diff --git a/src/content/configuration/module.mdx b/src/content/configuration/module.mdx index 4755defe5520..0655d55bd332 100644 --- a/src/content/configuration/module.mdx +++ b/src/content/configuration/module.mdx @@ -35,7 +35,7 @@ An array of rules applied by default for modules. See [source code](https://github.com/webpack/webpack/blob/dc4d97429b2013f7770ba785721b65cf82c2ef04/lib/config/defaults.js#L608) for details. ```js -module.exports = { +export default { module: { defaultRules: [ '...', // you can use "..." to reference those rules applied by webpack by default @@ -47,7 +47,7 @@ module.exports = { Starting with webpack 5.87.0, falsy values including `0`, `""`, `false`, `null` and `undefined` are allowed to pass to `module.defaultRules` to conditionally disable specific rules. ```js -module.exports = { +export default { module: { defaultRules: [ false && @@ -68,7 +68,7 @@ It's possible to configure all generators' options in one place with a `module.g **webpack.config.js** ```js -module.exports = { +export default { module: { generator: { asset: { @@ -211,7 +211,7 @@ Similar to the [`module.generator`](#modulegenerator), you can configure all par **webpack.config.js** ```js -module.exports = { +export default { module: { parser: { asset: { @@ -307,7 +307,7 @@ module.exports = { Configure options for the CSS parser. ```js -module.exports = { +export default { module: { parser: { css: { @@ -328,7 +328,7 @@ This option enables the handling of `@import` at-rules in CSS files. When set to - Example: ```js - module.exports = { + export default { module: { parser: { css: { @@ -367,7 +367,7 @@ This option enables or disables the handling of URLs in functions such as `url() - Example: ```js - module.exports = { + export default { module: { parser: { css: { @@ -400,7 +400,7 @@ This option enables the use of ES modules named export for CSS exports. When set - Example: ```js - module.exports = { + export default { module: { parser: { css: { @@ -453,7 +453,7 @@ Configure how CSS content will be exported. - Example: ```js - module.exports = { + export default { module: { parser: { css: { @@ -476,7 +476,7 @@ Possible values: `'link' | 'text' | 'css-style-sheet' Configure options for JavaScript parser. ```js -module.exports = { +export default { module: { parser: { javascript: { @@ -499,7 +499,7 @@ Enable [magic comments](/api/module-methods/#magic-comments) support for CommonJ - Example: ```js - module.exports = { + export default { module: { parser: { javascript: { @@ -525,7 +525,7 @@ Specify the global [fetchPriority](https://developer.mozilla.org/en-US/docs/Web/ - Example: ```js - module.exports = { + export default { module: { parser: { javascript: { @@ -545,7 +545,7 @@ Specifies global mode for dynamic import. - Example: ```js - module.exports = { + export default { module: { parser: { javascript: { @@ -565,7 +565,7 @@ Specifies global prefetch for dynamic import. - Example: ```js - module.exports = { + export default { module: { parser: { javascript: { @@ -585,7 +585,7 @@ Specifies global preload for dynamic import. - Example: ```js - module.exports = { + export default { module: { parser: { javascript: { @@ -605,7 +605,7 @@ Specifies the behavior of invalid export names in `\"import ... from ...\"` and - Example: ```js - module.exports = { + export default { module: { parser: { javascript: { @@ -625,7 +625,7 @@ Specifies the behavior of invalid export names in `\"import ... from ...\"`. - Example: ```js - module.exports = { + export default { module: { parser: { javascript: { @@ -645,7 +645,7 @@ Enable or disable evaluating `import.meta`. - Example: ```js - module.exports = { + export default { module: { parser: { javascript: { @@ -665,7 +665,7 @@ Enable/disable evaluating [`import.meta.webpackContext`](/api/module-variables/# - Example: ```js - module.exports = { + export default { module: { parser: { javascript: { @@ -685,7 +685,7 @@ Set the module to `'strict'` or `'non-strict'` mode. This can affect the module' - Example: ```js - module.exports = { + export default { module: { parser: { javascript: { @@ -705,7 +705,7 @@ Specifies the behavior of invalid export names in `\"export ... from ...\"`. Thi - Example: ```js - module.exports = { + export default { module: { parser: { javascript: { @@ -724,7 +724,7 @@ Enable parsing of `new URL()` syntax. - Example: ```js - module.exports = { + export default { module: { parser: { javascript: { @@ -764,7 +764,7 @@ Return `ast`, `comments`, and `semicolons` to ensure webpack’s AST analysis wo - Example: ```js - module.exports = { + export default { module: { parser: { javascript: { @@ -797,7 +797,7 @@ Return `ast`, `comments`, and `semicolons` to ensure webpack’s AST analysis wo Configure options for json parser. ```js -module.exports = { +export default { module: { parser: { json: { @@ -817,7 +817,7 @@ The depth of json dependency flagged as `exportInfo`. By default, it is set to ` - Example: ```js -module.exports = { +export default { module: { parser: { json: { @@ -847,7 +847,7 @@ Allow named exports for json of object type. - Example: ```js -module.exports = { +export default { module: { parser: { json: { @@ -872,7 +872,7 @@ Function to parser content and return JSON. ```js const json5 = require('json5'); -module.exports = { +export default { module: { parser: { json: { @@ -897,7 +897,7 @@ T> You may need to use `[\\/]` in regex to match `\` on Windows and `/` on Mac/L **webpack.config.js** ```javascript -module.exports = { +export default { //... module: { noParse: /jquery|lodash|src[\\/]vendor[\\/]somelib/, @@ -906,7 +906,7 @@ module.exports = { ``` ```javascript -module.exports = { +export default { //... module: { noParse: (content) => @@ -927,7 +927,7 @@ Cache the resolution of module requests. There are a couple of defaults for `mod **webpack.config.js** ```javascript -module.exports = { +export default { //... module: { unsafeCache: false, @@ -1001,7 +1001,7 @@ A [`Condition`](#condition) that allows you to match the import assertion of a d **webpack.config.js** ```javascript -module.exports = { +export default { // ... module: { rules: [ @@ -1030,7 +1030,7 @@ A [`Condition`](#condition) that allows you to match the child compiler name. **webpack.config.js** ```javascript -module.exports = { +export default { // ... name: 'compiler', module: { @@ -1111,7 +1111,7 @@ Allows to filter/match by layer of the issuer. **webpack.config.js** ```js -module.exports = { +export default { // ... module: { rules: [ @@ -1132,7 +1132,7 @@ Specify the layer in which the module should be placed in. A group of modules co **webpack.config.js** ```js -module.exports = { +export default { // ... module: { rules: [ @@ -1154,7 +1154,7 @@ Extracts existing source map data from files (from their `//# sourceMappingURL` **webpack.config.js** ```js -module.exports = { +export default { // ... module: { rules: [ @@ -1184,7 +1184,7 @@ You can match config rules to data uri with `mimetype`. **webpack.config.js** ```js -module.exports = { +export default { // ... module: { rules: [ @@ -1206,7 +1206,7 @@ An array of [`Rules`](#rule) from which only the first matching Rule is used whe **webpack.config.js** ```javascript -module.exports = { +export default { //... module: { rules: [ @@ -1250,7 +1250,7 @@ However, parser plugins may accept more than only a boolean. For example, the in **Examples** (parser options by the default plugins): ```js -module.exports = { +export default { //... module: { rules: [ @@ -1292,7 +1292,7 @@ If a module source size is less than `maxSize` then module will be injected into **webpack.config.js** ```js -module.exports = { +export default { //... module: { rules: [ @@ -1314,7 +1314,7 @@ When a function is given, returning `true` tells webpack to inject the module in **webpack.config.js** ```js -module.exports = { +export default { //... module: { rules: [ @@ -1346,7 +1346,7 @@ When `Rule.generator.dataUrl` is used as an object, you can configure two proper **webpack.config.js** ```js -module.exports = { +export default { //... module: { rules: [ @@ -1367,7 +1367,7 @@ module.exports = { When used as a function, it executes for every module and must return a data URI string. ```js -module.exports = { +export default { //... module: { rules: [ @@ -1397,7 +1397,7 @@ Opt out of writing assets from [Asset Modules](/guides/asset-modules/), you migh - Example: ```js - module.exports = { + export default { // … module: { rules: [ @@ -1420,7 +1420,7 @@ The same as [`output.assetModuleFilename`](/configuration/output/#outputassetmod **webpack.config.js** ```js -module.exports = { +export default { //... output: { assetModuleFilename: 'images/[hash][ext][query]', @@ -1451,7 +1451,7 @@ Customize `publicPath` for specific Asset Modules. - Available: ```js -module.exports = { +export default { //... output: { publicPath: 'static/', @@ -1478,7 +1478,7 @@ Emit the asset in the specified folder relative to 'output.path'. This should on - Available: ```js -module.exports = { +export default { //... output: { publicPath: 'static/', @@ -1509,7 +1509,7 @@ A [`Condition`](#condition) matched with the resource query. This option is used **webpack.config.js** ```javascript -module.exports = { +export default { //... module: { rules: [ @@ -1532,9 +1532,9 @@ If `Rule.type` is set to `'json'` then `Rules.parser.parse` option may be a func **webpack.config.js** ```javascript -const toml = require('toml'); +import toml from 'toml'; -module.exports = { +export default { //... module: { rules: [ @@ -1566,7 +1566,7 @@ Match the used schema, e.g., `data`, `http`. **webpack.config.js** ```js -module.exports = { +export default { module: { rules: [ { @@ -1599,7 +1599,7 @@ Possible values: `'javascript/auto' | 'javascript/dynamic' | 'javascript/esm' | **webpack.config.js** ```javascript -module.exports = { +export default { //... module: { rules: [ @@ -1623,7 +1623,7 @@ module.exports = { See use case of `css/auto` module type [here](https://github.com/webpack/webpack/issues/16572). Make sure to enable [`experiments.css`](/configuration/experiments/#experimentscss) to use `css/auto`. ```js -module.exports = { +export default { target: 'web', mode: 'development', experiments: { @@ -1658,7 +1658,7 @@ Loaders can be chained by passing multiple loaders, which will be applied from r **webpack.config.js** ```javascript -module.exports = { +export default { //... module: { rules: [ @@ -1701,7 +1701,7 @@ The same shortcut as an array can be used for the return value (i.e. `use: [ 'st **webpack.config.js** ```javascript -module.exports = { +export default { //... module: { rules: [ @@ -1762,7 +1762,7 @@ export default 'overridden footer'; **webpack.js.org** ```javascript -module.exports = { +export default { resolve: { alias: { footer: './footer/default.js', @@ -1776,7 +1776,7 @@ When creating a bundle with this configuration, `console.log(footer)` will outpu **webpack.js.org** ```javascript -module.exports = { +export default { resolve: { alias: { footer: './footer/default.js', @@ -1807,7 +1807,7 @@ When enabled, you should provide the file extension when `import`ing a module in **webpack.config.js** ```js -module.exports = { +export default { // ... module: { rules: [ @@ -1833,7 +1833,7 @@ A [`Condition`](#condition) that allows you to match the imports based on specif **webpack.config.js** ```javascript -module.exports = { +export default { // ... module: { rules: [ @@ -1874,9 +1874,9 @@ Conditions can be one of these: **Example:** ```javascript -const path = require('path'); +import path from 'path'; -module.exports = { +export default { //... module: { rules: [ @@ -1914,7 +1914,7 @@ It also breaks if the options object cannot be stringified (i.e. circular JSON). **webpack.config.js** ```javascript -module.exports = { +export default { //... module: { rules: [ @@ -1943,7 +1943,7 @@ The `info` object parameter has the following fields: **webpack.config.js** ```javascript -module.exports = { +export default { //... module: { rules: [ @@ -1981,7 +1981,7 @@ Here are the available options with their [defaults](https://github.com/webpack/ **webpack.config.js** ```javascript -module.exports = { +export default { //... module: { exprContextCritical: true, diff --git a/src/content/configuration/node.mdx b/src/content/configuration/node.mdx index ac10ac4f9a4a..5452da45334d 100644 --- a/src/content/configuration/node.mdx +++ b/src/content/configuration/node.mdx @@ -26,7 +26,7 @@ W> As of webpack 5, You can configure only `global`, `__filename`/`import.meta.f **webpack.config.js** ```javascript -module.exports = { +export default { //... node: { global: false, diff --git a/src/content/configuration/optimization.mdx b/src/content/configuration/optimization.mdx index 7256d4eb759b..7e8ee87ec53c 100644 --- a/src/content/configuration/optimization.mdx +++ b/src/content/configuration/optimization.mdx @@ -31,7 +31,7 @@ Tells webpack to check the incompatible types of WebAssembly modules when they a **webpack.config.js** ```js -module.exports = { +export default { //... optimization: { checkWasmTypes: false, @@ -61,7 +61,7 @@ The following string values are supported: **webpack.config.js** ```js -module.exports = { +export default { //... optimization: { chunkIds: 'named', @@ -74,7 +74,7 @@ By default, a minimum length of 3 digits is used when `optimization.chunkIds` is **webpack.config.js** ```js -module.exports = { +export default { //... optimization: { chunkIds: false, @@ -97,7 +97,7 @@ By default `optimization.concatenateModules` is enabled in `production` [mode](/ **webpack.config.js** ```js -module.exports = { +export default { //... optimization: { concatenateModules: true, @@ -114,7 +114,7 @@ Use the `optimization.emitOnErrors` to emit assets whenever there are errors whi **webpack.config.js** ```js -module.exports = { +export default { //... optimization: { emitOnErrors: true, @@ -139,7 +139,7 @@ By default, `optimization.avoidEntryIife` is enabled in `production` [mode](/con **webpack.config.js** ```js -module.exports = { +export default { //... optimization: { avoidEntryIife: true, @@ -158,7 +158,7 @@ Tells webpack to determine and flag chunks which are subsets of other chunks in **webpack.config.js** ```js -module.exports = { +export default { //... optimization: { flagIncludedChunks: true, @@ -175,7 +175,7 @@ module.exports = { **webpack.config.js** ```js -module.exports = { +export default { //... optimization: { innerGraph: false, @@ -203,7 +203,7 @@ The following values are supported: **webpack.config.js** ```js -module.exports = { +export default { //... optimization: { mangleExports: true, @@ -220,7 +220,7 @@ When set to `true` tells webpack to reduce the size of WASM by changing imports **webpack.config.js** ```js -module.exports = { +export default { //... optimization: { mangleWasmImports: true, @@ -237,7 +237,7 @@ Tells webpack to merge chunks which contain the same modules. Setting `optimizat **webpack.config.js** ```js -module.exports = { +export default { //... optimization: { mergeDuplicateChunks: false, @@ -254,7 +254,7 @@ Tell webpack to minimize the bundle using the [TerserPlugin](/plugins/terser-web **webpack.config.js** ```js -module.exports = { +export default { //... optimization: { minimize: false, @@ -275,7 +275,7 @@ Allows you to override the default minimizer by providing a different one or mor ```js const TerserPlugin = require('terser-webpack-plugin'); -module.exports = { +export default { optimization: { minimizer: [ new TerserPlugin({ @@ -292,7 +292,7 @@ module.exports = { Or, as function: ```js -module.exports = { +export default { optimization: { minimizer: [ (compiler) => { @@ -329,7 +329,7 @@ By default, webpack would set `optimization.minimizer` to [the following value]( Which can be accessed with `'...'` in case you want to keep it when customizing `optimization.minimizer`: ```js -module.exports = { +export default { optimization: { minimizer: [new CssMinimizer(), '...'], }, @@ -356,7 +356,7 @@ The following string values are supported: **webpack.config.js** ```js -module.exports = { +export default { //... optimization: { moduleIds: 'deterministic', @@ -369,7 +369,7 @@ module.exports = { **webpack.config.js** ```js -module.exports = { +export default { //... optimization: { moduleIds: false, @@ -400,7 +400,7 @@ Possible values: **webpack.config.js** ```js -module.exports = { +export default { //... optimization: { nodeEnv: 'production', @@ -421,7 +421,7 @@ By default `optimization.portableRecords` is disabled. Automatically enabled if **webpack.config.js** ```js -module.exports = { +export default { //... optimization: { portableRecords: true, @@ -438,7 +438,7 @@ Tells webpack to figure out which exports are provided by modules to generate mo **webpack.config.js** ```js -module.exports = { +export default { //... optimization: { providedExports: false, @@ -455,7 +455,7 @@ Adds an additional hash compilation pass after the assets have been processed to **webpack.config.js** ```js -module.exports = { +export default { //... optimization: { realContentHash: false, @@ -472,7 +472,7 @@ Tells webpack to detect and remove modules from chunks when these modules are al **webpack.config.js** ```js -module.exports = { +export default { //... optimization: { removeAvailableModules: true, @@ -491,7 +491,7 @@ Tells webpack to detect and remove chunks which are empty. Setting `optimization **webpack.config.js** ```js -module.exports = { +export default { //... optimization: { removeEmptyChunks: false, @@ -508,7 +508,7 @@ Setting `optimization.runtimeChunk` to `true` or `'multiple'` adds an additional **webpack.config.js** ```js -module.exports = { +export default { //... optimization: { runtimeChunk: { @@ -523,7 +523,7 @@ The value `'single'` instead creates a runtime file to be shared for all generat **webpack.config.js** ```js -module.exports = { +export default { //... optimization: { runtimeChunk: { @@ -542,7 +542,7 @@ W> Imported modules are initialized for each runtime chunk separately, so if you **webpack.config.js** ```js -module.exports = { +export default { //... optimization: { runtimeChunk: { @@ -575,7 +575,7 @@ T> Please note that `sideEffects` should be in the npm module's `package.json` f **webpack.config.js** ```js -module.exports = { +export default { //... optimization: { sideEffects: true, @@ -586,7 +586,7 @@ module.exports = { To only use the manual flag and do not analyse source code: ```js -module.exports = { +export default { //... optimization: { sideEffects: 'flag', @@ -614,7 +614,7 @@ Dead code elimination in minimizers will benefit from this and can remove unused **webpack.config.js** ```js -module.exports = { +export default { //... optimization: { usedExports: false, @@ -625,7 +625,7 @@ module.exports = { To opt-out from used exports analysis per runtime: ```js -module.exports = { +export default { //... optimization: { usedExports: 'global', diff --git a/src/content/configuration/other-options.mdx b/src/content/configuration/other-options.mdx index aa5becca8abd..8221c4173c3d 100644 --- a/src/content/configuration/other-options.mdx +++ b/src/content/configuration/other-options.mdx @@ -35,7 +35,7 @@ Set the value of `require.amd` or `define.amd`. Setting `amd` to `false` will di **webpack.config.js** ```javascript -module.exports = { +export default { //... amd: { jQuery: true, @@ -59,7 +59,7 @@ Fail out on the first error instead of tolerating it. By default webpack will lo **webpack.config.js** ```javascript -module.exports = { +export default { //... bail: true, }; @@ -85,7 +85,7 @@ Remember that current configuration will not compile until its dependencies are **webpack.config.js** ```js -module.exports = [ +export default [ { name: 'client', target: 'web', @@ -112,7 +112,7 @@ Tells webpack to ignore specific warnings. This can be done with a `RegExp`, a c `ignoreWarnings` must be an `array` of any or all of the above. ```javascript -module.exports = { +export default { //... ignoreWarnings: [ { @@ -139,7 +139,7 @@ For example, you can define a new variable in the loader context: **webpack.config.js** ```javascript -module.exports = { +export default { // ... loader: { answer: 42, @@ -152,11 +152,11 @@ Then use `this.answer` to get its value in the loader: **custom-loader.js** ```javascript -module.exports = function (source) { +export default function (source) { // ... console.log(this.answer); // will log `42` here return source; -}; +} ``` T> You can override properties in the loader context as webpack copies all properties that are defined in the `loader` to the loader context. @@ -170,7 +170,7 @@ Name of the configuration. Used when loading multiple configurations. **webpack.config.js** ```javascript -module.exports = { +export default { //... name: 'admin-app', }; @@ -205,9 +205,9 @@ Specify where the records should be written. The following example shows how you **webpack.config.js** ```javascript -const path = require('path'); +import path from 'path'; -module.exports = { +export default { //... recordsInputPath: path.join(__dirname, 'records.json'), recordsOutputPath: path.join(__dirname, 'newRecords.json'), @@ -223,9 +223,9 @@ Use this option to generate a JSON file containing webpack "records" – pieces **webpack.config.js** ```javascript -const path = require('path'); +import path from 'path'; -module.exports = { +export default { //... recordsPath: path.join(__dirname, 'records.json'), }; @@ -246,8 +246,8 @@ W> Setting `recordsPath` will essentially set `recordsInputPath` and `recordsOut **webpack.config.js** ```javascript -const path = require('path'); -module.exports = { +import path from 'path'; +export default { // ... snapshot: { managedPaths: [path.resolve(__dirname, '../node_modules')], @@ -313,7 +313,7 @@ Make sure you wrap the path in a capture group if you are using regular expressi A common use case for `managedPaths` would be to exclude some folders from `node_modules`, e.g. you want webpack to know that files in the `node_modules/@azure/msal-browser` folder are expected to change, which can be done with a regular expression like the one below: ```js -module.exports = { +export default { snapshot: { managedPaths: [ /^(.+?[\\/]node_modules[\\/](?!(@azure[\\/]msal-browser))(@.+?[\\/])?.+?)[\\/]/, diff --git a/src/content/configuration/output.mdx b/src/content/configuration/output.mdx index f44c0ce81e44..f896c0d8336b 100644 --- a/src/content/configuration/output.mdx +++ b/src/content/configuration/output.mdx @@ -52,7 +52,7 @@ Create async chunks that are loaded on demand. **webpack.config.js** ```javascript -module.exports = { +export default { //... output: { //... @@ -72,7 +72,7 @@ When used in tandem with [`output.library`](#outputlibrary) and [`output.library **webpack.config.js** ```javascript -module.exports = { +export default { //... output: { library: 'someLibName', @@ -110,7 +110,7 @@ For fine-grained control over each `libraryTarget` comment, pass an object: **webpack.config.js** ```javascript -module.exports = { +export default { //... output: { //... @@ -145,7 +145,7 @@ By default `[id].js` is used or a value inferred from [`output.filename`](#outpu **webpack.config.js** ```javascript -module.exports = { +export default { //... output: { //... @@ -159,7 +159,7 @@ Usage as a function: **webpack.config.js** ```javascript -module.exports = { +export default { //... output: { chunkFilename: (pathData) => { @@ -182,7 +182,7 @@ T> The default value of this option depends on the [`target`](/configuration/tar **webpack.config.js** ```javascript -module.exports = { +export default { //... output: { //... @@ -200,7 +200,7 @@ The Number of milliseconds before chunk request expires. This option is supporte **webpack.config.js** ```javascript -module.exports = { +export default { //... output: { //... @@ -218,7 +218,7 @@ The global variable is used by webpack for loading chunks. **webpack.config.js** ```javascript -module.exports = { +export default { //... output: { //... @@ -238,7 +238,7 @@ T> The default value of this option depends on the [`target`](/configuration/tar **webpack.config.js** ```javascript -module.exports = { +export default { //... output: { //... @@ -254,7 +254,7 @@ module.exports = { `boolean` `{ dry?: boolean, keep?: RegExp | string | ((filename: string) => boolean) }` ```javascript -module.exports = { +export default { //... output: { clean: true, // Clean the output directory before emit. @@ -263,7 +263,7 @@ module.exports = { ``` ```javascript -module.exports = { +export default { //... output: { clean: { @@ -274,7 +274,7 @@ module.exports = { ``` ```javascript -module.exports = { +export default { //... output: { clean: { @@ -285,7 +285,7 @@ module.exports = { // or -module.exports = { +export default { //... output: { clean: { @@ -317,7 +317,7 @@ Tells webpack to check if to be emitted file already exists and has the same con W> webpack will not write output file when file already exists on disk with the same content. ```javascript -module.exports = { +export default { //... output: { compareBeforeEmit: false, @@ -369,7 +369,7 @@ Customize the names used in each source map's `sources` array. This can be done **webpack.config.js** ```javascript -module.exports = { +export default { //... output: { devtoolModuleFilenameTemplate: @@ -394,7 +394,7 @@ The following substitutions are available in template strings (via webpack's int When using a function, the same options are available camel-cased via the `info` parameter: ```javascript -module.exports = { +export default { //... output: { devtoolModuleFilenameTemplate: (info) => { @@ -419,7 +419,7 @@ You can use template strings like `[name]` to dynamically generate namespaces ba **webpack.config.js** ```javascript -module.exports = { +export default { //... output: { filename: '[name]-bundle.js', @@ -439,7 +439,7 @@ List of chunk loading types enabled for use by entry points. Will be automatical **webpack.config.js** ```javascript -module.exports = { +export default { //... output: { //... @@ -455,7 +455,7 @@ module.exports = { List of library types enabled for use by entry points. ```javascript -module.exports = { +export default { //... output: { enabledLibraryTypes: ['module'], @@ -470,7 +470,7 @@ module.exports = { List of wasm loading types enabled for use by entry points. ```javascript -module.exports = { +export default { //... output: { enabledWasmLoadingTypes: ['fetch'], @@ -483,7 +483,7 @@ module.exports = { Tell webpack what kind of ES-features may be used in the generated runtime-code. ```javascript -module.exports = { +export default { output: { environment: { // The environment supports arrow functions ('() => { ... }'). @@ -535,7 +535,7 @@ For a single [`entry`](/configuration/entry-context/#entry) point, this can be a **webpack.config.js** ```javascript -module.exports = { +export default { //... output: { filename: 'bundle.js', @@ -550,7 +550,7 @@ Using entry name: **webpack.config.js** ```javascript -module.exports = { +export default { //... output: { filename: '[name].bundle.js', @@ -563,7 +563,7 @@ Using internal chunk id: **webpack.config.js** ```javascript -module.exports = { +export default { //... output: { filename: '[id].bundle.js', @@ -576,7 +576,7 @@ Using hashes generated from the generated content: **webpack.config.js** ```javascript -module.exports = { +export default { //... output: { filename: '[contenthash].bundle.js', @@ -589,7 +589,7 @@ Combining multiple substitutions: **webpack.config.js** ```javascript -module.exports = { +export default { //... output: { filename: '[name].[contenthash].bundle.js', @@ -602,7 +602,7 @@ Using the function to return the filename: **webpack.config.js** ```javascript -module.exports = { +export default { //... output: { filename: (pathData) => { @@ -723,7 +723,7 @@ For example: **webpack.config.js** ```javascript -module.exports = { +export default { // ... output: { library: { @@ -757,7 +757,7 @@ T> For `webpack v5.65.0+`, `16` will be used as the default value for the `hashD The hashing algorithm to use. All functions from Node.JS' [`crypto.createHash`](https://nodejs.org/api/crypto.html#crypto_crypto_createhash_algorithm_options) are supported. Since `4.0.0-alpha2`, the `hashFunction` can now be a constructor to a custom hash function. You can provide a non-crypto hash function for performance reasons. ```javascript -module.exports = { +export default { //... output: { hashFunction: require('metrohash').MetroHash64, @@ -784,7 +784,7 @@ The only placeholders allowed here are `[id]` and `[fullhash]`, the default bein **webpack.config.js** ```javascript -module.exports = { +export default { //... output: { hotUpdateChunkFilename: '[id].[fullhash].hot-update.js', @@ -819,7 +819,7 @@ T> Typically you don't need to change `output.hotUpdateMainFilename`. Tells webpack to add [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) wrapper around emitted code. ```javascript -module.exports = { +export default { //... output: { iife: true, @@ -838,7 +838,7 @@ Hide warnings from the browser console in production. This option does not affec **webpack.config.js** ```javascript -module.exports = { +export default { //... output: { ignoreBrowserWarnings: true, @@ -855,7 +855,7 @@ The name of the native `import()` function. Can be used for polyfilling, e.g. wi **webpack.config.js** ```javascript -module.exports = { +export default { //... output: { importFunctionName: '__import__', @@ -872,7 +872,7 @@ The name of the native `import.meta` object (can be exchanged for a polyfill). **webpack.config.js** ```javascript -module.exports = { +export default { //... output: { importMetaName: 'pseudoImport.meta', @@ -891,7 +891,7 @@ Let's take a look at an example. **webpack.config.js** ```js -module.exports = { +export default { // … entry: './src/index.js', output: { @@ -922,7 +922,7 @@ In the above example, we're passing a single entry file to `entry`, however, web 1. If you provide an `array` as the `entry` point, only the last one in the array will be exposed. ```js - module.exports = { + export default { // … entry: ['./src/a.js', './src/b.js'], // only exports in b.js will be exposed output: { @@ -934,7 +934,7 @@ In the above example, we're passing a single entry file to `entry`, however, web 2. If an `object` is provided as the `entry` point, all entries can be exposed using the `array` syntax of `library`: ```js - module.exports = { + export default { // … entry: { a: './src/a.js', @@ -963,7 +963,7 @@ In the above example, we're passing a single entry file to `entry`, however, web Note that the above configuration won't work as expected if you're going to configure library options per entry point. Here is how to do it [under each of your entries](/concepts/entry-points/#entrydescription-object): ```js - module.exports = { + export default { // … entry: { main: { @@ -995,7 +995,7 @@ Use a container(defined in global space) for calling `define`/`require` function W> Note that the value of `amdContainer` **must be** set as a global variable. ```js -module.exports = { +export default { // … output: { library: { @@ -1015,7 +1015,7 @@ window['clientContainer'].define(/*define args*/); // or 'amd-require' window['c ### output.library.name ```js -module.exports = { +export default { // … output: { library: { @@ -1050,7 +1050,7 @@ These options assign the return value of the entry point (e.g. whatever the entr ##### type: 'var' ```js -module.exports = { +export default { // … output: { library: { @@ -1073,7 +1073,7 @@ MyLibrary.doSomething(); ##### type: 'assign' ```js -module.exports = { +export default { // … output: { library: { @@ -1097,7 +1097,7 @@ Be aware that if `MyLibrary` isn't defined earlier your library will be set in g ```js -module.exports = { +export default { // … output: { library: { @@ -1133,7 +1133,7 @@ These options assign the return value of the entry point (e.g. whatever the entr ##### type: 'this' ```js -module.exports = { +export default { // … output: { library: { @@ -1157,7 +1157,7 @@ MyLibrary.doSomething(); // if `this` is window ##### type: 'window' ```js -module.exports = { +export default { // … output: { library: { @@ -1179,7 +1179,7 @@ window.MyLibrary.doSomething(); ##### type: 'global' ```js -module.exports = { +export default { // … output: { library: { @@ -1201,7 +1201,7 @@ global.MyLibrary.doSomething(); ##### type: 'commonjs' ```js -module.exports = { +export default { // … output: { library: { @@ -1229,7 +1229,7 @@ These options will result in a bundle that comes with a complete header to ensur ##### type: 'module' ```js -module.exports = { +export default { // … experiments: { outputModule: true, @@ -1252,7 +1252,7 @@ However this feature is still experimental and not fully supported yet, so make ```js -module.exports = { +export default { // … experiments: { outputModule: true, @@ -1273,7 +1273,7 @@ However this feature is still experimental and not fully supported yet, so make ##### type: 'commonjs2' ```js -module.exports = { +export default { // … output: { library: { @@ -1305,7 +1305,7 @@ T> Wondering the difference between CommonJS and CommonJS2 is? While they are si ```js -module.exports = { +export default { // … output: { library: { @@ -1357,7 +1357,7 @@ AMD modules require that the entry chunk (e.g. the first script loaded by the `< With the following configuration... ```javascript -module.exports = { +export default { //... output: { library: { @@ -1397,7 +1397,7 @@ This bundle will not work as expected, or not work at all (in the case of the al ##### type: 'amd-require' ```javascript -module.exports = { +export default { //... output: { library: { @@ -1421,7 +1421,7 @@ This exposes your library under all the module definitions, allowing it to work In this case, you need the `library.name` property to name your module: ```javascript -module.exports = { +export default { //... output: { library: { @@ -1449,7 +1449,7 @@ And finally the output is: Note that omitting `library.name` will result in the assignment of all properties returned by the entry point be assigned directly to the root object, as documented under the [object assignment section](#expose-via-object-assignment). Example: ```javascript -module.exports = { +export default { //... output: { type: 'umd', @@ -1476,7 +1476,7 @@ The output will be: You may specify an object for `library.name` for differing names per targets: ```javascript -module.exports = { +export default { //... output: { library: { @@ -1498,7 +1498,7 @@ This will expose your library as a [`System.register`](https://github.com/system System modules require that a global variable `System` is present in the browser when the webpack bundle is executed. Compiling to `System.register` format allows you to `System.import('/bundle.js')` without additional configuration and has your webpack bundle loaded into the System module registry. ```javascript -module.exports = { +export default { //... output: { library: { @@ -1541,7 +1541,7 @@ System.register( ##### type: 'jsonp' ```js -module.exports = { +export default { // … output: { library: { @@ -1571,7 +1571,7 @@ Specify which export should be exposed as a library. It is `undefined` by default, which will export the whole (namespace) object. The examples below demonstrate the effect of this configuration when using [`output.library.type: 'var'`](#type-var). ```js -module.exports = { +export default { output: { library: { name: 'MyLibrary', @@ -1592,7 +1592,7 @@ var MyLibrary = _entry_return_.default; You can pass an array to `output.library.export` as well, it will be interpreted as a path to a module to be assigned to the library name: ```js -module.exports = { +export default { output: { library: { name: 'MyLibrary', @@ -1618,7 +1618,7 @@ Add a comment in the UMD wrapper. To insert the same comment for each `umd` type, set `auxiliaryComment` to a string: ```js -module.exports = { +export default { // … mode: 'development', output: { @@ -1652,7 +1652,7 @@ which will yield the following: For fine-grained control, pass an object: ```js -module.exports = { +export default { // … mode: 'development', output: { @@ -1677,7 +1677,7 @@ module.exports = { When using `output.library.type: "umd"`, setting `output.library.umdNamedDefine` to `true` will name the AMD module of the UMD build. Otherwise, an anonymous `define` is used. ```javascript -module.exports = { +export default { //... output: { library: { @@ -1882,7 +1882,7 @@ W> Prefer to use [`output.library.type: 'commonjs2'`](#type-commonjs2). The **return value of your entry point** will be assigned to the `module.exports`. As the name implies, this is used in CommonJS environments: ```javascript -module.exports = _entry_return_; +export default _entry_return_; require('MyLibrary').doSomething(); ``` @@ -1902,7 +1902,7 @@ AMD modules require that the entry chunk (e.g. the first script loaded by the `< With the following configuration... ```javascript -module.exports = { +export default { //... output: { library: 'MyLibrary', @@ -1914,25 +1914,20 @@ module.exports = { The generated output will be defined with the name "MyLibrary", i.e. ```javascript -define('MyLibrary', [], function () { - return _entry_return_; -}); +export default _entry_return_; ``` The bundle can be included as part of a script tag, and the bundle can be invoked like so: ```javascript -require(['MyLibrary'], function (MyLibrary) { - // Do something with the library... -}); +import MyLibrary from './MyLibrary.js'; +// Do something with the library... ``` If `output.library` is undefined, the following is generated instead. ```javascript -define([], function () { - return _entry_return_; -}); +export default _entry_return_; ``` This bundle will not work as expected, or not work at all (in the case of the almond loader) if loaded directly with a `