Compare commits

..

No commits in common. "main" and "v5.101.2" have entirely different histories.

1139 changed files with 7562 additions and 26119 deletions

View File

@ -21,11 +21,5 @@ trim_trailing_whitespace = false
[test/cases/parsing/bom/bomfile.{css,js}]
charset = utf-8-bom
[test/configCases/asset-modules/bytes/file.text]
insert_final_newline = false
[test/configCases/asset-modules/bytes/file.svg]
insert_final_newline = false
[test/configCases/css/no-extra-runtime-in-js/source.text]
insert_final_newline = false

1
.github/FUNDING.yml vendored Normal file
View File

@ -0,0 +1 @@
open_collective: webpack

24
.github/ISSUE_TEMPLATE.md vendored Normal file
View File

@ -0,0 +1,24 @@
<!-- Please don't delete this template or we'll close your issue -->
<!-- Before creating an issue please make sure you are using the latest version of webpack. -->
<!-- Also consider trying the webpack@beta version, maybe it's already fixed. -->
**Do you want to request a _feature_ or report a _bug_?**
<!-- Please ask questions on StackOverflow or the GitHub Discussions. -->
<!-- https://github.com/webpack/webpack/discussions -->
<!-- https://stackoverflow.com/questions/ask?tags=webpack -->
<!-- Issues which contain questions or support requests will be closed. -->
**What is the current behavior?**
**If the current behavior is a bug, please provide the steps to reproduce.**
<!-- A great way to do this is to provide your configuration via a GitHub gist. -->
<!-- Best provide a minimal reproducible repo -->
<!-- If your issue is caused by a plugin or loader file the issue on the plugin/loader repo -->
**What is the expected behavior?**
**If this is a feature request, what is motivation or use case for changing the behavior?**
**Please mention other relevant information such as the browser version, Node.js version, webpack version, and Operating System.**

36
.github/ISSUE_TEMPLATE/Bug_report.md vendored Normal file
View File

@ -0,0 +1,36 @@
---
name: Bug report
about: Create a report to help us improve
---
<!-- Please don't delete this template because we'll close your issue -->
<!-- Before creating an issue please make sure you are using the latest version of webpack. -->
# Bug report
<!-- Please ask questions on StackOverflow or the GitHub Discussions. -->
<!-- https://github.com/webpack/webpack/discussions -->
<!-- https://stackoverflow.com/questions/ask?tags=webpack -->
<!-- Issues which contain questions or support requests will be closed. -->
**What is the current behavior?**
**If the current behavior is a bug, please provide the steps to reproduce.**
<!-- A great way to do this is to provide your configuration via a GitHub repository -->
<!-- The most helpful is a minimal reproduction with instructions on how to reproduce -->
<!-- Repositories with too many files or large `webpack.config.js` files are not suitable -->
<!-- Please only add small code snippets directly into this issue -->
<!-- https://gist.github.com is a good place for longer code snippets -->
<!-- If your issue is caused by a plugin or loader, please create an issue on the loader/plugin repository instead -->
**What is the expected behavior?**
<!-- "It should work" is not a helpful explanation -->
<!-- Explain exactly how it should behave -->
**Other relevant information:**
webpack version:
Node.js version:
Operating System:
Additional tools:

View File

@ -0,0 +1,23 @@
---
name: Feature request
about: Suggest an idea for this project
---
<!-- Please don't delete this template or we'll close your issue -->
## Feature request
<!-- Issues that contain questions or support requests will be closed. -->
<!-- Before creating an issue please make sure you are using the latest version of webpack. -->
<!-- Check if this feature needs to be implemented in a plugin or loader instead -->
<!-- If yes: file the issue on the plugin/loader repo -->
<!-- Features related to the development server should be filed on this repo instead -->
**What is the expected behavior?**
**What is motivation or use case for adding/changing the behavior?**
**How should this be implemented in your opinion?**
**Are you willing to work on this yourself?**
yes

10
.github/ISSUE_TEMPLATE/Other.md vendored Normal file
View File

@ -0,0 +1,10 @@
---
name: Other
about: Something else
---
<!-- Bug reports and Feature requests must use other templates, or will be closed -->
<!-- Please ask questions on StackOverflow or the GitHub Discussions. -->
<!-- https://github.com/webpack/webpack/discussions -->
<!-- https://stackoverflow.com/questions/ask?tags=webpack -->
<!-- Issues which contain questions or support requests will be closed. -->

22
.github/PULL_REQUEST_TEMPLATE.md vendored Normal file
View File

@ -0,0 +1,22 @@
<!-- Thanks for submitting a pull request! Please provide enough information so that others can review your pull request. -->
<!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? -->
<!-- Try to link to an open issue for more information. -->
<!-- In addition to that please answer these questions: -->
**What kind of change does this PR introduce?**
<!-- E.g. a bugfix, feature, refactoring, build related change, etc… -->
**Did you add tests for your changes?**
<!-- Note that we won't merge your changes if you don't add tests -->
**Does this PR introduce a breaking change?**
<!-- If this PR introduces a breaking change, please describe the impact and a migration path for existing applications. -->
**What needs to be documented once your changes are merged?**
<!-- List all the information that needs to be added to the documentation after merge -->
<!-- When your changes are merged you will be asked to contribute this to the documentation -->

View File

@ -1,50 +0,0 @@
name: Benchmarks
on:
push:
branches: [main]
pull_request:
branches: [main]
workflow_dispatch:
permissions:
contents: read
jobs:
benchmark:
strategy:
fail-fast: false
matrix:
shard: [1/4, 2/4, 3/4, 4/4]
runs-on: ubuntu-latest
permissions:
issues: write
pull-requests: write
steps:
- uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
with:
fetch-tags: true
fetch-depth: 0
- name: Use Node.js
uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
with:
node-version: lts/*
cache: yarn
- run: yarn --frozen-lockfile
- run: yarn link --frozen-lockfile || true
- run: yarn link webpack --frozen-lockfile
- name: Run benchmarks
uses: CodSpeedHQ/action@4348f634fa7309fe23aac9502e88b999ec90a164 # v4.3.1
with:
run: yarn benchmark --ci
mode: "instrumentation"
token: ${{ secrets.CODSPEED_TOKEN }}
env:
LAST_COMMIT: 1
NEGATIVE_FILTER: on-schedule
SHARD: ${{ matrix.shard }}

View File

@ -1,7 +1,6 @@
name: Dependency Review
name: "Dependency Review"
on:
pull_request:
on: [pull_request]
permissions:
contents: read
@ -10,21 +9,12 @@ jobs:
dependency-review:
runs-on: ubuntu-latest
steps:
- name: Checkout Repository
uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
- name: Dependency Review
uses: actions/dependency-review-action@40c09b7dc99638e5ddb0bfd91c1673effc064d8a # v4.8.1
- name: "Checkout Repository"
uses: actions/checkout@v5
- name: "Dependency Review"
uses: actions/dependency-review-action@v4
with:
allow-dependencies-licenses: |
pkg:npm/@cspell/dict-en-common-misspellings,
pkg:npm/flatted,
pkg:npm/parse-imports,
pkg:npm/prettier,
pkg:npm/type-fest,
pkg:npm/abbrev,
pkg:npm/@pkgjs/parseargs,
pkg:npm/cookie-signature
allow-dependencies-licenses: "pkg:npm/@cspell/dict-en-common-misspellings, pkg:npm/flatted, pkg:npm/parse-imports, pkg:npm/prettier, pkg:npm/type-fest, pkg:npm/abbrev, pkg:npm/@pkgjs/parseargs, pkg:npm/cookie-signature"
allow-licenses: |
0BSD,
AFL-1.1,

View File

@ -1,40 +1,34 @@
name: Update examples
name: "Update examples"
on:
workflow_dispatch:
schedule:
- cron: "0 0 * * 0"
permissions:
contents: read
jobs:
examples:
runs-on: ubuntu-latest
permissions:
contents: write
pull-requests: write
steps:
- uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
- uses: actions/checkout@v5
with:
fetch-depth: 0
- name: Use Node.js
uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
uses: actions/setup-node@v4
with:
node-version: lts/*
cache: yarn
cache: "yarn"
- run: yarn --frozen-lockfile
- run: yarn link --frozen-lockfile || true
- run: yarn link webpack --frozen-lockfile
- run: yarn build:examples
- name: Create Pull Request
uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7.0.8
uses: peter-evans/create-pull-request@v7
with:
token: ${{ secrets.GITHUB_TOKEN }}
token: ${{ secrets.PAT }}
delete-branch: true
commit-message: |
docs: update examples

View File

@ -1,147 +0,0 @@
name: Publish to pkg.pr.new
on:
pull_request:
branches: [main]
push:
branches: [main]
tags: ["!**"]
permissions:
issues: write
pull-requests: write
jobs:
publish:
if: |
github.repository == 'webpack/webpack' &&
(github.event_name != 'pull_request' ||
github.event.pull_request.head.repo.full_name == github.repository)
name: Publish to pkg.pr.new
runs-on: ubuntu-latest
outputs:
sha: ${{ steps.publish.outputs.sha }}
urls: ${{ steps.publish.outputs.urls }}
steps:
- uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
- run: corepack enable
- name: Use Node.js
uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
with:
node-version: lts/*
cache: yarn
- run: yarn --frozen-lockfile
- run: npx pkg-pr-new publish --compact --json output.json --comment=off
- name: Add metadata to output
uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8.0.0
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
script: |
const fs = require('fs');
const output = JSON.parse(fs.readFileSync('output.json', 'utf8'));
const sha =
context.eventName === 'pull_request'
? context.payload.pull_request.head.sha
: context.payload.after;
const commitUrl = `https://github.com/${context.repo.owner}/${context.repo.repo}/commit/${sha}`;
const botCommentIdentifier = '<!-- posted by pkg.pr.new -->';
const body = `${botCommentIdentifier}
This PR is packaged and the instant preview is available (${commitUrl}).
Install it locally:
- npm
\`\`\`shell
npm i -D ${output.packages.map((p) => p.url).join(' ')}
\`\`\`
- yarn
\`\`\`shell
yarn add -D ${output.packages.map((p) => p.url).join(' ')}
\`\`\`
- pnpm
\`\`\`shell
pnpm add -D ${output.packages.map((p) => p.url).join(' ')}
\`\`\`
`;
async function findBotComment(issueNumber) {
if (!issueNumber) return null;
const comments = await github.rest.issues.listComments({
owner: context.repo.owner,
repo: context.repo.repo,
issue_number: issueNumber,
});
return comments.data.find((comment) =>
comment.body.includes(botCommentIdentifier)
);
}
async function createOrUpdateComment(issueNumber) {
if (!issueNumber) {
console.log('No issue number provided. Cannot post or update comment.');
return;
}
const existingComment = await findBotComment(issueNumber);
if (existingComment) {
await github.rest.issues.updateComment({
owner: context.repo.owner,
repo: context.repo.repo,
comment_id: existingComment.id,
body: body,
});
} else {
await github.rest.issues.createComment({
issue_number: issueNumber,
owner: context.repo.owner,
repo: context.repo.repo,
body: body,
});
}
}
async function logPublishInfo() {
console.log('\n' + '='.repeat(50));
console.log('Publish Information');
console.log('='.repeat(50));
console.log('\nPublished Packages:');
console.log(output.packages);
console.log('\nTemplates:');
console.log(output.templates);
console.log(`\nCommit URL: ${commitUrl}`);
console.log('\n' + '='.repeat(50));
}
if (context.eventName === 'pull_request') {
if (context.issue.number) {
await createOrUpdateComment(context.issue.number);
}
} else if (context.eventName === 'push') {
const pullRequests = await github.rest.pulls.list({
owner: context.repo.owner,
repo: context.repo.repo,
state: 'open',
head: `${context.repo.owner}:${context.ref.replace(
'refs/heads/',
''
)}`,
});
if (pullRequests.data.length > 0) {
await createOrUpdateComment(pullRequests.data[0].number);
} else {
console.log(
'No open pull request found for this push. Logging publish information to console:'
);
await logPublishInfo();
}
}

View File

@ -2,9 +2,12 @@ name: Github Actions
on:
push:
branches: [main]
branches:
- main
pull_request:
branches: [main]
branches:
- main
workflow_dispatch:
permissions:
contents: read
@ -13,120 +16,123 @@ jobs:
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
- uses: actions/checkout@v5
- name: Use Node.js
uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
uses: actions/setup-node@v4
with:
node-version: lts/*
cache: yarn
cache: "yarn"
- run: yarn --frozen-lockfile
- name: Cache prettier result
uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
uses: actions/cache@v4
with:
path: ./node_modules/.cache/prettier/.prettier-cache
key: lint-prettier-${{ runner.os }}-node-${{ hashFiles('**/yarn.lock', '**/.prettierrc.js') }}
restore-keys: lint-prettier-
- name: Cache eslint result
uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
uses: actions/cache@v4
with:
path: .eslintcache
key: lint-eslint-${{ runner.os }}-node-${{ hashFiles('**/yarn.lock', '**/eslint.config.mjs') }}
restore-keys: lint-eslint-
- name: Cache cspell result
uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
uses: actions/cache@v4
with:
path: .cspellcache
key: lint-cspell-${{ runner.os }}-node-${{ hashFiles('**/yarn.lock', '**/cspell.json') }}
restore-keys: lint-cspell-
- run: yarn lint
- name: Validate types using old typescript version
run: |
yarn upgrade typescript@5.0 @types/node@20
yarn --frozen-lockfile
yarn validate:types
validate-legacy-node:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
- name: Use Node.js 10.x
uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
- uses: actions/checkout@v5
- name: Use Node.js
uses: actions/setup-node@v4
with:
node-version: 10.x
cache: yarn
cache: "yarn"
# Remove `devDependencies` from `package.json` to avoid `yarn install` compatibility error
- run: node -e "const content = require('./package.json');delete content.devDependencies;require('fs').writeFileSync('package.json', JSON.stringify(content, null, 2));"
- run: yarn install --production --frozen-lockfile
benchmark:
strategy:
fail-fast: false
matrix:
shard: [1/4, 2/4, 3/4, 4/4]
runs-on: ubuntu-latest
permissions:
issues: write
pull-requests: write
steps:
- uses: actions/checkout@v5
with:
fetch-tags: true
fetch-depth: 0
- name: Use Node.js
uses: actions/setup-node@v4
with:
node-version: lts/*
cache: "yarn"
- run: yarn --frozen-lockfile
- run: yarn link --frozen-lockfile || true
- run: yarn link webpack --frozen-lockfile
- name: Run benchmarks
uses: CodSpeedHQ/action@v3
with:
run: yarn benchmark --ci
token: ${{ secrets.CODSPEED_TOKEN }}
env:
LAST_COMMIT: 1
NEGATIVE_FILTER: on-schedule
SHARD: ${{ matrix.shard }}
basic:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
- uses: actions/checkout@v5
- name: Use Node.js
uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
uses: actions/setup-node@v4
with:
node-version: lts/*
cache: yarn
cache: "yarn"
- run: yarn --frozen-lockfile
- run: yarn link --frozen-lockfile || true
- run: yarn link webpack --frozen-lockfile
- run: yarn test:basic --ci
unit:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
- uses: actions/checkout@v5
- name: Use Node.js
uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
uses: actions/setup-node@v4
with:
node-version: lts/*
cache: yarn
cache: "yarn"
- run: yarn --frozen-lockfile
- run: yarn link --frozen-lockfile || true
- run: yarn link webpack --frozen-lockfile
- name: Cache jest result
uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
- uses: actions/cache@v4
with:
path: .jest-cache
key: jest-unit-${{ env.GITHUB_SHA }}
restore-keys: jest-unit-${{ hashFiles('**/yarn.lock', '**/jest.config.js') }}
- run: yarn cover:unit --ci --cacheDirectory .jest-cache
- name: Codecov
uses: codecov/codecov-action@5a1091511ad55cbe89839c7260b706298ca349f7 # v5.5.1
- uses: codecov/codecov-action@v5
with:
flags: unit
env:
CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
integration:
needs: basic
strategy:
fail-fast: false
matrix:
os: [ubuntu-latest, windows-latest, macos-latest]
node-version: [10.x, 20.x, 22.x, 24.x, 25.x]
node-version: [10.x, 20.x, 22.x, 24.x]
part: [a, b]
include:
# Test with main branches of webpack dependencies
@ -153,9 +159,8 @@ jobs:
part: a
runs-on: ${{ matrix.os }}
steps:
- uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
- uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8.0.0
- uses: actions/checkout@v5
- uses: actions/github-script@v7
id: calculate_architecture
with:
result-encoding: string
@ -165,55 +170,41 @@ jobs:
} else {
return ''
}
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
architecture: ${{ steps.calculate_architecture.outputs.result }}
cache: yarn
cache: "yarn"
# Install old `jest` version and deps for legacy node versions
- run: |
yarn upgrade jest@^27.5.0 jest-circus@^27.5.0 jest-cli@^27.5.0 jest-diff@^27.5.0 jest-environment-node@^27.5.0 jest-junit@^13.0.0 @types/jest@^27.4.0 pretty-format@^27.0.2 husky@^8.0.3 lint-staged@^13.2.1 cspell@^6.31.1 open-cli@^7.2.0 coffee-loader@^1.0.0 babel-loader@^8.1.0 style-loader@^2.0.0 css-loader@^5.0.1 less-loader@^8.1.1 mini-css-extract-plugin@^1.6.1 nyc@^15.1.0 memfs@4.14.0 --ignore-engines
yarn upgrade jest@^27.5.0 jest-circus@^27.5.0 jest-cli@^27.5.0 jest-diff@^27.5.0 jest-environment-node@^27.5.0 jest-junit@^13.0.0 @types/jest@^27.4.0 pretty-format@^27.0.2 husky@^8.0.3 lint-staged@^13.2.1 cspell@^6.31.1 open-cli@^7.2.0 coffee-loader@^1.0.0 babel-loader@^8.1.0 style-loader@^2.0.0 css-loader@^5.0.1 less-loader@^8.1.1 mini-css-extract-plugin@^1.6.1 nyc@^15.1.0 --ignore-engines
yarn --frozen-lockfile --ignore-engines
if: matrix.node-version == '10.x' || matrix.node-version == '12.x' || matrix.node-version == '14.x'
- run: |
yarn upgrade jest@^27.5.0 jest-circus@^27.5.0 jest-cli@^27.5.0 jest-diff@^27.5.0 jest-environment-node@^27.5.0 jest-junit@^13.0.0 @types/jest@^27.4.0 pretty-format@^27.0.2 husky@^8.0.3 lint-staged@^13.2.1 nyc@^15.1.0 coffee-loader@1.0.0 babel-loader@^8.1.0 style-loader@^2.0.0 css-loader@^5.0.1 less-loader@^8.1.1 mini-css-extract-plugin@^1.6.1 --ignore-engines
yarn --frozen-lockfile
if: matrix.node-version == '16.x'
- run: |
yarn upgrade cspell@^8.8.4 lint-staged@^15.2.5 --ignore-engines
yarn --frozen-lockfile
if: matrix.node-version == '18.x'
# Install main version of our deps
- run: yarn upgrade enhanced-resolve@webpack/enhanced-resolve#main loader-runner@webpack/loader-runner#main webpack-sources@webpack/webpack-sources#main watchpack@webpack/watchpack#main tapable@webpack/tapable#main
if: matrix.use_main_branches == '1'
# Install dependencies for LTS node versions
- run: yarn --frozen-lockfile
if: matrix.node-version != '10.x' && matrix.node-version != '12.x' && matrix.node-version != '14.x' && matrix.node-version != '16.x'
- run: yarn link --frozen-lockfile || true
- run: yarn link webpack --frozen-lockfile
- name: Cache jest result
uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
- uses: actions/cache@v4
with:
path: .jest-cache
key: jest-integration-${{ env.GITHUB_SHA }}
restore-keys: jest-integration-${{ hashFiles('**/yarn.lock', '**/jest.config.js') }}
- run: yarn cover:integration:${{ matrix.part }} --ci --cacheDirectory .jest-cache || yarn cover:integration:${{ matrix.part }} --ci --cacheDirectory .jest-cache -f
- run: yarn cover:merge
- name: Codecov
uses: codecov/codecov-action@5a1091511ad55cbe89839c7260b706298ca349f7 # v5.5.1
- uses: codecov/codecov-action@v5
with:
flags: integration
env:

View File

@ -34,9 +34,7 @@ declarations/WebpackOptions.d.ts
schemas/**/*.check.js
# Ignore example fixtures
examples/**/*
!examples/*
examples/
!examples/**/webpack.config.js
!examples/**/test.filter.js
.vscode/**/*.*

1
CODE_OF_CONDUCT.md Normal file
View File

@ -0,0 +1 @@
[Code of Conduct](https://github.com/openjs-foundation/code-and-learn/blob/master/CODE_OF_CONDUCT.md)

302
README.md
View File

@ -11,7 +11,6 @@
[![builds1][builds1]][builds1-url]
[![dependency-review][dependency-review]][dependency-review-url]
[![coverage][cover]][cover-url]
[![pkg.pr.new](https://pkg.pr.new/badge/webpack/webpack)](https://pkg.pr.new/~/webpack/webpack)
[![PR's welcome][prs]][prs-url]
[![compatibility-score](https://api.dependabot.com/badges/compatibility_score?dependency-name=webpack&package-manager=npm_and_yarn&previous-version=5.72.1&new-version=5.73.0)](https://docs.github.com/en/code-security/dependabot/dependabot-security-updates/about-dependabot-security-updates#about-compatibility-scores)
[![downloads](https://img.shields.io/npm/dm/webpack.svg)](https://npmcharts.com/compare/webpack?minimal=true)
@ -21,7 +20,6 @@
[![contributors](https://img.shields.io/github/contributors/webpack/webpack.svg)](https://github.com/webpack/webpack/graphs/contributors)
[![discussions](https://img.shields.io/github/discussions/webpack/webpack)](https://github.com/webpack/webpack/discussions)
[![discord](https://img.shields.io/discord/1180618526436888586?label=discord&logo=discord&logoColor=white&style=flat)](https://discord.gg/5sxFZPdx2k)
[![LFX Health Score](https://insights.linuxfoundation.org/api/badge/health-score?project=webpack)](https://insights.linuxfoundation.org/project/webpack)
<h1>webpack</h1>
<p>
@ -47,7 +45,7 @@
- [Backers](#backers)
- [Special Thanks](#special-thanks-to)
## Install
<h2>Install</h2>
Install with npm:
@ -61,7 +59,7 @@ Install with yarn:
yarn add webpack --dev
```
## Introduction
<h2>Introduction</h2>
Webpack is a bundler for modules. The main purpose is to bundle JavaScript
files for usage in a browser, yet it is also capable of transforming, bundling,
@ -89,7 +87,7 @@ Check out webpack's quick [**Get Started**](https://webpack.js.org/guides/gettin
Webpack supports all browsers that are [ES5-compliant](https://kangax.github.io/compat-table/es5/) (IE8 and below are not supported).
Webpack also needs `Promise` for `import()` and `require.ensure()`. If you want to support older browsers, you will need to [load a polyfill](https://webpack.js.org/guides/shimming/) before using these expressions.
## Concepts
<h2>Concepts</h2>
### [Plugins](https://webpack.js.org/plugins/)
@ -137,9 +135,9 @@ or are automatically applied via regex from your webpack configuration.
#### JSON
| Name | Status | Install Size | Description |
| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------: | :----------: | :------------------------------: |
| <a href="https://github.com/awnist/cson-loader"><img width="48" height="48" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/coffeescript/coffeescript-original.svg"></a> | ![cson-npm] | ![cson-size] | Loads and transpiles a CSON file |
| Name | Status | Install Size | Description |
| :---------------------------------------------------------------------------------------------------------------------------------------: | :---------: | :----------: | :------------------------------: |
| <a href="https://github.com/awnist/cson-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/coffeescript.svg"></a> | ![cson-npm] | ![cson-size] | Loads and transpiles a CSON file |
[cson-npm]: https://img.shields.io/npm/v/cson-loader.svg
[cson-size]: https://packagephobia.com/badge?p=cson-loader
@ -148,9 +146,9 @@ or are automatically applied via regex from your webpack configuration.
| Name | Status | Install Size | Description |
| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------: | :------------: | :------------------------------------------------------------------------------------------------ |
| <a href="https://github.com/babel/babel-loader"><img width="48" height="48" title="babel-loader" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/babel/babel-original.svg"></a> | ![babel-npm] | ![babel-size] | Loads ES2015+ code and transpiles to ES5 using <a href="https://github.com/babel/babel">Babel</a> |
| <a href="https://github.com/babel/babel-loader"><img width="48" height="48" title="babel-loader" src="https://worldvectorlogo.com/logos/babel-10.svg"></a> | ![babel-npm] | ![babel-size] | Loads ES2015+ code and transpiles to ES5 using <a href="https://github.com/babel/babel">Babel</a> |
| <a href="https://github.com/TypeStrong/ts-loader"><img width="48" height="48" src="https://raw.githubusercontent.com/microsoft/TypeScript-Website/f407e1ae19e5e990d9901ac8064a32a8cc60edf0/packages/typescriptlang-org/static/branding/ts-logo-128.svg"></a> | ![type-npm] | ![type-size] | Loads TypeScript like JavaScript |
| <a href="https://github.com/webpack-contrib/coffee-loader"><img width="48" height="48" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/coffeescript/coffeescript-original.svg"></a> | ![coffee-npm] | ![coffee-size] | Loads CoffeeScript like JavaScript |
| <a href="https://github.com/webpack-contrib/coffee-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/coffeescript.svg"></a> | ![coffee-npm] | ![coffee-size] | Loads CoffeeScript like JavaScript |
[babel-npm]: https://img.shields.io/npm/v/babel-loader.svg
[babel-size]: https://packagephobia.com/badge?p=babel-loader
@ -161,14 +159,14 @@ or are automatically applied via regex from your webpack configuration.
#### Templating
| Name | Status | Install Size | Description |
| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------: | :--------------: | :-------------------------------------------------------------------------------------- |
| <a href="https://github.com/webpack-contrib/html-loader"><img width="48" height="48" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg"></a> | ![html-npm] | ![html-size] | Exports HTML as string, requires references to static resources |
| <a href="https://github.com/pugjs/pug-loader"><img width="48" height="48" src="https://cdn.rawgit.com/pugjs/pug-logo/master/SVG/pug-final-logo-_-colour-128.svg"></a> | ![pug-npm] | ![pug-size] | Loads Pug templates and returns a function |
| <a href="https://github.com/webdiscus/pug-loader"><img width="48" height="48" src="https://cdn.rawgit.com/pugjs/pug-logo/master/SVG/pug-final-logo-_-colour-128.svg"></a> | ![pug3-npm] | ![pug3-size] | Compiles Pug to a function or HTML string, useful for use with Vue, React, Angular |
| <a href="https://github.com/peerigon/markdown-loader"><img width="48" height="48" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/markdown/markdown-original.svg"></a> | ![md-npm] | ![md-size] | Compiles Markdown to HTML |
| <a href="https://github.com/posthtml/posthtml-loader"><img width="48" height="48" src="https://posthtml.github.io/posthtml/logo.svg"></a> | ![posthtml-npm] | ![posthtml-size] | Loads and transforms a HTML file using [PostHTML](https://github.com/posthtml/posthtml) |
| <a href="https://github.com/pcardune/handlebars-loader"><img width="48" height="48" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/handlebars/handlebars-original.svg"></a> | ![hbs-npm] | ![hbs-size] | Compiles Handlebars to HTML |
| Name | Status | Install Size | Description |
| :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------: | :--------------: | :-------------------------------------------------------------------------------------- |
| <a href="https://github.com/webpack-contrib/html-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/html5-2.svg"></a> | ![html-npm] | ![html-size] | Exports HTML as string, requires references to static resources |
| <a href="https://github.com/pugjs/pug-loader"><img width="48" height="48" src="https://cdn.rawgit.com/pugjs/pug-logo/master/SVG/pug-final-logo-_-colour-128.svg"></a> | ![pug-npm] | ![pug-size] | Loads Pug templates and returns a function |
| <a href="https://github.com/webdiscus/pug-loader"><img width="48" height="48" src="https://cdn.rawgit.com/pugjs/pug-logo/master/SVG/pug-final-logo-_-colour-128.svg"></a> | ![pug3-npm] | ![pug3-size] | Compiles Pug to a function or HTML string, useful for use with Vue, React, Angular |
| <a href="https://github.com/peerigon/markdown-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/markdown.svg"></a> | ![md-npm] | ![md-size] | Compiles Markdown to HTML |
| <a href="https://github.com/posthtml/posthtml-loader"><img width="48" height="48" src="https://posthtml.github.io/posthtml/logo.svg"></a> | ![posthtml-npm] | ![posthtml-size] | Loads and transforms a HTML file using [PostHTML](https://github.com/posthtml/posthtml) |
| <a href="https://github.com/pcardune/handlebars-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/handlebars-1.svg"></a> | ![hbs-npm] | ![hbs-size] | Compiles Handlebars to HTML |
[html-npm]: https://img.shields.io/npm/v/html-loader.svg
[html-size]: https://packagephobia.com/badge?p=html-loader
@ -187,14 +185,14 @@ or are automatically applied via regex from your webpack configuration.
#### Styling
| Name | Status | Install Size | Description |
| :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------: | :-------------: | :----------------------------------------------------------------------- |
| <a href="https://github.com/webpack-contrib/style-loader">`<style>`</a> | ![style-npm] | ![style-size] | Add exports of a module as style to DOM |
| <a href="https://github.com/webpack-contrib/css-loader"><img width="48" height="48" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg"></a> | ![css-npm] | ![css-size] | Loads CSS file with resolved imports and returns CSS code |
| <a href="https://github.com/webpack-contrib/less-loader"><img width="48" height="48" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/less/less-plain-wordmark.svg"></a> | ![less-npm] | ![less-size] | Loads and compiles a LESS file |
| <a href="https://github.com/webpack-contrib/sass-loader"><img width="48" height="48" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/sass/sass-original.svg"></a> | ![sass-npm] | ![sass-size] | Loads and compiles a Sass/SCSS file |
| <a href="https://github.com/shama/stylus-loader"><img width="48" height="48" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/stylus/stylus-original.svg"></a> | ![stylus-npm] | ![stylus-size] | Loads and compiles a Stylus file |
| <a href="https://github.com/postcss/postcss-loader"><img width="48" height="48" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postcss/postcss-original.svg"></a> | ![postcss-npm] | ![postcss-size] | Loads and transforms a CSS/SSS file using [PostCSS](https://postcss.org) |
| Name | Status | Install Size | Description |
| :-------------------------------------------------------------------------------------------------------------------------------------------: | :------------: | :-------------: | :----------------------------------------------------------------------- |
| <a href="https://github.com/webpack-contrib/style-loader">`<style>`</a> | ![style-npm] | ![style-size] | Add exports of a module as style to DOM |
| <a href="https://github.com/webpack-contrib/css-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/css-3.svg"></a> | ![css-npm] | ![css-size] | Loads CSS file with resolved imports and returns CSS code |
| <a href="https://github.com/webpack-contrib/less-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/less-63.svg"></a> | ![less-npm] | ![less-size] | Loads and compiles a LESS file |
| <a href="https://github.com/webpack-contrib/sass-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/sass-1.svg"></a> | ![sass-npm] | ![sass-size] | Loads and compiles a Sass/SCSS file |
| <a href="https://github.com/shama/stylus-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/stylus.svg"></a> | ![stylus-npm] | ![stylus-size] | Loads and compiles a Stylus file |
| <a href="https://github.com/postcss/postcss-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/postcss.svg"></a> | ![postcss-npm] | ![postcss-size] | Loads and transforms a CSS/SSS file using [PostCSS](https://postcss.org) |
[style-npm]: https://img.shields.io/npm/v/style-loader.svg
[style-size]: https://packagephobia.com/badge?p=style-loader
@ -211,13 +209,13 @@ or are automatically applied via regex from your webpack configuration.
#### Frameworks
| Name | Status | Install Size | Description |
| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------: | :-------------: | :----------------------------------------------------------------------------------------------------- |
| <a href="https://github.com/vuejs/vue-loader"><img width="48" height="48" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg"></a> | ![vue-npm] | ![vue-size] | Loads and compiles Vue Components |
| <a href="https://github.com/webpack-contrib/polymer-webpack-loader"><img width="48" height="48" src="https://raw.githubusercontent.com/Polymer/polymer-project.org/master/app/images/logos/p-logo.svg"></a> | ![polymer-npm] | ![polymer-size] | Process HTML & CSS with preprocessor of choice and `require()` Web Components like first-class modules |
| <a href="https://github.com/TheLarkInn/angular2-template-loader"><img width="48" height="48" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg"></a> | ![angular-npm] | ![angular-size] | Loads and compiles Angular 2 Components |
| <a href="https://github.com/riot/webpack-loader"><img width="48" height="48" src="https://riot.js.org/img/logo/riot-logo.svg"></a> | ![riot-npm] | ![riot-size] | Riot official webpack loader |
| <a href="https://github.com/sveltejs/svelte-loader"><img width="48" height="48" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/svelte/svelte-original.svg"></a> | ![svelte-npm] | ![svelte-size] | Official Svelte loader |
| Name | Status | Install Size | Description |
| :----------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------: | :-------------: | :----------------------------------------------------------------------------------------------------- |
| <a href="https://github.com/vuejs/vue-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/vue-9.svg"></a> | ![vue-npm] | ![vue-size] | Loads and compiles Vue Components |
| <a href="https://github.com/webpack-contrib/polymer-webpack-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/polymer.svg"></a> | ![polymer-npm] | ![polymer-size] | Process HTML & CSS with preprocessor of choice and `require()` Web Components like first-class modules |
| <a href="https://github.com/TheLarkInn/angular2-template-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/angular-icon-1.svg"></a> | ![angular-npm] | ![angular-size] | Loads and compiles Angular 2 Components |
| <a href="https://github.com/riot/webpack-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/riot.svg"></a> | ![riot-npm] | ![riot-size] | Riot official webpack loader |
| <a href="https://github.com/sveltejs/svelte-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/svelte-1.svg"></a> | ![svelte-npm] | ![svelte-size] | Official Svelte loader |
[vue-npm]: https://img.shields.io/npm/v/vue-loader.svg
[vue-size]: https://packagephobia.com/badge?p=vue-loader
@ -266,7 +264,7 @@ If you're working on webpack itself, or building advanced plugins or integration
[tapable-tracer-npm]: https://img.shields.io/npm/v/tapable-tracer.svg
## Contributing
<h2>Contributing</h2>
**We want contributing to webpack to be fun, enjoyable, and educational for anyone, and everyone.** We have a [vibrant ecosystem](https://medium.com/webpack/contributors-guide/home) that spans beyond this single repo. We welcome you to check out any of the repositories in [our organization](https://github.com/webpack) or [webpack-contrib organization](https://github.com/webpack-contrib) which houses all of our loaders and plugins.
@ -285,11 +283,11 @@ Contributions go far beyond pull requests and commits. Although we love giving y
To get started have a look at our [documentation on contributing](https://github.com/webpack/webpack/blob/main/CONTRIBUTING.md).
### Creating your own plugins and loaders
<h3>Creating your own plugins and loaders</h3>
If you create a loader or plugin, we would <3 for you to open source it, and put it on npm. We follow the `x-loader`, `x-webpack-plugin` naming convention.
## Support
<h2>Support</h2>
We consider webpack to be a low-level tool used not only individually but also layered beneath other awesome tools. Because of its flexibility, webpack isn't always the _easiest_ entry-level solution, however we do believe it is the most powerful. That said, we're always looking for ways to improve and simplify the tool without compromising functionality. If you have any ideas on ways to accomplish this, we're all ears!
@ -297,11 +295,11 @@ If you're just getting started, take a look at [our new docs and concepts page](
If you have discovered a 🐜 or have a feature suggestion, feel free to create an issue on GitHub.
## Current project members
<h2>Current project members</h2>
For information about the governance of the webpack project, see [GOVERNANCE.md](./GOVERNANCE.md).
For information about the governance of the Node.js project, see [GOVERNANCE.md](./GOVERNANCE.md).
### TSC (Technical Steering Committee)
<h3>TSC (Technical Steering Committee)</h3>
- [alexander-akait](https://github.com/alexander-akait) -
**Alexander Akait** <<sheo13666q@gmail.com>> (he/him)
@ -314,11 +312,18 @@ For information about the governance of the webpack project, see [GOVERNANCE.md]
- [thelarkinn](https://github.com/thelarkinn) -
**Sean Larkin** <<selarkin@microsoft.com>> (he/him)
### Maintenance
<h3>Core Collaborators</h3>
This webpack repository is maintained by the [`Core Working Group`](./WORKING_GROUP.md).
- [jhnns](https://github.com/jhnns) -
**Johannes Ewald** <<mail@johannesewald.de>>
- [sokra](https://github.com/sokra) -
**Tobias Koppers** <<jackworks@protonmail.co>>
- [spacek33z](https://github.com/spacek33z) -
**Kees Kluskens** <<kees@webduck.nl>>
- [TheLarkInn](https://github.com/TheLarkInn) -
**Sean T. Larkin** <<selarkin@microsoft.com>>
## Sponsoring
<h2>Sponsoring</h2>
Most of the core team members, webpack contributors and contributors in the ecosystem do this open source work in their free time. If you use webpack for a serious task, and you'd like us to invest more time on it, please donate. This project increases your income/productivity too. It makes development and applications faster and it reduces the required bandwidth.
@ -331,7 +336,7 @@ This is how we use the donations:
- Infrastructure cost
- Fees for money handling
### Premium Partners
<h3>Premium Partners</h3>
<div align="center">
@ -340,7 +345,7 @@ This is how we use the donations:
</div>
### Other Backers and Sponsors
<h3>Other Backers and Sponsors</h3>
Before we started using OpenCollective, donations were made anonymously. Now that we have made the switch, we would like to acknowledge these sponsors (and the ones who continue to donate using OpenCollective). If we've missed someone, please send us a PR, and we'll add you to this list.
@ -352,76 +357,136 @@ Before we started using OpenCollective, donations were made anonymously. Now tha
</div>
### Gold Sponsors
<h3>Gold Sponsors</h3>
[Become a gold sponsor](https://opencollective.com/webpack#sponsor) and get your logo on our README on GitHub with a link to your site.
<div align="center">
<a href="https://opencollective.com/webpack/sponsor/0/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/sponsor/0/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/1/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/sponsor/1/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/2/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/sponsor/2/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/3/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/sponsor/3/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/4/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/sponsor/4/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/5/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/sponsor/5/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/6/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/sponsor/6/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/7/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/sponsor/7/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/8/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/sponsor/8/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/9/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/sponsor/9/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/10/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/sponsor/10/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/11/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/sponsor/11/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/12/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/sponsor/12/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/13/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/sponsor/13/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/14/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/sponsor/14/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/15/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/sponsor/15/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/goldsponsor/0/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/goldsponsor/0/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/goldsponsor/1/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/goldsponsor/1/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/goldsponsor/2/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/goldsponsor/2/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/goldsponsor/3/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/goldsponsor/3/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/goldsponsor/4/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/goldsponsor/4/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/goldsponsor/5/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/goldsponsor/5/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/goldsponsor/6/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/goldsponsor/6/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/goldsponsor/7/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/goldsponsor/7/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/goldsponsor/8/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/goldsponsor/8/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/goldsponsor/9/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/goldsponsor/9/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/goldsponsor/10/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/goldsponsor/10/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/goldsponsor/11/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/goldsponsor/11/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/goldsponsor/12/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/goldsponsor/12/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/goldsponsor/13/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/goldsponsor/13/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/goldsponsor/14/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/goldsponsor/14/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/goldsponsor/15/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/goldsponsor/15/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/goldsponsor/16/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/goldsponsor/16/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/goldsponsor/17/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/goldsponsor/17/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/goldsponsor/18/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/goldsponsor/18/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/goldsponsor/19/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/goldsponsor/19/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/goldsponsor/20/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/goldsponsor/20/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/goldsponsor/21/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/goldsponsor/21/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/goldsponsor/22/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/goldsponsor/22/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/goldsponsor/23/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/goldsponsor/23/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/goldsponsor/24/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/goldsponsor/24/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/goldsponsor/25/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/goldsponsor/25/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/goldsponsor/26/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/goldsponsor/26/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/goldsponsor/27/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/goldsponsor/27/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/goldsponsor/28/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/goldsponsor/28/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/goldsponsor/29/website?requireActive=false" target="_blank"><img width="150" src="https://opencollective.com/webpack/goldsponsor/29/avatar.svg?requireActive=false"></a>
</div>
### Silver Sponsors
<h3>Silver Sponsors</h3>
[Become a silver sponsor](https://opencollective.com/webpack#sponsor) and get your logo on our README on GitHub with a link to your site.
<div align="center">
<a href="https://opencollective.com/webpack/sponsor/16/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/sponsor/16/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/17/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/sponsor/17/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/18/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/sponsor/18/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/19/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/sponsor/19/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/20/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/sponsor/20/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/21/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/sponsor/21/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/22/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/sponsor/22/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/23/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/sponsor/23/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/24/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/sponsor/24/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/25/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/sponsor/25/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/26/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/sponsor/26/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/27/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/sponsor/27/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/28/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/sponsor/28/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/29/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/sponsor/29/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/30/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/sponsor/30/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/31/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/sponsor/31/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/32/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/sponsor/32/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/33/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/sponsor/33/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/34/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/sponsor/34/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/35/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/sponsor/35/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/36/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/sponsor/36/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/37/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/sponsor/37/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/38/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/sponsor/38/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/39/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/sponsor/39/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/40/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/sponsor/40/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/41/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/sponsor/41/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/42/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/sponsor/42/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/43/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/sponsor/43/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/44/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/sponsor/44/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/45/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/sponsor/45/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/silversponsor/0/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/silversponsor/0/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/silversponsor/1/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/silversponsor/1/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/silversponsor/2/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/silversponsor/2/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/silversponsor/3/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/silversponsor/3/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/silversponsor/4/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/silversponsor/4/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/silversponsor/5/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/silversponsor/5/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/silversponsor/6/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/silversponsor/6/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/silversponsor/7/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/silversponsor/7/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/silversponsor/8/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/silversponsor/8/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/silversponsor/9/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/silversponsor/9/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/silversponsor/10/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/silversponsor/10/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/silversponsor/11/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/silversponsor/11/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/silversponsor/12/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/silversponsor/12/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/silversponsor/13/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/silversponsor/13/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/silversponsor/14/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/silversponsor/14/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/silversponsor/15/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/silversponsor/15/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/silversponsor/16/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/silversponsor/16/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/silversponsor/17/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/silversponsor/17/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/silversponsor/18/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/silversponsor/18/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/silversponsor/19/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/silversponsor/19/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/silversponsor/20/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/silversponsor/20/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/silversponsor/21/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/silversponsor/21/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/silversponsor/22/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/silversponsor/22/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/silversponsor/23/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/silversponsor/23/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/silversponsor/24/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/silversponsor/24/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/silversponsor/25/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/silversponsor/25/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/silversponsor/26/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/silversponsor/26/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/silversponsor/27/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/silversponsor/27/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/silversponsor/28/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/silversponsor/28/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/silversponsor/29/website?requireActive=false" target="_blank"><img width="120" src="https://opencollective.com/webpack/silversponsor/29/avatar.svg?requireActive=false"></a>
</div>
### Bronze Sponsors
<h3>Bronze Sponsors</h3>
[Become a bronze sponsor](https://opencollective.com/webpack#sponsor) and get your logo on our README on GitHub with a link to your site.
<div align="center">
<a href="https://opencollective.com/webpack/sponsor/0/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/0/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/1/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/1/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/2/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/2/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/3/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/3/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/4/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/4/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/5/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/5/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/6/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/6/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/7/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/7/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/8/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/8/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/9/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/9/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/10/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/10/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/11/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/11/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/12/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/12/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/13/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/13/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/14/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/14/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/15/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/15/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/16/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/16/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/17/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/17/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/18/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/18/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/19/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/19/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/20/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/20/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/21/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/21/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/22/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/22/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/23/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/23/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/24/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/24/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/25/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/25/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/26/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/26/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/27/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/27/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/28/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/28/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/29/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/29/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/30/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/30/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/31/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/31/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/32/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/32/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/33/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/33/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/34/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/34/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/35/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/35/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/36/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/36/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/37/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/37/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/38/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/38/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/39/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/39/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/40/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/40/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/41/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/41/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/42/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/42/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/43/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/43/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/44/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/44/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/45/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/45/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/46/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/46/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/47/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/47/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/48/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/48/avatar.svg?requireActive=false"></a>
@ -477,56 +542,10 @@ Before we started using OpenCollective, donations were made anonymously. Now tha
<a href="https://opencollective.com/webpack/sponsor/98/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/98/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/99/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/99/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/100/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/100/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/101/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/101/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/102/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/102/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/103/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/103/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/104/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/104/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/105/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/105/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/106/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/106/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/107/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/107/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/108/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/108/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/109/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/109/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/110/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/110/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/111/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/111/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/112/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/112/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/113/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/113/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/114/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/114/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/115/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/115/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/116/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/116/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/117/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/117/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/118/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/118/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/119/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/119/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/120/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/120/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/121/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/121/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/122/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/122/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/123/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/123/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/124/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/124/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/125/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/125/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/126/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/126/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/127/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/127/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/128/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/128/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/129/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/129/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/130/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/130/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/131/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/131/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/132/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/132/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/133/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/133/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/134/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/134/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/135/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/135/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/136/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/136/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/137/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/137/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/138/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/138/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/139/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/139/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/140/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/140/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/141/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/141/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/142/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/142/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/143/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/143/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/144/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/144/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/145/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/145/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/sponsor/146/website?requireActive=false" target="_blank"><img width="100" src="https://opencollective.com/webpack/sponsor/146/avatar.svg?requireActive=false"></a>
</div>
### Backers
<h3>Backers</h3>
[Become a backer](https://opencollective.com/webpack#backer) and get your image on our README on GitHub with a link to your site.
@ -632,8 +651,7 @@ Before we started using OpenCollective, donations were made anonymously. Now tha
<a href="https://opencollective.com/webpack/backer/99/website?requireActive=false" target="_blank"><img width="30" src="https://opencollective.com/webpack/backer/99/avatar.svg?requireActive=false"></a>
<a href="https://opencollective.com/webpack/backer/100/website?requireActive=false" target="_blank"><img width="30" src="https://opencollective.com/webpack/backer/100/avatar.svg?requireActive=false"></a>
## Special Thanks to
<h2>Special Thanks to</h2>
<p>(In chronological order)</p>
- [@google](https://github.com/google) for [Google Web Toolkit (GWT)](http://www.gwtproject.org/), which aims to compile Java to JavaScript. It features a similar [Code Splitting](http://www.gwtproject.org/doc/latest/DevGuideCodeSplitting.html) as webpack.

9
SECURITY.md Normal file
View File

@ -0,0 +1,9 @@
# Reporting Security Issues
If you discover a security issue in webpack, please report it by sending an
email to [webpack@opencollective.com](mailto:webpack@opencollective.com).
This will allow us to assess the risk, and make a fix available before we add a
bug report to the GitHub repository.
Thanks for helping make webpack safe for everyone.

View File

@ -1,48 +0,0 @@
# Webpack Core Working Group
This document outlines the webpack core working group.
---
## Working Group Name
Webpack Core Working Group
## Purpose and Responsibilities
The purpose of this working group is to facilitate, implement and fix problems and features within the core of webpack. This core includes tasking such as bugfixes, feature implementation and in general maintaining the main logic of webpack.
Each member of the working group is required to adhere to the [governance model of webpack](https://github.com/webpack/governance). In addition to having responsibility of the main part of webpack, the working group will manage other parts of the webpack organization repositories in such way they see fit.
## Goals & Objectives
- Develop features within the webpack organization and core areas.
- Fix bugs within webpack organization and core areas.
- Maintain and steer webpack in general together with the Technical Steering Committee.
- Ensure performance and code coverage is sustained and top-notch.
## Members
- [snitin315](https://github.com/snitin315) -
**Nitin Kumar** <<snitin315@gmail.com>> (he/him)
- [thelarkinn](https://github.com/thelarkinn) -
**Sean Larkin** <<selarkin@microsoft.com>> (he/him)
- [jhnns](https://github.com/jhnns) -
**Johannes Ewald** <<mail@johannesewald.de>>
- [sokra](https://github.com/sokra) -
**Tobias Koppers** <<jackworks@protonmail.co>>
- [spacek33z](https://github.com/spacek33z) -
**Kees Kluskens** <<kees@webduck.nl>>
## Communication
Meetings are hosted on an as-needed basis and private discussions are held in the #core-wg channel. For public feedback and communication, please use an appropriate channel within the webpack discord (e.g `#development-general`).
## Resources
- https://github.com/webpack
- https://github.com/webpack/governance
## Reporting & Updates
- The working group can choose to involve the webpack TSC for feedback and updates, but has full autonomy of making changes to any codebase within webpack.

View File

@ -146,7 +146,6 @@
"membertest",
"memfs",
"mergeable",
"meriyah",
"metacharacters",
"microtask",
"microtasks",
@ -285,7 +284,6 @@
"url's",
"valign",
"valtype",
"walltime",
"wasi",
"wasm",
"watchings",
@ -306,6 +304,10 @@
"commithash",
"formaters",
"akait",
"Akait",
"ematipico",
"Emanuele",
"Stoppa",
"evenstensberg",
"Stensberg",
"ovflowd",
@ -314,10 +316,7 @@
"Nitin",
"Kumar",
"spacek",
"thelarkinn",
"behaviour",
"WHATWG",
"publicpath"
"thelarkinn"
],
"ignoreRegExpList": [
"/Author.+/",

23
declarations.d.ts vendored
View File

@ -1,3 +1,4 @@
type TODO = any;
type EXPECTED_ANY = any;
type EXPECTED_FUNCTION = Function;
type EXPECTED_OBJECT = object;
@ -54,7 +55,7 @@ declare module "neo-async" {
(err?: E, result?: T): void;
}
export interface AsyncResultArrayCallback<T, E> {
(err: E | null, results?: Array<T | undefined>): void;
(err?: E, results?: Array<T | undefined>): void;
}
export interface AsyncResultObjectCallback<T, E> {
(err: E | undefined, results: Dictionary<T | undefined>): void;
@ -140,18 +141,6 @@ declare module "neo-async" {
concurrency?: number
): QueueObject<T, E>;
export function series<T, E = Error>(
tasks: Array<AsyncFunction<T, E>>,
callback?: AsyncResultArrayCallback<T, E>
): void;
export function series<T, E = Error>(
tasks: Dictionary<AsyncFunction<T, E>>,
callback?: AsyncResultObjectCallback<T, E>
): void;
export function series<T, R, E = Error>(
tasks: Array<AsyncFunction<T, E>> | Dictionary<AsyncFunction<T, E>>
): Promise<R>;
export const forEach: typeof each;
export const forEachLimit: typeof eachLimit;
}
@ -382,12 +371,6 @@ declare module "watchpack" {
}
declare module "eslint-scope/lib/referencer" {
type Property = import("estree").Property;
type PropertyDefinition = import("estree").PropertyDefinition;
class Referencer {
Property(node: PropertyDefinition | Property): void;
PropertyDefinition(node: PropertyDefinition): void;
}
class Referencer {}
export = Referencer;
}

View File

@ -10,9 +10,8 @@ import type Hash from "../lib/util/Hash";
import type { InputFileSystem } from "../lib/util/fs";
import type { Logger } from "../lib/logging/Logger";
import type {
ImportModuleOptions,
ImportModuleCallback,
ExecuteModuleExports
ImportModuleOptions
} from "../lib/dependencies/LoaderPlugin";
import type { Resolver } from "enhanced-resolve";
import type {
@ -34,7 +33,7 @@ export interface NormalModuleLoaderContext<OptionsType> {
emitWarning(warning: Error): void;
emitError(error: Error): void;
getLogger(name?: string): Logger;
resolve(context: string, request: string, callback: ResolveCallback): void;
resolve(context: string, request: string, callback: ResolveCallback): any;
getResolve(
options?: ResolveOptionsWithDependencyType
): ((context: string, request: string, callback: ResolveCallback) => void) &
@ -59,7 +58,7 @@ export interface NormalModuleLoaderContext<OptionsType> {
hashFunction: HashFunction;
hashDigest: HashDigest;
hashDigestLength: HashDigestLength;
hashSalt?: HashSalt;
hashSalt: HashSalt;
_module?: NormalModule;
_compilation?: Compilation;
_compiler?: Compiler;
@ -93,10 +92,7 @@ export interface LoaderPluginLoaderContext {
options: ImportModuleOptions | undefined,
callback: ImportModuleCallback
): void;
importModule(
request: string,
options?: ImportModuleOptions
): Promise<ExecuteModuleExports>;
importModule(request: string, options?: ImportModuleOptions): Promise<any>;
}
/** The properties are added by https://github.com/webpack/loader-runner */

View File

@ -47,10 +47,6 @@ export type DevServer =
* A developer tool to enhance debugging (false | eval | [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map).
*/
export type DevTool = (false | "eval") | string;
/**
* Enable and configure the Dotenv plugin to load environment variables from .env files.
*/
export type Dotenv = boolean | DotenvPluginOptions;
/**
* The entry point(s) of the compilation.
*/
@ -86,7 +82,10 @@ export type EntryFilename = FilenameTemplate;
*/
export type FilenameTemplate =
| string
| import("../lib/TemplatedPathPlugin").TemplatePathFn;
| ((
pathData: import("../lib/Compilation").PathData,
assetInfo?: import("../lib/Compilation").AssetInfo
) => string);
/**
* Specifies the layer in which modules of this entrypoint are placed.
*/
@ -145,7 +144,10 @@ export type PublicPath = "auto" | RawPublicPath;
*/
export type RawPublicPath =
| string
| import("../lib/TemplatedPathPlugin").TemplatePathFn;
| ((
pathData: import("../lib/Compilation").PathData,
assetInfo?: import("../lib/Compilation").AssetInfo
) => string);
/**
* The name of the runtime chunk. If set a runtime chunk with this name is created or an existing entrypoint is used as runtime.
*/
@ -195,13 +197,16 @@ export type ExternalItemFunction =
/**
* The function is called on each dependency (`function(context, request, callback(err, result))`).
*/
export type ExternalItemFunctionCallback =
import("../lib/ExternalModuleFactoryPlugin").ExternalItemFunctionCallback;
export type ExternalItemFunctionCallback = (
data: ExternalItemFunctionData,
callback: (err?: Error | null, result?: ExternalItemValue) => void
) => void;
/**
* The function is called on each dependency (`function(context, request)`).
*/
export type ExternalItemFunctionPromise =
import("../lib/ExternalModuleFactoryPlugin").ExternalItemFunctionPromise;
export type ExternalItemFunctionPromise = (
data: ExternalItemFunctionData
) => Promise<ExternalItemValue>;
/**
* Specifies the default type of externals ('amd*', 'umd*', 'system' and 'jsonp' depend on output.libraryTarget set to the same value).
*/
@ -227,10 +232,7 @@ export type ExternalsType =
| "import"
| "module-import"
| "script"
| "node-commonjs"
| "asset"
| "css-import"
| "css-url";
| "node-commonjs";
/**
* Ignore specific warnings.
*/
@ -464,7 +466,10 @@ export type OptimizationSplitChunksSizes =
*/
export type AssetModuleFilename =
| string
| import("../lib/TemplatedPathPlugin").TemplatePathFn;
| ((
pathData: import("../lib/Compilation").PathData,
assetInfo?: import("../lib/Compilation").AssetInfo
) => string);
/**
* Add charset attribute for script tag.
*/
@ -512,7 +517,7 @@ export type CssFilename = FilenameTemplate;
*/
export type DevtoolFallbackModuleFilenameTemplate =
| string
| import("../lib/ModuleFilenameHelpers").ModuleFilenameTemplateFunction;
| ((context: TODO) => string);
/**
* Filename template string of function for the sources array in a generated SourceMap.
*/
@ -544,7 +549,7 @@ export type Filename = FilenameTemplate;
*/
export type GlobalObject = string;
/**
* Digest types used for the hash.
* Digest type used for the hash.
*/
export type HashDigest = string;
/**
@ -724,7 +729,10 @@ export type WarningFilterTypes =
export type WarningFilterItemTypes =
| RegExp
| string
| import("../lib/stats/DefaultStatsPresetPlugin").WarningFilterFn;
| ((
warning: import("../lib/stats/DefaultStatsFactoryPlugin").StatsError,
value: string
) => boolean);
/**
* Environment to build for. An array of environments to build for all of them when possible.
*/
@ -756,7 +764,10 @@ export type AssetGeneratorOptions = AssetInlineGeneratorOptions &
*/
export type AssetModuleOutputPath =
| string
| import("../lib/TemplatedPathPlugin").TemplatePathFn;
| ((
pathData: import("../lib/Compilation").PathData,
assetInfo?: import("../lib/Compilation").AssetInfo
) => string);
/**
* Function that executes for module and should return whenever asset should be inlined as DataUrl.
*/
@ -782,10 +793,6 @@ export type CssGeneratorExportsOnly = boolean;
* Configure the generated local ident name.
*/
export type CssGeneratorLocalIdentName = string;
/**
* Configure how CSS content is exported as default.
*/
export type CssParserExportType = "link" | "text";
/**
* Enable/disable `@import` at-rules handling.
*/
@ -815,6 +822,33 @@ export type EntryNormalized = EntryDynamicNormalized | EntryStaticNormalized;
*/
export type ExperimentsNormalized = ExperimentsCommon &
ExperimentsNormalizedExtra;
/**
* Get a resolve function with the current resolver options.
*/
export type ExternalItemFunctionDataGetResolve = (
options?: ResolveOptions
) =>
| ExternalItemFunctionDataGetResolveCallbackResult
| ExternalItemFunctionDataGetResolveResult;
/**
* Result of get a resolve function with the current resolver options.
*/
export type ExternalItemFunctionDataGetResolveCallbackResult = (
context: string,
request: string,
callback: (
err?: Error | null,
result?: string | false,
resolveRequest?: import("enhanced-resolve").ResolveRequest
) => void
) => void;
/**
* Callback result of get a resolve function with the current resolver options.
*/
export type ExternalItemFunctionDataGetResolveResult = (
context: string,
request: string
) => Promise<string>;
/**
* The dependency used for the external.
*/
@ -855,13 +889,6 @@ export type OptimizationRuntimeChunkNormalized =
*/
name?: import("../lib/optimize/RuntimeChunkPlugin").RuntimeChunkFunction;
};
/**
* Add additional plugins to the compiler.
*/
export type PluginsNormalized = (
| WebpackPluginInstance
| WebpackPluginFunction
)[];
/**
* Options object as provided by the user.
@ -895,10 +922,6 @@ export interface WebpackOptions {
* A developer tool to enhance debugging (false | eval | [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map).
*/
devtool?: DevTool;
/**
* Enable and configure the Dotenv plugin to load environment variables from .env files.
*/
dotenv?: Dotenv;
/**
* The entry point(s) of the compilation.
*/
@ -1123,23 +1146,6 @@ export interface FileCacheOptions {
*/
version?: string;
}
/**
* Options for Dotenv plugin.
*/
export interface DotenvPluginOptions {
/**
* The directory from which .env files are loaded. Can be an absolute path, false will disable the .env file loading.
*/
dir?: false | string;
/**
* Only expose environment variables that start with these prefixes. Defaults to 'WEBPACK_'.
*/
prefix?: string[] | string;
/**
* Template patterns for .env file names. Use [mode] as placeholder for the webpack mode. Defaults to ['.env', '.env.local', '.env.[mode]', '.env.[mode].local'].
*/
template?: string[];
}
/**
* Multiple entry bundles are created. The key is the entry name. The value can be a string, an array or an entry description object.
*/
@ -1454,10 +1460,6 @@ export interface RuleSetRule {
* Shortcut for resource.exclude.
*/
exclude?: RuleSetConditionOrConditionsAbsolute;
/**
* Enable/Disable extracting source map.
*/
extractSourceMap?: boolean;
/**
* The options for the module generator.
*/
@ -1888,7 +1890,7 @@ export interface OptimizationSplitChunksOptions {
chunks?:
| ("initial" | "async" | "all")
| RegExp
| import("../lib/optimize/SplitChunksPlugin").ChunkFilterFn;
| ((chunk: import("../lib/Chunk")) => boolean);
/**
* Sets the size types which are used when a number is used for sizes.
*/
@ -1911,7 +1913,7 @@ export interface OptimizationSplitChunksOptions {
chunks?:
| ("initial" | "async" | "all")
| RegExp
| import("../lib/optimize/SplitChunksPlugin").ChunkFilterFn;
| ((chunk: import("../lib/Chunk")) => boolean);
/**
* Maximal size hint for the on-demand chunks.
*/
@ -1936,7 +1938,12 @@ export interface OptimizationSplitChunksOptions {
/**
* Sets the template for the filename for created chunks.
*/
filename?: string | import("../lib/TemplatedPathPlugin").TemplatePathFn;
filename?:
| string
| ((
pathData: import("../lib/Compilation").PathData,
assetInfo?: import("../lib/Compilation").AssetInfo
) => string);
/**
* Prevents exposing path info when creating names for parts splitted by maxSize.
*/
@ -1980,7 +1987,14 @@ export interface OptimizationSplitChunksOptions {
/**
* Give chunks created a name (chunks with equal name are merged).
*/
name?: false | string | import("../lib/optimize/SplitChunksPlugin").GetNameFn;
name?:
| false
| string
| ((
module: import("../lib/Module"),
chunks: import("../lib/Chunk")[],
key: string
) => string | undefined);
/**
* Compare used exports when checking common modules. Modules will only be put in the same chunk when exports are equal.
*/
@ -2000,7 +2014,7 @@ export interface OptimizationSplitChunksCacheGroup {
chunks?:
| ("initial" | "async" | "all")
| RegExp
| import("../lib/optimize/SplitChunksPlugin").ChunkFilterFn;
| ((chunk: import("../lib/Chunk")) => boolean);
/**
* Ignore minimum size, minimum chunks and maximum requests and always create chunks for this cache group.
*/
@ -2012,7 +2026,12 @@ export interface OptimizationSplitChunksCacheGroup {
/**
* Sets the template for the filename for created chunks.
*/
filename?: string | import("../lib/TemplatedPathPlugin").TemplatePathFn;
filename?:
| string
| ((
pathData: import("../lib/Compilation").PathData,
assetInfo?: import("../lib/Compilation").AssetInfo
) => string);
/**
* Sets the hint for chunk id.
*/
@ -2060,7 +2079,14 @@ export interface OptimizationSplitChunksCacheGroup {
/**
* Give chunks for this cache group a name (chunks with equal name are merged).
*/
name?: false | string | import("../lib/optimize/SplitChunksPlugin").GetNameFn;
name?:
| false
| string
| ((
module: import("../lib/Module"),
chunks: import("../lib/Chunk")[],
key: string
) => string | undefined);
/**
* Priority of this cache group.
*/
@ -2189,7 +2215,7 @@ export interface Output {
*/
globalObject?: GlobalObject;
/**
* Digest types used for the hash.
* Digest type used for the hash.
*/
hashDigest?: HashDigest;
/**
@ -2324,7 +2350,7 @@ export interface CleanOptions {
/**
* Keep these assets.
*/
keep?: RegExp | string | import("../lib/CleanPlugin").KeepFn;
keep?: RegExp | string | ((filename: string) => boolean);
}
/**
* The abilities of the environment where the webpack generated code should run.
@ -2370,10 +2396,6 @@ export interface Environment {
* The environment supports 'globalThis'.
*/
globalThis?: boolean;
/**
* The environment supports `import.meta.dirname` and `import.meta.filename`.
*/
importMetaDirnameAndFilename?: boolean;
/**
* The environment supports EcmaScript Module syntax to import EcmaScript modules (import ... from '...').
*/
@ -2446,19 +2468,6 @@ export interface SnapshotOptions {
*/
timestamp?: boolean;
};
/**
* Options for snapshotting the context module to determine if it needs to be built again.
*/
contextModule?: {
/**
* Use hashes of the content of the files/directories to determine invalidation.
*/
hash?: boolean;
/**
* Use timestamps of the files/directories to determine invalidation.
*/
timestamp?: boolean;
};
/**
* List of paths that are managed by a package manager and contain a version or hash in its path so all files are immutable.
*/
@ -2550,7 +2559,7 @@ export interface StatsOptions {
/**
* Add children information.
*/
children?: StatsValue[] | StatsValue;
children?: boolean;
/**
* Display auxiliary assets in chunk groups.
*/
@ -2978,10 +2987,6 @@ export interface CssAutoGeneratorOptions {
* Parser options for css/auto modules.
*/
export interface CssAutoParserOptions {
/**
* Configure how CSS content is exported as default.
*/
exportType?: CssParserExportType;
/**
* Enable/disable `@import` at-rules handling.
*/
@ -3016,10 +3021,6 @@ export interface CssGlobalGeneratorOptions {
* Configure the generated JS modules that use the ES modules syntax.
*/
esModule?: CssGeneratorEsModule;
/**
* Configure how CSS content is exported as default.
*/
exportType?: CssParserExportType;
/**
* Specifies the convention of exported names.
*/
@ -3037,10 +3038,6 @@ export interface CssGlobalGeneratorOptions {
* Parser options for css/global modules.
*/
export interface CssGlobalParserOptions {
/**
* Configure how CSS content is exported as default.
*/
exportType?: CssParserExportType;
/**
* Enable/disable `@import` at-rules handling.
*/
@ -3062,10 +3059,6 @@ export interface CssModuleGeneratorOptions {
* Configure the generated JS modules that use the ES modules syntax.
*/
esModule?: CssGeneratorEsModule;
/**
* Configure how CSS content is exported as default.
*/
exportType?: CssParserExportType;
/**
* Specifies the convention of exported names.
*/
@ -3083,10 +3076,6 @@ export interface CssModuleGeneratorOptions {
* Parser options for css/module modules.
*/
export interface CssModuleParserOptions {
/**
* Configure how CSS content is exported as default.
*/
exportType?: CssParserExportType;
/**
* Enable/disable `@import` at-rules handling.
*/
@ -3104,10 +3093,6 @@ export interface CssModuleParserOptions {
* Parser options for css modules.
*/
export interface CssParserOptions {
/**
* Configure how CSS content is exported as default.
*/
exportType?: CssParserExportType;
/**
* Enable/disable `@import` at-rules handling.
*/
@ -3207,6 +3192,10 @@ export interface ExperimentsCommon {
* Apply defaults of next major version.
*/
futureDefaults?: boolean;
/**
* Enable module layers.
*/
layers?: boolean;
/**
* Allow output javascript files as module source type.
*/
@ -3215,6 +3204,35 @@ export interface ExperimentsCommon {
* Support WebAssembly as synchronous EcmaScript Module (outdated).
*/
syncWebAssembly?: boolean;
/**
* Allow using top-level-await in EcmaScript Modules.
*/
topLevelAwait?: boolean;
}
/**
* Data object passed as argument when a function is set for 'externals'.
*/
export interface ExternalItemFunctionData {
/**
* The directory in which the request is placed.
*/
context?: string;
/**
* Contextual information.
*/
contextInfo?: import("../lib/ModuleFactory").ModuleFactoryCreateDataContextInfo;
/**
* The category of the referencing dependencies.
*/
dependencyType?: string;
/**
* Get a resolve function with the current resolver options.
*/
getResolve?: ExternalItemFunctionDataGetResolve;
/**
* The request as written by the user in the require/import expression/statement.
*/
request?: string;
}
/**
* Options for building http resources.
@ -3341,10 +3359,6 @@ export interface JavascriptParserOptions {
* Override the module to strict or non-strict. This may affect the behavior of the module (some behaviors differ between strict and non-strict), so please configure this option carefully.
*/
overrideStrict?: "strict" | "non-strict";
/**
* Function to parser source code.
*/
parse?: import("../lib/javascript/JavascriptParser").ParseFunction;
/**
* Specifies the behavior of invalid export names in "export ... from ...". This might be useful to disable during the migration from "export ... from ..." to "export type ... from ..." when reexporting types in TypeScript.
*/
@ -3413,6 +3427,7 @@ export interface JavascriptParserOptions {
* Set the inner regular expression for partial dynamic dependencies.
*/
wrappedContextRegExp?: RegExp;
[k: string]: any;
}
/**
* Generator options for json modules.
@ -3431,14 +3446,12 @@ export interface JsonParserOptions {
* The depth of json dependency flagged as `exportInfo`.
*/
exportsDepth?: number;
/**
* Allow named exports for json of object type.
*/
namedExports?: boolean;
/**
* Function to parser content and return JSON.
*/
parse?: import("../lib/json/JsonParser").ParseFn;
parse?: (
input: string
) => Buffer | import("../lib/json/JsonParser").JsonValue;
}
/**
* Options for the default backend.
@ -3454,7 +3467,7 @@ export interface LazyCompilationDefaultBackendOptions {
listen?:
| number
| import("net").ListenOptions
| import("../lib/hmr/lazyCompilationBackend").Listen;
| ((server: import("net").Server) => void);
/**
* Specifies the protocol the client should use to connect to the server.
*/
@ -3467,7 +3480,7 @@ export interface LazyCompilationDefaultBackendOptions {
| import("../lib/hmr/lazyCompilationBackend").HttpsServerOptions
| import("../lib/hmr/lazyCompilationBackend").HttpServerOptions
)
| import("../lib/hmr/lazyCompilationBackend").CreateServerFunction;
| (() => import("../lib/hmr/lazyCompilationBackend").Server);
}
/**
* Options for compiling entrypoints and import()s only when they are accessed.
@ -3477,7 +3490,18 @@ export interface LazyCompilationOptions {
* Specifies the backend that should be used for handling client keep alive.
*/
backend?:
| import("../lib/hmr/LazyCompilationPlugin").BackEnd
| (
| ((
compiler: import("../lib/Compiler"),
callback: (
err: Error | null,
api?: import("../lib/hmr/LazyCompilationPlugin").BackendApi
) => void
) => void)
| ((
compiler: import("../lib/Compiler")
) => Promise<import("../lib/hmr/LazyCompilationPlugin").BackendApi>)
)
| LazyCompilationDefaultBackendOptions;
/**
* Enable/disable lazy compilation for entries.
@ -3490,7 +3514,7 @@ export interface LazyCompilationOptions {
/**
* Specify which entrypoints or import()ed modules should be lazily compiled. This is matched with the imported module and not the entrypoint name.
*/
test?: RegExp | string | import("../lib/hmr/LazyCompilationPlugin").TestFn;
test?: RegExp | string | ((module: import("../lib/Module")) => boolean);
}
/**
* Options affecting the normal modules (`NormalModuleFactory`).
@ -3578,7 +3602,7 @@ export interface OptimizationNormalized {
/**
* Minimizer(s) to use for minimizing the output.
*/
minimizer?: ("..." | WebpackPluginInstance | WebpackPluginFunction)[];
minimizer?: ("..." | Falsy | WebpackPluginInstance | WebpackPluginFunction)[];
/**
* Define the algorithm to choose module ids (natural: numeric ids in order of usage, named: readable ids for better debugging, hashed: (deprecated) short hashes as ids for better long term caching, deterministic: numeric hash ids for better long term caching, size: numeric ids focused on minimal initial download size, false: no algorithm used, as custom one can be provided via plugin).
*/
@ -3721,7 +3745,7 @@ export interface OutputNormalized {
*/
globalObject?: GlobalObject;
/**
* Digest types used for the hash.
* Digest type used for the hash.
*/
hashDigest?: HashDigest;
/**
@ -3865,10 +3889,6 @@ export interface WebpackOptionsNormalized {
* A developer tool to enhance debugging (false | eval | [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map).
*/
devtool?: DevTool;
/**
* Enable and configure the Dotenv plugin to load environment variables from .env files.
*/
dotenv?: Dotenv;
/**
* The entry point(s) of the compilation.
*/
@ -3936,7 +3956,7 @@ export interface WebpackOptionsNormalized {
/**
* Add additional plugins to the compiler.
*/
plugins: PluginsNormalized;
plugins: Plugins;
/**
* Capture timing information for each module.
*/
@ -3998,7 +4018,6 @@ export interface ExperimentsExtra {
* Compile entrypoints and import()s only when they are accessed.
*/
lazyCompilation?: boolean | LazyCompilationOptions;
[k: string]: any;
}
/**
* Enables/Disables experiments (experimental features with relax SemVer compatibility).
@ -4048,10 +4067,6 @@ export interface GeneratorOptionsByModuleTypeKnown {
* Generator options for asset modules.
*/
asset?: AssetGeneratorOptions;
/**
* No generator options are supported for this module type.
*/
"asset/bytes"?: EmptyGeneratorOptions;
/**
* Generator options for asset/inline modules.
*/
@ -4060,10 +4075,6 @@ export interface GeneratorOptionsByModuleTypeKnown {
* Generator options for asset/resource modules.
*/
"asset/resource"?: AssetResourceGeneratorOptions;
/**
* No generator options are supported for this module type.
*/
"asset/source"?: EmptyGeneratorOptions;
/**
* Generator options for css modules.
*/
@ -4120,10 +4131,6 @@ export interface ParserOptionsByModuleTypeKnown {
* Parser options for asset modules.
*/
asset?: AssetParserOptions;
/**
* No parser options are supported for this module type.
*/
"asset/bytes"?: EmptyParserOptions;
/**
* No parser options are supported for this module type.
*/

View File

@ -23,7 +23,7 @@ export type Rules = Rule[] | Rule;
/**
* Filtering rule as regex or string.
*/
export type Rule = RegExp | string | ((str: string) => boolean);
export type Rule = RegExp | string;
export interface BannerPluginOptions {
/**

View File

@ -7,7 +7,7 @@
/**
* Algorithm used for generation the hash (see node.js crypto package).
*/
export type HashFunction = string | typeof import("../../../lib/util/Hash");
export type HashFunction = string | typeof import("../../lib/util/Hash");
export interface HashedModuleIdsPluginOptions {
/**
@ -17,19 +17,7 @@ export interface HashedModuleIdsPluginOptions {
/**
* The encoding to use when generating the hash, defaults to 'base64'. All encodings from Node.JS' hash.digest are supported.
*/
hashDigest?:
| "base64"
| "base64url"
| "hex"
| "binary"
| "utf8"
| "utf-8"
| "utf16le"
| "utf-16le"
| "latin1"
| "ascii"
| "ucs2"
| "ucs-2";
hashDigest?: "hex" | "latin1" | "base64";
/**
* The prefix length of the hash digest to use, defaults to 4.
*/

View File

@ -19,5 +19,5 @@ export type IgnorePluginOptions =
/**
* A filter function for resource and context.
*/
checkResource: import("../../lib/IgnorePlugin").CheckResourceFn;
checkResource: (resource: string, context: string) => boolean;
};

View File

@ -9,10 +9,6 @@ export interface JsonModulesPluginParserOptions {
* The depth of json dependency flagged as `exportInfo`.
*/
exportsDepth?: number;
/**
* Allow named exports for json of object type
*/
namedExports?: boolean;
/**
* Function that executes for a module source string and should return json-compatible data.
*/

View File

@ -1,72 +0,0 @@
/*
* This file was automatically generated.
* DO NOT MODIFY BY HAND.
* Run `yarn fix:special` to update
*/
export interface ManifestPluginOptions {
/**
* Enables/disables generation of the entrypoints manifest section.
*/
entrypoints?: boolean;
/**
* Specifies the filename of the output file on disk. By default the plugin will emit `manifest.json` inside the 'output.path' directory.
*/
filename?: string;
/**
* Allows filtering the files which make up the manifest.
*/
filter?: (item: ManifestItem) => boolean;
/**
* A function that receives the manifest object, modifies it, and returns the modified manifest.
*/
generate?: (manifest: ManifestObject) => ManifestObject;
/**
* Specifies a path prefix for all keys in the manifest.
*/
prefix?: string;
/**
* A function that receives the manifest object and returns the manifest string.
*/
serialize?: (manifest: ManifestObject) => string;
}
/**
* Describes a manifest entrypoint.
*/
export interface ManifestEntrypoint {
/**
* Contains the names of entrypoints.
*/
imports: string[];
/**
* Contains the names of parent entrypoints.
*/
parents?: string[];
}
/**
* Describes a manifest asset that links the emitted path to the producing asset.
*/
export interface ManifestItem {
/**
* The path absolute URL (this indicates that the path is absolute from the server's root directory) to file.
*/
file: string;
/**
* The source path relative to the context.
*/
src?: string;
}
/**
* The manifest object.
*/
export interface ManifestObject {
/**
* Contains the names of assets.
*/
assets: Record<string, ManifestItem>;
/**
* Contains the names of entrypoints.
*/
entrypoints: Record<string, ManifestEntrypoint>;
[k: string]: any;
}

View File

@ -8,7 +8,11 @@ export type ProgressPluginArgument = ProgressPluginOptions | HandlerFunction;
/**
* Function that executes for every progress step.
*/
export type HandlerFunction = import("../../lib/ProgressPlugin").HandlerFn;
export type HandlerFunction = (
percentage: number,
msg: string,
...args: string[]
) => void;
/**
* Options object for the ProgressPlugin.

View File

@ -5,13 +5,13 @@
*/
/**
* One or multiple conditions used to match resource.
* Include source maps for modules based on their extension (defaults to .js and .css).
*/
export type Rules = Rule[] | Rule;
/**
* Condition used to match resource (string, RegExp or Function).
* Include source maps for modules based on their extension (defaults to .js and .css).
*/
export type Rule = RegExp | string | ((str: string) => boolean);
export type Rule = RegExp | string;
export interface SourceMapDevToolPluginOptions {
/**
@ -20,7 +20,10 @@ export interface SourceMapDevToolPluginOptions {
append?:
| (false | null)
| string
| import("../../lib/TemplatedPathPlugin").TemplatePathFn;
| ((
pathData: import("../../lib/Compilation").PathData,
assetInfo?: import("../../lib/Compilation").AssetInfo
) => string);
/**
* Indicates whether column mappings should be used (defaults to true).
*/
@ -47,10 +50,6 @@ export interface SourceMapDevToolPluginOptions {
* Defines the output filename of the SourceMap (will be inlined if no value is provided).
*/
filename?: (false | null) | string;
/**
* Decide whether to ignore source files that match the specified value in the SourceMap.
*/
ignoreList?: Rules;
/**
* Include source maps for module paths that match the given value.
*/

View File

@ -29,10 +29,7 @@ export type ExternalsType =
| "import"
| "module-import"
| "script"
| "node-commonjs"
| "asset"
| "css-import"
| "css-url";
| "node-commonjs";
/**
* Container locations and request scopes from which modules should be resolved and loaded at runtime. When provided, property name is used as request scope, otherwise request scope is automatically inferred from container location.
*/

View File

@ -86,10 +86,7 @@ export type ExternalsType =
| "import"
| "module-import"
| "script"
| "node-commonjs"
| "asset"
| "css-import"
| "css-url";
| "node-commonjs";
/**
* Container locations and request scopes from which modules should be resolved and loaded at runtime. When provided, property name is used as request scope, otherwise request scope is automatically inferred from container location.
*/

View File

@ -10,7 +10,9 @@ export type VirtualUrlPluginOptions = VirtualUrlOptions;
*/
export type VirtualModuleContent =
| string
| import("../../../lib/schemes/VirtualUrlPlugin").SourceFn
| ((
loaderContext: import("webpack").LoaderContext<EXPECTED_ANY>
) => Promise<string> | string)
| VirtualModule;
/**
@ -35,7 +37,9 @@ export interface VirtualModule {
/**
* The source function that provides the virtual content.
*/
source: import("../../../lib/schemes/VirtualUrlPlugin").SourceFn;
source: (
loaderContext: import("webpack").LoaderContext<EXPECTED_ANY>
) => Promise<string> | string;
/**
* The module type.
*/
@ -43,8 +47,5 @@ export interface VirtualModule {
/**
* Optional version function or value for cache invalidation.
*/
version?:
| true
| string
| import("../../../lib/schemes/VirtualUrlPlugin").VersionFn;
version?: true | string | (() => string | undefined);
}

View File

@ -46,9 +46,7 @@ export default defineConfig([
// Ignore some examples files
"examples/**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx,md}",
"!examples/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx,md}",
"!examples/**/webpack.config.js",
"!examples/**/test.filter.js"
"!examples/*/webpack.config.js"
]),
{
ignores: ["lib/**/*.runtime.js", "hot/*.js"],
@ -216,8 +214,6 @@ export default defineConfig([
{
files: ["examples/**/*.js"],
rules: {
"no-console": "off",
// For examples purposes
"n/no-unsupported-features/es-builtins": "off",
"n/no-unsupported-features/es-syntax": "off",

View File

@ -28,12 +28,11 @@
24. [Requests](#requests)
25. [Building an Example](#building-an-example)
## Aggressive Merging
## Aggressive Merging
[aggressive-merging](aggressive-merging)
## Chunk
[chunkhash](chunkhash)
[common-chunk-and-vendor-chunk](common-chunk-and-vendor-chunk)
@ -51,13 +50,11 @@
[two-explicit-vendor-chunks](two-explicit-vendor-chunks)
## Code Splitted
[code-splitted-require.context-amd](code-splitted-require.context-amd) example demonstrating contexts in a code-split environment with AMD.
[code-splitted-require.context](code-splitted-require.context) example demonstrating contexts in a code-split environment.
## Code Splitting
[code-splitting](code-splitting) example demonstrating a very simple case of Code Splitting.
[code-splitting-bundle-loader](code-splitting-bundle-loader) example demonstrating Code Splitting through the bundle loader
@ -69,25 +66,20 @@
[code-splitting-specify-chunk-name](code-splitting-specify-chunk-name)
## Coffee Script
[coffee-script](coffee-script) example demonstrating code written in coffee-script.
## CommonJS
[commonjs](commonjs) example demonstrating a very simple program
## DLL
[dll](dll)
[dll-user](dll-user)
## Externals
[externals](externals)
## Harmony
[harmony](harmony)
[code-splitting-harmony](code-splitting-harmony)
@ -99,72 +91,56 @@
[harmony-unused](harmony-unused)
## HTTP2 Aggressive Splitting
[http2-aggressive-splitting](http2-aggressive-splitting)
## Hybrid Routing
[hybrid-routing](hybrid-routing)
## Loader
[loader](loader) example demonstrating the usage of loaders.
## Mixed
[mixed](mixed) example demonstrating mixing CommonJs and AMD
## Multi Compiler
[multi-compiler](multi-compiler)
## Multi Part Library
[multi-part-library](multi-part-library)
## Multiple Entry Points
[multiple-entry-points](multiple-entry-points) example demonstrating multiple entry points with Code Splitting.
## Require Context
[require.context](require.context) example demonstrating automatic creation of contexts when using variables in `require`.
## Require Resolve
[require.resolve](require.resolve) example demonstrating how to cache clearing of modules with `require.resolve` and `require.cache`.
## Scope Hoisting
[scope-hoisting](scope-hoisting)
## Side Effects
[side-effects](side-effects)
## TypeScript
[TypeScript](typescript)
## Source Map
[source-map](source-map)
## WebAssembly
[wasm-simple](wasm-simple) example demonstrating simple import from a WebAssembly module
[wasm-complex](wasm-complex) example demonstrating top-level await and import of WebAssembly text format with wast-loader
## Web Worker
[web-worker](worker) example demonstrating creating WebWorkers with webpack.
# Requests
# Requests
If you think an example is missing, please report it as issue. :)
# Building an Example
1. Run `yarn` in the root of the project.
2. Run `yarn setup` in the root of the project.
3. Run `yarn add --dev webpack-cli` in the root of the project.

View File

@ -34,8 +34,7 @@ a big file...
const path = require("path");
const { AggressiveMergingPlugin } = require("../..").optimize;
/** @type {import("webpack").Configuration} */
const config = {
module.exports = {
// mode: "development" || "production",
entry: {
pageA: "./pageA",
@ -56,8 +55,6 @@ const config = {
chunkIds: "deterministic" // To keep filename consistent between different modes (for example building only)
}
};
module.exports = config;
```
# Info
@ -65,9 +62,9 @@ module.exports = config;
## Unoptimized
```
asset pageA.bundle.js 8.81 KiB [emitted] (name: pageA)
asset pageB.bundle.js 8.81 KiB [emitted] (name: pageB)
asset pageC.bundle.js 8.81 KiB [emitted] (name: pageC)
asset pageA.bundle.js 8.85 KiB [emitted] (name: pageA)
asset pageB.bundle.js 8.85 KiB [emitted] (name: pageB)
asset pageC.bundle.js 8.85 KiB [emitted] (name: pageC)
asset 531.chunk.js 6.28 KiB [emitted]
asset 78.chunk.js 605 bytes [emitted]
chunk (runtime: pageC) 78.chunk.js 42 bytes [rendered]
@ -82,15 +79,15 @@ chunk (runtime: pageC) 78.chunk.js 42 bytes [rendered]
cjs self exports reference ./b.js 1:0-14
cjs require ./b ./pageB.js 2:8-22
cjs require ./b ./pageC.js 2:17-31
chunk (runtime: pageB) pageB.bundle.js (pageB) 69 bytes (javascript) 4.91 KiB (runtime) [entry] [rendered]
chunk (runtime: pageB) pageB.bundle.js (pageB) 69 bytes (javascript) 4.94 KiB (runtime) [entry] [rendered]
> ./pageB pageB
runtime modules 4.91 KiB 6 modules
runtime modules 4.94 KiB 6 modules
./pageB.js 69 bytes [built] [code generated]
[used exports unknown]
entry ./pageB pageB
chunk (runtime: pageA) pageA.bundle.js (pageA) 69 bytes (javascript) 4.91 KiB (runtime) [entry] [rendered]
chunk (runtime: pageA) pageA.bundle.js (pageA) 69 bytes (javascript) 4.94 KiB (runtime) [entry] [rendered]
> ./pageA pageA
runtime modules 4.91 KiB 6 modules
runtime modules 4.94 KiB 6 modules
./pageA.js 69 bytes [built] [code generated]
[used exports unknown]
entry ./pageA pageA
@ -112,9 +109,9 @@ chunk (runtime: pageA, pageB) 531.chunk.js 5.45 KiB [rendered]
cjs self exports reference ./common.js 1:0-14
amd require ./common ./pageA.js 1:0-3:2
amd require ./common ./pageB.js 1:0-3:2
chunk (runtime: pageC) pageC.bundle.js (pageC) 68 bytes (javascript) 4.91 KiB (runtime) [entry] [rendered]
chunk (runtime: pageC) pageC.bundle.js (pageC) 68 bytes (javascript) 4.94 KiB (runtime) [entry] [rendered]
> ./pageC pageC
runtime modules 4.91 KiB 6 modules
runtime modules 4.94 KiB 6 modules
./pageC.js 68 bytes [built] [code generated]
[used exports unknown]
entry ./pageC pageC
@ -124,9 +121,9 @@ webpack X.X.X compiled successfully
## Production mode
```
asset pageC.bundle.js 1.71 KiB [emitted] [minimized] (name: pageC)
asset pageA.bundle.js 1.7 KiB [emitted] [minimized] (name: pageA)
asset pageB.bundle.js 1.7 KiB [emitted] [minimized] (name: pageB)
asset pageC.bundle.js 1.73 KiB [emitted] [minimized] (name: pageC)
asset pageA.bundle.js 1.71 KiB [emitted] [minimized] (name: pageA)
asset pageB.bundle.js 1.71 KiB [emitted] [minimized] (name: pageB)
asset 531.chunk.js 154 bytes [emitted] [minimized]
asset 78.chunk.js 103 bytes [emitted] [minimized]
chunk (runtime: pageC) 78.chunk.js 42 bytes [rendered]
@ -141,15 +138,15 @@ chunk (runtime: pageC) 78.chunk.js 42 bytes [rendered]
cjs self exports reference ./b.js 1:0-14
cjs require ./b ./pageB.js 2:8-22
cjs require ./b ./pageC.js 2:17-31
chunk (runtime: pageB) pageB.bundle.js (pageB) 69 bytes (javascript) 4.91 KiB (runtime) [entry] [rendered]
chunk (runtime: pageB) pageB.bundle.js (pageB) 69 bytes (javascript) 4.94 KiB (runtime) [entry] [rendered]
> ./pageB pageB
runtime modules 4.91 KiB 6 modules
runtime modules 4.94 KiB 6 modules
./pageB.js 69 bytes [built] [code generated]
[no exports used]
entry ./pageB pageB
chunk (runtime: pageA) pageA.bundle.js (pageA) 69 bytes (javascript) 4.91 KiB (runtime) [entry] [rendered]
chunk (runtime: pageA) pageA.bundle.js (pageA) 69 bytes (javascript) 4.94 KiB (runtime) [entry] [rendered]
> ./pageA pageA
runtime modules 4.91 KiB 6 modules
runtime modules 4.94 KiB 6 modules
./pageA.js 69 bytes [built] [code generated]
[no exports used]
entry ./pageA pageA
@ -171,9 +168,9 @@ chunk (runtime: pageA, pageB) 531.chunk.js 5.45 KiB [rendered]
cjs self exports reference ./common.js 1:0-14
amd require ./common ./pageA.js 1:0-3:2
amd require ./common ./pageB.js 1:0-3:2
chunk (runtime: pageC) pageC.bundle.js (pageC) 68 bytes (javascript) 4.91 KiB (runtime) [entry] [rendered]
chunk (runtime: pageC) pageC.bundle.js (pageC) 68 bytes (javascript) 4.94 KiB (runtime) [entry] [rendered]
> ./pageC pageC
runtime modules 4.91 KiB 6 modules
runtime modules 4.94 KiB 6 modules
./pageC.js 68 bytes [built] [code generated]
[no exports used]
entry ./pageC pageC

View File

@ -3,8 +3,7 @@
const path = require("path");
const { AggressiveMergingPlugin } = require("../..").optimize;
/** @type {import("webpack").Configuration} */
const config = {
module.exports = {
// mode: "development" || "production",
entry: {
pageA: "./pageA",
@ -25,5 +24,3 @@ const config = {
chunkIds: "deterministic" // To keep filename consistent between different modes (for example building only)
}
};
module.exports = config;

View File

@ -42,8 +42,7 @@ function createImageElement(title, src) {
const svgToMiniDataURI = require("mini-svg-data-uri");
/** @type {import("webpack").Configuration} */
const config = {
module.exports = {
output: {
assetModuleFilename: "images/[hash][ext]"
},
@ -57,11 +56,7 @@ const config = {
test: /\.svg$/,
type: "asset",
generator: {
/**
* @param {string | Buffer} content the content
* @returns {string} data URI
*/
dataUrl: (content) => {
dataUrl: content => {
if (typeof content !== "string") {
content = content.toString();
}
@ -73,8 +68,6 @@ const config = {
]
}
};
module.exports = config;
```
# js/output.js

View File

Before

Width:  |  Height:  |  Size: 656 B

After

Width:  |  Height:  |  Size: 656 B

View File

@ -2,8 +2,7 @@
const svgToMiniDataURI = require("mini-svg-data-uri");
/** @type {import("webpack").Configuration} */
const config = {
module.exports = {
output: {
assetModuleFilename: "images/[hash][ext]"
},
@ -17,11 +16,7 @@ const config = {
test: /\.svg$/,
type: "asset",
generator: {
/**
* @param {string | Buffer} content the content
* @returns {string} data URI
*/
dataUrl: (content) => {
dataUrl: content => {
if (typeof content !== "string") {
content = content.toString();
}
@ -33,5 +28,3 @@ const config = {
]
}
};
module.exports = config;

View File

@ -0,0 +1,223 @@
This is a very simple example that shows the usage of the asset module type.
Files can be imported like other modules without file-loader.
# example.js
```javascript
import png from "./images/file.png";
import jpg from "./images/file.jpg";
import svg from "./images/file.svg";
const container = document.createElement("div");
Object.assign(container.style, {
display: "flex",
justifyContent: "center"
});
document.body.appendChild(container);
function createImageElement(title, src) {
const div = document.createElement("div");
div.style.textAlign = "center";
const h2 = document.createElement("h2");
h2.textContent = title;
div.appendChild(h2);
const img = document.createElement("img");
img.setAttribute("src", src);
img.setAttribute("width", "150");
div.appendChild(img);
container.appendChild(div);
}
[png, jpg, svg].forEach(src => {
createImageElement(src.split(".").pop(), src);
});
```
# webpack.config.js
```javascript
"use strict";
module.exports = {
output: {
assetModuleFilename: "images/[hash][ext]"
},
module: {
rules: [
{
test: /\.(png|jpg|svg)$/,
type: "asset"
}
]
}
};
```
# js/output.js
```javascript
/******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ([
/* 0 */,
/* 1 */
/*!*************************!*\
!*** ./images/file.png ***!
\*************************/
/*! default exports */
/*! exports [not provided] [no usage info] */
/*! runtime requirements: __webpack_require__.p, module, __webpack_require__.* */
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
module.exports = __webpack_require__.p + "images/89a353e9c515885abd8e.png";
/***/ }),
/* 2 */
/*!*************************!*\
!*** ./images/file.jpg ***!
\*************************/
/*! default exports */
/*! exports [not provided] [no usage info] */
/*! runtime requirements: module */
/***/ ((module) => {
module.exports = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAA...4CD/9M//Z";
/***/ }),
/* 3 */
/*!*************************!*\
!*** ./images/file.svg ***!
\*************************/
/*! default exports */
/*! exports [not provided] [no usage info] */
/*! runtime requirements: module */
/***/ ((module) => {
module.exports = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo...vc3ZnPgo=";
/***/ })
/******/ ]);
```
<details><summary><code>/* webpack runtime code */</code></summary>
``` js
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/publicPath */
/******/ (() => {
/******/ __webpack_require__.p = "dist/";
/******/ })();
/******/
/************************************************************************/
```
</details>
``` js
var __webpack_exports__ = {};
// This entry needs to be wrapped in an IIFE because it needs to be isolated against other modules in the chunk.
(() => {
/*!********************!*\
!*** ./example.js ***!
\********************/
/*! namespace exports */
/*! exports [not provided] [no usage info] */
/*! runtime requirements: __webpack_require__, __webpack_require__.r, __webpack_exports__, __webpack_require__.* */
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _images_file_png__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./images/file.png */ 1);
/* harmony import */ var _images_file_jpg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./images/file.jpg */ 2);
/* harmony import */ var _images_file_svg__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./images/file.svg */ 3);
const container = document.createElement("div");
Object.assign(container.style, {
display: "flex",
justifyContent: "center"
});
document.body.appendChild(container);
function createImageElement(title, src) {
const div = document.createElement("div");
div.style.textAlign = "center";
const h2 = document.createElement("h2");
h2.textContent = title;
div.appendChild(h2);
const img = document.createElement("img");
img.setAttribute("src", src);
img.setAttribute("width", "150");
div.appendChild(img);
container.appendChild(div);
}
[_images_file_png__WEBPACK_IMPORTED_MODULE_0__, _images_file_jpg__WEBPACK_IMPORTED_MODULE_1__, _images_file_svg__WEBPACK_IMPORTED_MODULE_2__].forEach(src => {
createImageElement(src.split(".").pop(), src);
});
})();
/******/ })()
;
```
# Info
## webpack output
```
asset images/89a353e9c515885abd8e.png 14.6 KiB [emitted] [immutable] [from: images/file.png] (auxiliary name: main)
asset output.js 13 KiB [emitted] (name: main)
chunk (runtime: main) output.js (main) 9.58 KiB (javascript) 14.6 KiB (asset) 306 bytes (runtime) [entry] [rendered]
> ./example.js main
dependent modules 8.86 KiB (javascript) 14.6 KiB (asset) [dependent] 3 modules
runtime modules 306 bytes 2 modules
./example.js 742 bytes [built] [code generated]
[no exports]
[used exports unknown]
entry ./example.js main
webpack X.X.X compiled successfully
```

View File

@ -0,0 +1,30 @@
import png from "./images/file.png";
import jpg from "./images/file.jpg";
import svg from "./images/file.svg";
const container = document.createElement("div");
Object.assign(container.style, {
display: "flex",
justifyContent: "center"
});
document.body.appendChild(container);
function createImageElement(title, src) {
const div = document.createElement("div");
div.style.textAlign = "center";
const h2 = document.createElement("h2");
h2.textContent = title;
div.appendChild(h2);
const img = document.createElement("img");
img.setAttribute("src", src);
img.setAttribute("width", "150");
div.appendChild(img);
container.appendChild(div);
}
[png, jpg, svg].forEach(src => {
createImageElement(src.split(".").pop(), src);
});

View File

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

View File

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

View File

Before

Width:  |  Height:  |  Size: 656 B

After

Width:  |  Height:  |  Size: 656 B

View File

@ -1,18 +1,15 @@
"use strict";
/** @type {import("webpack").Configuration} */
const config = {
module.exports = {
output: {
assetModuleFilename: "images/[hash][ext]"
},
module: {
rules: [
{
test: /file\.(png|jpg|svg)$/,
test: /\.(png|jpg|svg)$/,
type: "asset"
}
]
}
};
module.exports = config;

View File

@ -1,491 +0,0 @@
This is a very simple example that shows the usage of the asset module type.
Files can be imported like other modules without file-loader.
# example.js
```javascript
// There are different ways to use files:
// 1. Using `import something from "./file.ext";`
// return URLs or Data URL, depends on your configuration
import png from "./images/file.png";
import jpg from "./images/file.jpg";
import svg from "./images/file.svg";
// 2. Using `import something from "./file.ext"; with { type: "text" }` or `import something from "./file.ext"; with { type: "bytes" }`
// You don't need extra options in your configuration for these imports, they work out of the box
// returns the content as text
import text from "./content/file.text" with { type: "text" };
// returns the content as `Uint8Array`
import bytes from "./content/bytes.svg" with { type: "bytes" };
// 3. Using `new URL("./file.ext", import.meta.url);`
// You don't need extra options in your configuration for `new URL(...)` construction, they work out of the box
const url = new URL("./images/url.svg", import.meta.url);
const container = document.createElement("div");
Object.assign(container.style, {
display: "flex",
flexWrap: "wrap",
justifyContent: "center"
});
document.body.appendChild(container);
function createImageElement(div, data) {
const img = document.createElement("img");
img.setAttribute("src", data);
img.setAttribute("width", "150");
div.appendChild(img);
container.appendChild(div);
}
function createTextElement(div, data) {
const context = document.createElement("div");
context.textContent = data;
div.appendChild(context);
container.appendChild(div);
}
function createBlobElement(div, data) {
const blob = new Blob([data], { type: 'image/svg+xml' });
const blobUrl = URL.createObjectURL(blob);
const img = document.createElement("img");
img.setAttribute("src", blobUrl);
img.setAttribute("width", "150");
div.appendChild(img);
container.appendChild(div);
img.addEventListener(
'load',
() => { URL.revokeObjectURL(blobUrl) },
{ once: true }
);
}
const files = [
{
title: "import png from \"./images/file.png\";",
data: png,
render: createImageElement,
},
{
title: "import jpg from \"./images/file.jpg\";",
data: jpg,
render: createImageElement,
},
{
title: "import svg from \"./images/file.svg\";",
data: svg,
render: createImageElement,
},
{
title: "import text from \"./content/file.text\" with { type: \"text\" };",
data: text,
render: createTextElement,
},
{
title: "import bytes from \"./content/file.text\" with { type: \"bytes\" };",
data: bytes,
render: createBlobElement,
},
{
title: "new URL(\"./url.svg\", import.meta.url);",
data: url,
render: createImageElement,
},
];
function render(title, data, fn) {
const div = document.createElement("div");
div.style.textAlign = "center";
div.style.width = "50%";
const h2 = document.createElement("h2");
h2.textContent = title;
div.appendChild(h2);
fn(div, data)
}
files.forEach(item => {
render(item.title, item.data, item.render);
});
```
# webpack.config.js
```javascript
"use strict";
/** @type {import("webpack").Configuration} */
const config = {
output: {
assetModuleFilename: "images/[hash][ext]"
},
module: {
rules: [
{
test: /file\.(png|jpg|svg)$/,
type: "asset"
}
]
}
};
module.exports = config;
```
# js/output.js
```javascript
/******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ([
/* 0 */,
/* 1 */
/*!*************************!*\
!*** ./images/file.png ***!
\*************************/
/*! default exports */
/*! exports [not provided] [no usage info] */
/*! runtime requirements: __webpack_require__.p, module, __webpack_require__.* */
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
module.exports = __webpack_require__.p + "images/89a353e9c515885abd8e.png";
/***/ }),
/* 2 */
/*!*************************!*\
!*** ./images/file.jpg ***!
\*************************/
/*! default exports */
/*! exports [not provided] [no usage info] */
/*! runtime requirements: module */
/***/ ((module) => {
module.exports = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAA...4CD/9M//Z";
/***/ }),
/* 3 */
/*!*************************!*\
!*** ./images/file.svg ***!
\*************************/
/*! default exports */
/*! exports [not provided] [no usage info] */
/*! runtime requirements: module */
/***/ ((module) => {
module.exports = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo...vc3ZnPgo=";
/***/ }),
/* 4 */
/*!************************!*\
!*** ./images/url.svg ***!
\************************/
/*! default exports */
/*! exports [not provided] [no usage info] */
/*! runtime requirements: __webpack_require__.p, module, __webpack_require__.* */
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
module.exports = __webpack_require__.p + "images/afc10c70ed4ce2b33593.svg";
/***/ }),
/* 5 */
/*!***************************!*\
!*** ./content/file.text ***!
\***************************/
/*! default exports */
/*! exports [not provided] [no usage info] */
/*! runtime requirements: module */
/***/ ((module) => {
module.exports = "a Ā 𐀀 文 🦄 Text\n";
/***/ }),
/* 6 */
/*!***************************!*\
!*** ./content/bytes.svg ***!
\***************************/
/*! default exports */
/*! exports [not provided] [no usage info] */
/*! runtime requirements: __webpack_require__.*, __webpack_require__.tb, module */
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
module.exports = __webpack_require__.tb("PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MDAgNjAwIj48dGl0bGU+aWNvbi1zcXVhcmUtc21hbGw8L3RpdGxlPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0zMDAgLjFMNTY1IDE1MHYyOTkuOUwzMDAgNTk5LjggMzUgNDQ5LjlWMTUweiIvPjxwYXRoIGZpbGw9IiM4RUQ2RkIiIGQ9Ik01MTcuNyA0MzkuNUwzMDguOCA1NTcuOHYtOTJMNDM5IDM5NC4xbDc4LjcgNDUuNHptMTQuMy0xMi45VjE3OS40bC03Ni40IDQ0LjF2MTU5bDc2LjQgNDQuMXpNODEuNSA0MzkuNWwyMDguOSAxMTguMnYtOTJsLTEzMC4yLTcxLjYtNzguNyA0NS40em0tMTQuMy0xMi45VjE3OS40bDc2LjQgNDQuMXYxNTlsLTc2LjQgNDQuMXptOC45LTI2My4yTDI5MC40IDQyLjJ2ODlsLTEzNy4zIDc1LjUtMS4xLjYtNzUuOS00My45em00NDYuOSAwTDMwOC44IDQyLjJ2ODlMNDQ2IDIwNi44bDEuMS42IDc1LjktNDR6Ii8+PHBhdGggZmlsbD0iIzFDNzhDMCIgZD0iTTI5MC40IDQ0NC44TDE2MiAzNzQuMVYyMzQuMmwxMjguNCA3NC4xdjEzNi41em0xOC40IDBsMTI4LjQtNzAuNnYtMTQwbC0xMjguNCA3NC4xdjEzNi41ek0yOTkuNiAzMDN6bS0xMjktODVsMTI5LTcwLjlMNDI4LjUgMjE4bC0xMjguOSA3NC40LTEyOS03NC40eiIvPjwvc3ZnPgo=");
/***/ })
/******/ ]);
```
<details><summary><code>/* webpack runtime code */</code></summary>
``` js
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = __webpack_modules__;
/******/
/************************************************************************/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/to binary */
/******/ (() => {
/******/ // define to binary helper
/******/ __webpack_require__.tb = (() => {
/******/ var table = new Uint8Array(128);
/******/ for (var i = 0; i < 64; i++) table[i < 26 ? i + 65 : i < 52 ? i + 71 : i < 62 ? i - 4 : i * 4 - 205] = i;
/******/ return (base64) => {
/******/ var n = base64.length, bytes = new Uint8Array((n - (base64[n - 1] == '=') - (base64[n - 2] == '=')) * 3 / 4 | 0);
/******/ for (var i = 0, j = 0; i < n;) {
/******/ var c0 = table[base64.charCodeAt(i++)], c1 = table[base64.charCodeAt(i++)];
/******/ var c2 = table[base64.charCodeAt(i++)], c3 = table[base64.charCodeAt(i++)];
/******/ bytes[j++] = (c0 << 2) | (c1 >> 4);
/******/ bytes[j++] = (c1 << 4) | (c2 >> 2);
/******/ bytes[j++] = (c2 << 6) | c3;
/******/ }
/******/ return bytes
/******/ }
/******/ })();
/******/ })();
/******/
/******/ /* webpack/runtime/publicPath */
/******/ (() => {
/******/ __webpack_require__.p = "dist/";
/******/ })();
/******/
/******/ /* webpack/runtime/jsonp chunk loading */
/******/ (() => {
/******/ __webpack_require__.b = (typeof document !== 'undefined' && document.baseURI) || self.location.href;
/******/
/******/ // object to store loaded and loading chunks
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
/******/ var installedChunks = {
/******/ 0: 0
/******/ };
/******/
/******/ // no chunk on demand loading
/******/
/******/ // no prefetching
/******/
/******/ // no preloaded
/******/
/******/ // no HMR
/******/
/******/ // no HMR manifest
/******/
/******/ // no on chunks loaded
/******/
/******/ // no jsonp function
/******/ })();
/******/
/************************************************************************/
```
</details>
``` js
var __webpack_exports__ = {};
// This entry needs to be wrapped in an IIFE because it needs to be isolated against other modules in the chunk.
(() => {
/*!********************!*\
!*** ./example.js ***!
\********************/
/*! namespace exports */
/*! exports [not provided] [no usage info] */
/*! runtime requirements: __webpack_require__, __webpack_require__.b, __webpack_require__.r, __webpack_exports__, __webpack_require__.* */
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _images_file_png__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./images/file.png */ 1);
/* harmony import */ var _images_file_jpg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./images/file.jpg */ 2);
/* harmony import */ var _images_file_svg__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./images/file.svg */ 3);
/* harmony import */ var _content_file_text__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./content/file.text */ 5);
/* harmony import */ var _content_bytes_svg__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./content/bytes.svg */ 6);
// There are different ways to use files:
// 1. Using `import something from "./file.ext";`
// return URLs or Data URL, depends on your configuration
// 2. Using `import something from "./file.ext"; with { type: "text" }` or `import something from "./file.ext"; with { type: "bytes" }`
// You don't need extra options in your configuration for these imports, they work out of the box
// returns the content as text
// returns the content as `Uint8Array`
// 3. Using `new URL("./file.ext", import.meta.url);`
// You don't need extra options in your configuration for `new URL(...)` construction, they work out of the box
const url = new URL(/* asset import */ __webpack_require__(/*! ./images/url.svg */ 4), __webpack_require__.b);
const container = document.createElement("div");
Object.assign(container.style, {
display: "flex",
flexWrap: "wrap",
justifyContent: "center"
});
document.body.appendChild(container);
function createImageElement(div, data) {
const img = document.createElement("img");
img.setAttribute("src", data);
img.setAttribute("width", "150");
div.appendChild(img);
container.appendChild(div);
}
function createTextElement(div, data) {
const context = document.createElement("div");
context.textContent = data;
div.appendChild(context);
container.appendChild(div);
}
function createBlobElement(div, data) {
const blob = new Blob([data], { type: 'image/svg+xml' });
const blobUrl = URL.createObjectURL(blob);
const img = document.createElement("img");
img.setAttribute("src", blobUrl);
img.setAttribute("width", "150");
div.appendChild(img);
container.appendChild(div);
img.addEventListener(
'load',
() => { URL.revokeObjectURL(blobUrl) },
{ once: true }
);
}
const files = [
{
title: "import png from \"./images/file.png\";",
data: _images_file_png__WEBPACK_IMPORTED_MODULE_0__,
render: createImageElement,
},
{
title: "import jpg from \"./images/file.jpg\";",
data: _images_file_jpg__WEBPACK_IMPORTED_MODULE_1__,
render: createImageElement,
},
{
title: "import svg from \"./images/file.svg\";",
data: _images_file_svg__WEBPACK_IMPORTED_MODULE_2__,
render: createImageElement,
},
{
title: "import text from \"./content/file.text\" with { type: \"text\" };",
data: _content_file_text__WEBPACK_IMPORTED_MODULE_3__,
render: createTextElement,
},
{
title: "import bytes from \"./content/file.text\" with { type: \"bytes\" };",
data: _content_bytes_svg__WEBPACK_IMPORTED_MODULE_4__,
render: createBlobElement,
},
{
title: "new URL(\"./url.svg\", import.meta.url);",
data: url,
render: createImageElement,
},
];
function render(title, data, fn) {
const div = document.createElement("div");
div.style.textAlign = "center";
div.style.width = "50%";
const h2 = document.createElement("h2");
h2.textContent = title;
div.appendChild(h2);
fn(div, data)
}
files.forEach(item => {
render(item.title, item.data, item.render);
});
})();
/******/ })()
;
```
# Info
## webpack output
```
asset output.js 19.3 KiB [emitted] (name: main)
asset images/89a353e9c515885abd8e.png 14.6 KiB [emitted] [immutable] [from: images/file.png] (auxiliary name: main)
asset images/afc10c70ed4ce2b33593.svg 656 bytes [emitted] [immutable] [from: images/url.svg] (auxiliary name: main)
chunk (runtime: main) output.js (main) 12.4 KiB (javascript) 15.2 KiB (asset) 1.48 KiB (runtime) [entry] [rendered]
> ./example.js main
dependent modules 9.59 KiB (javascript) 15.2 KiB (asset) [dependent] 6 modules
runtime modules 1.48 KiB 5 modules
./example.js 2.85 KiB [built] [code generated]
[no exports]
[used exports unknown]
entry ./example.js main
webpack X.X.X compiled successfully
```

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><title>icon-square-small</title><path fill="#FFF" d="M300 .1L565 150v299.9L300 599.8 35 449.9V150z"/><path fill="#8ED6FB" d="M517.7 439.5L308.8 557.8v-92L439 394.1l78.7 45.4zm14.3-12.9V179.4l-76.4 44.1v159l76.4 44.1zM81.5 439.5l208.9 118.2v-92l-130.2-71.6-78.7 45.4zm-14.3-12.9V179.4l76.4 44.1v159l-76.4 44.1zm8.9-263.2L290.4 42.2v89l-137.3 75.5-1.1.6-75.9-43.9zm446.9 0L308.8 42.2v89L446 206.8l1.1.6 75.9-44z"/><path fill="#1C78C0" d="M290.4 444.8L162 374.1V234.2l128.4 74.1v136.5zm18.4 0l128.4-70.6v-140l-128.4 74.1v136.5zM299.6 303zm-129-85l129-70.9L428.5 218l-128.9 74.4-129-74.4z"/></svg>

Before

Width:  |  Height:  |  Size: 656 B

View File

@ -1 +0,0 @@
a Ā 𐀀 文 🦄 Text

View File

@ -1,116 +0,0 @@
// There are different ways to use files:
// 1. Using `import something from "./file.ext";`
// return URLs or Data URL, depends on your configuration
import png from "./images/file.png";
import jpg from "./images/file.jpg";
import svg from "./images/file.svg";
// 2. Using `import something from "./file.ext"; with { type: "text" }` or `import something from "./file.ext"; with { type: "bytes" }`
// You don't need extra options in your configuration for these imports, they work out of the box
// returns the content as text
import text from "./content/file.text" with { type: "text" };
// returns the content as `Uint8Array`
import bytes from "./content/bytes.svg" with { type: "bytes" };
// 3. Using `new URL("./file.ext", import.meta.url);`
// You don't need extra options in your configuration for `new URL(...)` construction, they work out of the box
const url = new URL("./images/url.svg", import.meta.url);
const container = document.createElement("div");
Object.assign(container.style, {
display: "flex",
flexWrap: "wrap",
justifyContent: "center"
});
document.body.appendChild(container);
function createImageElement(div, data) {
const img = document.createElement("img");
img.setAttribute("src", data);
img.setAttribute("width", "150");
div.appendChild(img);
container.appendChild(div);
}
function createTextElement(div, data) {
const context = document.createElement("div");
context.textContent = data;
div.appendChild(context);
container.appendChild(div);
}
function createBlobElement(div, data) {
const blob = new Blob([data], { type: 'image/svg+xml' });
const blobUrl = URL.createObjectURL(blob);
const img = document.createElement("img");
img.setAttribute("src", blobUrl);
img.setAttribute("width", "150");
div.appendChild(img);
container.appendChild(div);
img.addEventListener(
'load',
() => { URL.revokeObjectURL(blobUrl) },
{ once: true }
);
}
const files = [
{
title: "import png from \"./images/file.png\";",
data: png,
render: createImageElement,
},
{
title: "import jpg from \"./images/file.jpg\";",
data: jpg,
render: createImageElement,
},
{
title: "import svg from \"./images/file.svg\";",
data: svg,
render: createImageElement,
},
{
title: "import text from \"./content/file.text\" with { type: \"text\" };",
data: text,
render: createTextElement,
},
{
title: "import bytes from \"./content/file.text\" with { type: \"bytes\" };",
data: bytes,
render: createBlobElement,
},
{
title: "new URL(\"./url.svg\", import.meta.url);",
data: url,
render: createImageElement,
},
];
function render(title, data, fn) {
const div = document.createElement("div");
div.style.textAlign = "center";
div.style.width = "50%";
const h2 = document.createElement("h2");
h2.textContent = title;
div.appendChild(h2);
fn(div, data)
}
files.forEach(item => {
render(item.title, item.data, item.render);
});

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><title>icon-square-small</title><path fill="#FFF" d="M300 .1L565 150v299.9L300 599.8 35 449.9V150z"/><path fill="#8ED6FB" d="M517.7 439.5L308.8 557.8v-92L439 394.1l78.7 45.4zm14.3-12.9V179.4l-76.4 44.1v159l76.4 44.1zM81.5 439.5l208.9 118.2v-92l-130.2-71.6-78.7 45.4zm-14.3-12.9V179.4l76.4 44.1v159l-76.4 44.1zm8.9-263.2L290.4 42.2v89l-137.3 75.5-1.1.6-75.9-43.9zm446.9 0L308.8 42.2v89L446 206.8l1.1.6 75.9-44z"/><path fill="#1C78C0" d="M290.4 444.8L162 374.1V234.2l128.4 74.1v136.5zm18.4 0l128.4-70.6v-140l-128.4 74.1v136.5zM299.6 303zm-129-85l129-70.9L428.5 218l-128.9 74.4-129-74.4z"/></svg>

Before

Width:  |  Height:  |  Size: 656 B

View File

@ -5,59 +5,35 @@
"use strict";
const cp = require("child_process");
const fs = require("fs");
const path = require("path");
const async = require("neo-async");
const tc = require("./template-common");
const fs = require("fs");
const async = require("neo-async");
const extraArgs = "";
// @ts-expect-error we are touching global
const targetArgs = global.NO_TARGET_ARGS
? ""
: "--entry ./example.js --output-filename output.js";
// @ts-expect-error we are touching global
const displayReasons = global.NO_REASONS
? ""
: "--stats-reasons --stats-used-exports --stats-provided-exports";
// @ts-expect-error we are touching global
const statsArgs = global.NO_STATS_OPTIONS
? ""
: "--stats-chunks --stats-modules-space 99999 --stats-chunk-origins";
// @ts-expect-error we are touching global
const publicPathArgs = global.NO_PUBLIC_PATH
? ""
: '--output-public-path "dist/"';
// @ts-expect-error we are touching global
const targetArgs = global.NO_TARGET_ARGS ? "" : "--entry ./example.js --output-filename output.js";
const displayReasons = global.NO_REASONS ? "" : "--stats-reasons --stats-used-exports --stats-provided-exports";
const statsArgs = global.NO_STATS_OPTIONS ? "" : "--stats-chunks --stats-modules-space 99999 --stats-chunk-origins";
const publicPathArgs = global.NO_PUBLIC_PATH ? "" : '--output-public-path "dist/"';
const statsColorsArg = global.STATS_COLORS ? "" : "--no-color";
const commonArgs = `${statsColorsArg} ${statsArgs} ${publicPathArgs} ${extraArgs} ${targetArgs}`;
let readme = fs.readFileSync(
require("path").join(process.cwd(), "template.md"),
"utf8"
);
let readme = fs.readFileSync(require("path").join(process.cwd(), "template.md"), "utf-8");
/**
* @param {string} args args
* @param {string} prefix prefix
* @param {() => void} callback callback
*/
const doCompileAndReplace = (args, prefix, callback) => {
if (!tc.needResults(readme, prefix)) {
callback();
return;
}
/**
* @param {string} dir the directory for deleting
*/
const deleteFiles = (dir) => {
const targetDir = path.resolve("dist", dir);
if (path.extname(targetDir) === "") {
for (const file of fs.readdirSync(targetDir)) {
fs.readdirSync(targetDir).forEach((file) => {
deleteFiles(path.join(targetDir, file));
}
});
} else {
fs.unlinkSync(targetDir);
}
@ -71,100 +47,63 @@ const doCompileAndReplace = (args, prefix, callback) => {
try {
require.resolve("webpack-cli");
} catch (_err) {
} catch (e) {
throw new Error("Please install webpack-cli at root.");
}
/**
* @param {import("child_process").ChildProcess} subprocess a subprocess
*/
const connectIO = (subprocess) => {
const { stdin, stdout, stderr } = process;
const { stdin: _stdin, stdout: _stdout, stderr: _stderr } = subprocess;
/** @type {[NodeJS.ReadStream, import("stream").Writable][]} */
const inputPair = [
[stdin, /** @type {import("stream").Writable} */ (_stdin)]
];
/** @type {[NodeJS.WritableStream, import("stream").Readable][]} */
const outputPair = [
[stdout, /** @type {import("stream").Readable} */ (_stdout)],
[stderr, /** @type {import("stream").Readable} */ (_stderr)]
];
for (const pair of inputPair) {
pair[0].pipe(pair[1]);
}
for (const pair of outputPair) {
pair[1].pipe(pair[0]);
}
const inputPair = [[stdin, _stdin]];
const outputPair = [[stdout, _stdout], [stderr, _stderr]];
inputPair.forEach(pair => {
pair[0].pipe(pair[1])
})
outputPair.forEach(pair => {
pair[1].pipe(pair[0])
})
disconnectIO = () => {
for (const pair of inputPair) {
pair[0].unpipe(pair[1]);
}
for (const pair of outputPair) {
pair[1].unpipe(pair[0]);
}
};
};
/** @type {null | (() => void)} */
inputPair.forEach(pair => {
pair[0].unpipe(pair[1])
})
outputPair.forEach(pair => {
pair[1].unpipe(pair[0])
})
}
}
let disconnectIO = null;
const subprocess = cp.exec(
`node ${path.resolve(__dirname, "../bin/webpack.js")} ${args} ${displayReasons} ${commonArgs}`,
(error, stdout, stderr) => {
// eslint-disable-next-line no-unused-expressions
disconnectIO && disconnectIO();
if (stderr) console.log(stderr);
if (error !== null) {
console.log(error);
throw error;
}
try {
readme = tc.replaceResults(
readme,
process.cwd(),
stdout
.replace(/[\r?\n]*$/, "")
.replace(
/\d\d\d\d-(0[1-9]|1[0-2])-(0[1-9]|[1-2]\d|3[0-1])/g,
"XXXX-XX-XX"
)
.replace(/([01][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]/g, "XXXX:XX:XX")
.replace(/webpack [0-9.]+/g, "webpack X.X.X"),
prefix
);
} catch (err) {
console.log(stderr);
throw err;
}
callback();
const subprocess = cp.exec(`node ${path.resolve(__dirname, "../bin/webpack.js")} ${args} ${displayReasons} ${commonArgs}`, (error, stdout, stderr) => {
disconnectIO && disconnectIO();
if (stderr)
console.log(stderr);
if (error !== null)
console.log(error);
try {
readme = tc.replaceResults(
readme,
process.cwd(),
stdout
.replace(/[\r?\n]*$/, "")
.replace(/\d\d\d\d-(0[1-9]|1[0-2])-(0[1-9]|[1-2]\d|3[0-1])/g, "XXXX-XX-XX")
.replace(/([01][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]/g, "XXXX:XX:XX")
.replace(/webpack [0-9.]+/g, "webpack X.X.X"),
prefix
);
} catch (e) {
console.log(stderr);
throw e;
}
);
callback();
});
connectIO(subprocess);
};
async.series(
[
(callback) =>
doCompileAndReplace(
"--mode production --env production",
"production",
callback
),
(callback) =>
doCompileAndReplace(
"--mode development --env development --devtool none",
"development",
callback
),
(callback) =>
doCompileAndReplace(
"--mode none --env none --output-pathinfo verbose",
"",
callback
)
],
() => {
readme = tc.replaceBase(readme);
fs.writeFile("README.md", readme, "utf8", () => {});
}
);
async.series([
callback => doCompileAndReplace("--mode production --env production", "production", callback),
callback => doCompileAndReplace("--mode development --env development --devtool none", "development", callback),
callback => doCompileAndReplace("--mode none --env none --output-pathinfo verbose", "", callback)
], () => {
readme = tc.replaceBase(readme);
fs.writeFile("README.md", readme, "utf-8", function () { });
});

View File

@ -16,8 +16,7 @@ console.log(pMap4);
```javascript
"use strict";
/** @type {import("webpack").Configuration} */
const config = {
module.exports = {
// enable debug logging to see network requests!
// stats: {
// loggingDebug: /HttpUriPlugin/
@ -31,8 +30,6 @@ const config = {
]
}
};
module.exports = config;
```
# Info

View File

@ -1,7 +1,6 @@
"use strict";
/** @type {import("webpack").Configuration} */
const config = {
module.exports = {
// enable debug logging to see network requests!
// stats: {
// loggingDebug: /HttpUriPlugin/
@ -15,5 +14,3 @@ const config = {
]
}
};
module.exports = config;

View File

@ -3,27 +3,25 @@
const cp = require("child_process");
const examples = require("./examples");
const commands = [
...examples,
examples.filter((dirname) => dirname.includes("persistent-caching"))
].map((dirname) => `cd ${dirname} && node build.js`);
const commands = examples
.concat(
examples.filter(dirname => dirname.includes("persistent-caching"))
)
.map(function(dirname) {
return "cd " + dirname + " && node build.js";
});
let failed = 0;
let i = 0;
for (const cmd of commands) {
for(const cmd of commands) {
console.log(`[${++i}/${commands.length}] ${cmd}`);
try {
cp.execSync(cmd, { encoding: "utf8" });
} catch (err) {
cp.execSync(cmd, { encoding: "utf-8" });
} catch(e) {
failed++;
console.log(err);
console.log(e);
}
}
console.log("done");
if (failed > 0) {
throw new Error(`${failed} examples failed`);
}
if(failed > 0)
console.log(`${failed} failed`);

View File

@ -22,8 +22,7 @@ import("./async2");
const path = require("path");
/** @type {import("webpack").Configuration} */
const config = {
module.exports = {
// mode: "development" || "production",
entry: {
main: "./example"
@ -37,8 +36,6 @@ const config = {
chunkFilename: "[name].[chunkhash].js"
}
};
module.exports = config;
```
# index.html
@ -49,7 +46,7 @@ module.exports = config;
<body>
<!-- inlined minimized file "runtime~main.[chunkhash].js" -->
<script>
(()=>{"use strict";var e,r,t,o,n={},a={};function i(e){var r=a[e];if(void 0!==r)return r.exports;var t=a[e]={exports:{}};return n[e](t,t.exports,i),t.exports}i.m=n,e=[],i.O=(r,t,o,n)=>{if(!t){var a=1/0;for(s=0;s<e.length;s++){for(var[t,o,n]=e[s],l=!0,u=0;u<t.length;u++)(!1&n||a>=n)&&Object.keys(i.O).every(e=>i.O[e](t[u]))?t.splice(u--,1):(l=!1,n<a&&(a=n));if(l){e.splice(s--,1);var f=o();void 0!==f&&(r=f)}}return r}n=n||0;for(var s=e.length;s>0&&e[s-1][2]>n;s--)e[s]=e[s-1];e[s]=[t,o,n]},t=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,i.t=function(e,o){if(1&o&&(e=this(e)),8&o)return e;if("object"==typeof e&&e){if(4&o&&e.__esModule)return e;if(16&o&&"function"==typeof e.then)return e}var n=Object.create(null);i.r(n);var a={};r=r||[null,t({}),t([]),t(t)];for(var l=2&o&&e;("object"==typeof l||"function"==typeof l)&&!~r.indexOf(l);l=t(l))Object.getOwnPropertyNames(l).forEach(r=>a[r]=()=>e[r]);return a.default=()=>e,i.d(n,a),n},i.d=(e,r)=>{for(var t in r)i.o(r,t)&&!i.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},i.f={},i.e=e=>Promise.all(Object.keys(i.f).reduce((r,t)=>(i.f[t](e,r),r),[])),i.u=e=>e+".[chunkhash].js",i.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),o={},i.l=(e,r,t,n)=>{if(o[e])o[e].push(r);else{var a,l;if(void 0!==t)for(var u=document.getElementsByTagName("script"),f=0;f<u.length;f++){var s=u[f];if(s.getAttribute("src")==e){a=s;break}}a||(l=!0,(a=document.createElement("script")).charset="utf-8",i.nc&&a.setAttribute("nonce",i.nc),a.src=e),o[e]=[r];var c=(r,t)=>{a.onerror=a.onload=null,clearTimeout(d);var n=o[e];if(delete o[e],a.parentNode&&a.parentNode.removeChild(a),n&&n.forEach(e=>e(t)),r)return r(t)},d=setTimeout(c.bind(null,void 0,{type:"timeout",target:a}),12e4);a.onerror=c.bind(null,a.onerror),a.onload=c.bind(null,a.onload),l&&document.head.appendChild(a)}},i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.p="dist/",(()=>{var e={354:0};i.f.j=(r,t)=>{var o=i.o(e,r)?e[r]:void 0;if(0!==o)if(o)t.push(o[2]);else if(354!=r){var n=new Promise((t,n)=>o=e[r]=[t,n]);t.push(o[2]=n);var a=i.p+i.u(r),l=new Error;i.l(a,t=>{if(i.o(e,r)&&(0!==(o=e[r])&&(e[r]=void 0),o)){var n=t&&("load"===t.type?"missing":t.type),a=t&&t.target&&t.target.src;l.message="Loading chunk "+r+" failed.\n("+n+": "+a+")",l.name="ChunkLoadError",l.type=n,l.request=a,o[1](l)}},"chunk-"+r,r)}else e[r]=0},i.O.j=r=>0===e[r];var r=(r,t)=>{var o,n,[a,l,u]=t,f=0;if(a.some(r=>0!==e[r])){for(o in l)i.o(l,o)&&(i.m[o]=l[o]);if(u)var s=u(i)}for(r&&r(t);f<a.length;f++)n=a[f],i.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return i.O(s)},t=self.webpackChunk=self.webpackChunk||[];t.forEach(r.bind(null,0)),t.push=r.bind(null,t.push.bind(t))})()})();
(()=>{"use strict";var e,r,t,o,n={},a={};function i(e){var r=a[e];if(void 0!==r)return r.exports;var t=a[e]={exports:{}};return n[e](t,t.exports,i),t.exports}i.m=n,e=[],i.O=(r,t,o,n)=>{if(!t){var a=1/0;for(s=0;s<e.length;s++){for(var[t,o,n]=e[s],l=!0,u=0;u<t.length;u++)(!1&n||a>=n)&&Object.keys(i.O).every(e=>i.O[e](t[u]))?t.splice(u--,1):(l=!1,n<a&&(a=n));if(l){e.splice(s--,1);var f=o();void 0!==f&&(r=f)}}return r}n=n||0;for(var s=e.length;s>0&&e[s-1][2]>n;s--)e[s]=e[s-1];e[s]=[t,o,n]},t=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,i.t=function(e,o){if(1&o&&(e=this(e)),8&o)return e;if("object"==typeof e&&e){if(4&o&&e.__esModule)return e;if(16&o&&"function"==typeof e.then)return e}var n=Object.create(null);i.r(n);var a={};r=r||[null,t({}),t([]),t(t)];for(var l=2&o&&e;("object"==typeof l||"function"==typeof l)&&!~r.indexOf(l);l=t(l))Object.getOwnPropertyNames(l).forEach(r=>a[r]=()=>e[r]);return a.default=()=>e,i.d(n,a),n},i.d=(e,r)=>{for(var t in r)i.o(r,t)&&!i.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},i.f={},i.e=e=>Promise.all(Object.keys(i.f).reduce((r,t)=>(i.f[t](e,r),r),[])),i.u=e=>e+".[chunkhash].js",i.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),o={},i.l=(e,r,t,n)=>{if(o[e])o[e].push(r);else{var a,l;if(void 0!==t)for(var u=document.getElementsByTagName("script"),f=0;f<u.length;f++){var s=u[f];if(s.getAttribute("src")==e){a=s;break}}a||(l=!0,(a=document.createElement("script")).charset="utf-8",a.timeout=120,i.nc&&a.setAttribute("nonce",i.nc),a.src=e),o[e]=[r];var c=(r,t)=>{a.onerror=a.onload=null,clearTimeout(d);var n=o[e];if(delete o[e],a.parentNode&&a.parentNode.removeChild(a),n&&n.forEach(e=>e(t)),r)return r(t)},d=setTimeout(c.bind(null,void 0,{type:"timeout",target:a}),12e4);a.onerror=c.bind(null,a.onerror),a.onload=c.bind(null,a.onload),l&&document.head.appendChild(a)}},i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.p="dist/",(()=>{var e={354:0};i.f.j=(r,t)=>{var o=i.o(e,r)?e[r]:void 0;if(0!==o)if(o)t.push(o[2]);else if(354!=r){var n=new Promise((t,n)=>o=e[r]=[t,n]);t.push(o[2]=n);var a=i.p+i.u(r),l=new Error;i.l(a,t=>{if(i.o(e,r)&&(0!==(o=e[r])&&(e[r]=void 0),o)){var n=t&&("load"===t.type?"missing":t.type),a=t&&t.target&&t.target.src;l.message="Loading chunk "+r+" failed.\n("+n+": "+a+")",l.name="ChunkLoadError",l.type=n,l.request=a,o[1](l)}},"chunk-"+r,r)}else e[r]=0},i.O.j=r=>0===e[r];var r=(r,t)=>{var o,n,[a,l,u]=t,f=0;if(a.some(r=>0!==e[r])){for(o in l)i.o(l,o)&&(i.m[o]=l[o]);if(u)var s=u(i)}for(r&&r(t);f<a.length;f++)n=a[f],i.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return i.O(s)},t=self.webpackChunk=self.webpackChunk||[];t.forEach(r.bind(null,0)),t.push=r.bind(null,t.push.bind(t))})()})();
</script>
<script src="dist/main.[chunkhash].js"></script>
@ -218,6 +215,7 @@ module.exports = config;
/******/ script = document.createElement('script');
/******/
/******/ script.charset = 'utf-8';
/******/ script.timeout = 120;
/******/ if (__webpack_require__.nc) {
/******/ script.setAttribute("nonce", __webpack_require__.nc);
/******/ }
@ -396,15 +394,15 @@ asset runtime~main.[chunkhash].js 12.2 KiB [emitted] (name: runtime~main)
asset main.[chunkhash].js 873 bytes [emitted] (name: main)
asset 2.[chunkhash].js 285 bytes [emitted]
asset 3.[chunkhash].js 279 bytes [emitted]
Entrypoint main 13 KiB = runtime~main.[chunkhash].js 12.2 KiB main.[chunkhash].js 873 bytes
Entrypoint main 13.1 KiB = runtime~main.[chunkhash].js 12.2 KiB main.[chunkhash].js 873 bytes
chunk (runtime: runtime~main) main.[chunkhash].js (main) 55 bytes [initial] [rendered]
> ./example main
./example.js 55 bytes [built] [code generated]
[used exports unknown]
entry ./example main
chunk (runtime: runtime~main) runtime~main.[chunkhash].js (runtime~main) 7.6 KiB [entry] [rendered]
chunk (runtime: runtime~main) runtime~main.[chunkhash].js (runtime~main) 7.63 KiB [entry] [rendered]
> ./example main
runtime modules 7.6 KiB 10 modules
runtime modules 7.63 KiB 10 modules
chunk (runtime: runtime~main) 2.[chunkhash].js 28 bytes [rendered]
> ./async1 ./example.js 2:0-18
./async1.js 28 bytes [built] [code generated]
@ -421,19 +419,19 @@ webpack X.X.X compiled successfully
## Production mode
```
asset runtime~main.[chunkhash].js 2.73 KiB [emitted] [minimized] (name: runtime~main)
asset runtime~main.[chunkhash].js 2.74 KiB [emitted] [minimized] (name: runtime~main)
asset main.[chunkhash].js 155 bytes [emitted] [minimized] (name: main)
asset 471.[chunkhash].js 69 bytes [emitted] [minimized]
asset 18.[chunkhash].js 67 bytes [emitted] [minimized]
Entrypoint main 2.88 KiB = runtime~main.[chunkhash].js 2.73 KiB main.[chunkhash].js 155 bytes
Entrypoint main 2.89 KiB = runtime~main.[chunkhash].js 2.74 KiB main.[chunkhash].js 155 bytes
chunk (runtime: runtime~main) 18.[chunkhash].js 28 bytes [rendered]
> ./async1 ./example.js 2:0-18
./async1.js 28 bytes [built] [code generated]
[used exports unknown]
import() ./async1 ./example.js 2:0-18
chunk (runtime: runtime~main) runtime~main.[chunkhash].js (runtime~main) 7.61 KiB [entry] [rendered]
chunk (runtime: runtime~main) runtime~main.[chunkhash].js (runtime~main) 7.63 KiB [entry] [rendered]
> ./example main
runtime modules 7.61 KiB 10 modules
runtime modules 7.63 KiB 10 modules
chunk (runtime: runtime~main) 471.[chunkhash].js 28 bytes [rendered]
> ./async2 ./example.js 3:0-18
./async2.js 28 bytes [built] [code generated]

View File

@ -2,8 +2,7 @@
const path = require("path");
/** @type {import("webpack").Configuration} */
const config = {
module.exports = {
// mode: "development" || "production",
entry: {
main: "./example"
@ -17,5 +16,3 @@ const config = {
chunkFilename: "[name].chunkhash.js"
}
};
module.exports = config;

View File

@ -1,7 +1,6 @@
"use strict";
/** @type {import("webpack").Configuration[]} */
const config = [
module.exports = [
{
entry: "./example.js",
output: {
@ -27,5 +26,3 @@ const config = [
}
}
];
module.exports = config;

View File

@ -100,6 +100,7 @@ getTemplate("b", function(b) {
/******/ script = document.createElement('script');
/******/
/******/ script.charset = 'utf-8';
/******/ script.timeout = 120;
/******/ if (__webpack_require__.nc) {
/******/ script.setAttribute("nonce", __webpack_require__.nc);
/******/ }
@ -340,11 +341,11 @@ module.exports = function() {
## Unoptimized
```
asset output.js 8.99 KiB [emitted] (name: main)
asset output.js 9.03 KiB [emitted] (name: main)
asset require_context_templates_sync_recursive_.output.js 2.27 KiB [emitted]
chunk (runtime: main) output.js (main) 251 bytes (javascript) 4.92 KiB (runtime) [entry] [rendered]
chunk (runtime: main) output.js (main) 251 bytes (javascript) 4.94 KiB (runtime) [entry] [rendered]
> ./example.js main
runtime modules 4.92 KiB 6 modules
runtime modules 4.94 KiB 6 modules
./example.js 251 bytes [built] [code generated]
[used exports unknown]
entry ./example.js main
@ -361,11 +362,11 @@ webpack X.X.X compiled successfully
## Production mode
```
asset output.js 1.83 KiB [emitted] [minimized] (name: main)
asset output.js 1.84 KiB [emitted] [minimized] (name: main)
asset require_context_templates_sync_recursive_.output.js 652 bytes [emitted] [minimized]
chunk (runtime: main) output.js (main) 251 bytes (javascript) 4.92 KiB (runtime) [entry] [rendered]
chunk (runtime: main) output.js (main) 251 bytes (javascript) 4.94 KiB (runtime) [entry] [rendered]
> ./example.js main
runtime modules 4.92 KiB 6 modules
runtime modules 4.94 KiB 6 modules
./example.js 251 bytes [built] [code generated]
[no exports used]
entry ./example.js main

View File

@ -1,10 +1,7 @@
"use strict";
/** @type {import("webpack").Configuration} */
const config = {
module.exports = {
optimization: {
chunkIds: "named" // To keep filename consistent between different modes (for example building only)
}
};
module.exports = config;

View File

@ -100,6 +100,7 @@ getTemplate("b", function(b) {
/******/ script = document.createElement('script');
/******/
/******/ script.charset = 'utf-8';
/******/ script.timeout = 120;
/******/ if (__webpack_require__.nc) {
/******/ script.setAttribute("nonce", __webpack_require__.nc);
/******/ }
@ -340,11 +341,11 @@ module.exports = function() {
## Unoptimized
```
asset output.js 8.91 KiB [emitted] (name: main)
asset output.js 8.94 KiB [emitted] (name: main)
asset require_context_templates_sync_recursive_.output.js 2.27 KiB [emitted]
chunk (runtime: main) output.js (main) 266 bytes (javascript) 4.92 KiB (runtime) [entry] [rendered]
chunk (runtime: main) output.js (main) 266 bytes (javascript) 4.94 KiB (runtime) [entry] [rendered]
> ./example.js main
runtime modules 4.92 KiB 6 modules
runtime modules 4.94 KiB 6 modules
./example.js 266 bytes [built] [code generated]
[used exports unknown]
entry ./example.js main
@ -361,11 +362,11 @@ webpack X.X.X compiled successfully
## Production mode
```
asset output.js 1.81 KiB [emitted] [minimized] (name: main)
asset output.js 1.82 KiB [emitted] [minimized] (name: main)
asset require_context_templates_sync_recursive_.output.js 652 bytes [emitted] [minimized]
chunk (runtime: main) output.js (main) 266 bytes (javascript) 4.92 KiB (runtime) [entry] [rendered]
chunk (runtime: main) output.js (main) 266 bytes (javascript) 4.94 KiB (runtime) [entry] [rendered]
> ./example.js main
runtime modules 4.92 KiB 6 modules
runtime modules 4.94 KiB 6 modules
./example.js 266 bytes [built] [code generated]
[no exports used]
entry ./example.js main

View File

@ -1,10 +1,7 @@
"use strict";
/** @type {import("webpack").Configuration} */
const config = {
module.exports = {
optimization: {
chunkIds: "named" // To keep filename consistent between different modes (for example building only)
}
};
module.exports = config;

View File

@ -129,6 +129,7 @@ __webpack_require__.e(/*! require.ensure */ "file_js").then((function(require) {
/******/ script = document.createElement('script');
/******/
/******/ script.charset = 'utf-8';
/******/ script.timeout = 120;
/******/ if (__webpack_require__.nc) {
/******/ script.setAttribute("nonce", __webpack_require__.nc);
/******/ }
@ -298,7 +299,7 @@ module.exports = "It works";
## Unoptimized
```
asset output.js 9.61 KiB [emitted] (name: main)
asset output.js 9.64 KiB [emitted] (name: main)
asset file_js.output.js 360 bytes [emitted]
chunk (runtime: main) file_js.output.js 28 bytes [rendered]
> ../../node_modules/bundle-loader/index.js!./file.js 7:0-14:2
@ -306,9 +307,9 @@ chunk (runtime: main) file_js.output.js 28 bytes [rendered]
[used exports unknown]
cjs self exports reference ./file.js 1:0-14
cjs require !!./file.js ../../node_modules/bundle-loader/index.js!./file.js 8:8-30
chunk (runtime: main) output.js (main) 375 bytes (javascript) 4.92 KiB (runtime) [entry] [rendered]
chunk (runtime: main) output.js (main) 375 bytes (javascript) 4.94 KiB (runtime) [entry] [rendered]
> ./example.js main
runtime modules 4.92 KiB 6 modules
runtime modules 4.94 KiB 6 modules
dependent modules 281 bytes [dependent] 1 module
./example.js 94 bytes [built] [code generated]
[used exports unknown]
@ -319,7 +320,7 @@ webpack X.X.X compiled successfully
## Production mode
```
asset output.js 1.83 KiB [emitted] [minimized] (name: main)
asset output.js 1.84 KiB [emitted] [minimized] (name: main)
asset file_js.output.js 94 bytes [emitted] [minimized]
chunk (runtime: main) file_js.output.js 28 bytes [rendered]
> ../../node_modules/bundle-loader/index.js!./file.js 7:0-14:2
@ -327,9 +328,9 @@ chunk (runtime: main) file_js.output.js 28 bytes [rendered]
[used exports unknown]
cjs self exports reference ./file.js 1:0-14
cjs require !!./file.js ../../node_modules/bundle-loader/index.js!./file.js 8:8-30
chunk (runtime: main) output.js (main) 375 bytes (javascript) 4.92 KiB (runtime) [entry] [rendered]
chunk (runtime: main) output.js (main) 375 bytes (javascript) 4.94 KiB (runtime) [entry] [rendered]
> ./example.js main
runtime modules 4.92 KiB 6 modules
runtime modules 4.94 KiB 6 modules
dependent modules 281 bytes [dependent] 1 module
./example.js 94 bytes [built] [code generated]
[no exports used]

View File

@ -1,10 +1,7 @@
"use strict";
/** @type {import("webpack").Configuration} */
const config = {
module.exports = {
optimization: {
chunkIds: "named" // To keep filename consistent between different modes (for example building only)
}
};
module.exports = config;

View File

@ -5,8 +5,7 @@ This example shows how to use Code Splitting with entrypoint dependOn
```javascript
"use strict";
/** @type {import("webpack").Configuration} */
const config = {
module.exports = {
entry: {
app: { import: "./app.js", dependOn: ["other-vendors"] },
page1: { import: "./page1.js", dependOn: ["app", "react-vendors"] },
@ -22,8 +21,6 @@ const config = {
chunkRelations: true
}
};
module.exports = config;
```
# app.js
@ -209,6 +206,7 @@ console.log(lodash, isomorphicFetch);
/******/ script = document.createElement('script');
/******/
/******/ script.charset = 'utf-8';
/******/ script.timeout = 120;
/******/ if (__webpack_require__.nc) {
/******/ script.setAttribute("nonce", __webpack_require__.nc);
/******/ }
@ -559,8 +557,8 @@ asset react-vendors.js 1.33 KiB [emitted] (name: react-vendors)
asset lazy_js.js 1.11 KiB [emitted]
Entrypoint app 1.44 KiB = app.js
Entrypoint page1 1.91 KiB = page1.js
Entrypoint react-vendors 12.4 KiB = runtime.js 11.1 KiB react-vendors.js 1.33 KiB
Entrypoint other-vendors 13.2 KiB = runtime.js 11.1 KiB other-vendors.js 2.13 KiB
Entrypoint react-vendors 12.5 KiB = runtime.js 11.1 KiB react-vendors.js 1.33 KiB
Entrypoint other-vendors 13.3 KiB = runtime.js 11.1 KiB other-vendors.js 2.13 KiB
chunk (runtime: runtime) app.js (app) 116 bytes <{other-vendors}> <{runtime}> >{page1}< [initial] [rendered]
> ./app.js app
./app.js 116 bytes [built] [code generated]
@ -611,19 +609,19 @@ chunk (runtime: runtime) react-vendors.js (react-vendors) 87 bytes ={runtime}= >
harmony import specifier react ./page1.js 5:29-34
cjs self exports reference ./node_modules/react.js 1:0-14
entry react react-vendors
chunk (runtime: runtime) runtime.js (runtime) 6.72 KiB ={other-vendors}= ={react-vendors}= >{app}< >{page1}< [entry] [rendered]
chunk (runtime: runtime) runtime.js (runtime) 6.74 KiB ={other-vendors}= ={react-vendors}= >{app}< >{page1}< [entry] [rendered]
> ./other-vendors other-vendors
> prop-types react-vendors
> react react-vendors
> react-dom react-vendors
runtime modules 6.72 KiB 10 modules
runtime modules 6.74 KiB 10 modules
webpack X.X.X compiled successfully
```
## Production mode
```
asset runtime.js 2.34 KiB [emitted] [minimized] (name: runtime)
asset runtime.js 2.36 KiB [emitted] [minimized] (name: runtime)
asset page1.js 281 bytes [emitted] [minimized] (name: page1)
asset other-vendors.js 241 bytes [emitted] [minimized] (name: other-vendors)
asset react-vendors.js 204 bytes [emitted] [minimized] (name: react-vendors)
@ -631,8 +629,8 @@ asset app.js 200 bytes [emitted] [minimized] (name: app)
asset lazy_js.js 160 bytes [emitted] [minimized]
Entrypoint app 200 bytes = app.js
Entrypoint page1 281 bytes = page1.js
Entrypoint react-vendors 2.54 KiB = runtime.js 2.34 KiB react-vendors.js 204 bytes
Entrypoint other-vendors 2.58 KiB = runtime.js 2.34 KiB other-vendors.js 241 bytes
Entrypoint react-vendors 2.55 KiB = runtime.js 2.36 KiB react-vendors.js 204 bytes
Entrypoint other-vendors 2.59 KiB = runtime.js 2.36 KiB other-vendors.js 241 bytes
chunk (runtime: runtime) app.js (app) 116 bytes <{other-vendors}> <{runtime}> >{page1}< [initial] [rendered]
> ./app.js app
./app.js 116 bytes [built] [code generated]
@ -682,11 +680,11 @@ chunk (runtime: runtime) react-vendors.js (react-vendors) 87 bytes ={runtime}= >
harmony import specifier react ./page1.js 5:29-34
cjs self exports reference ./node_modules/react.js 1:0-14
entry react react-vendors
chunk (runtime: runtime) runtime.js (runtime) 6.72 KiB ={other-vendors}= ={react-vendors}= >{app}< >{page1}< [entry] [rendered]
chunk (runtime: runtime) runtime.js (runtime) 6.74 KiB ={other-vendors}= ={react-vendors}= >{app}< >{page1}< [entry] [rendered]
> ./other-vendors other-vendors
> prop-types react-vendors
> react react-vendors
> react-dom react-vendors
runtime modules 6.72 KiB 10 modules
runtime modules 6.74 KiB 10 modules
webpack X.X.X compiled successfully
```

View File

@ -1,7 +1,6 @@
"use strict";
/** @type {import("webpack").Configuration} */
const config = {
module.exports = {
entry: {
app: { import: "./app.js", dependOn: ["other-vendors"] },
page1: { import: "./page1.js", dependOn: ["app", "react-vendors"] },
@ -17,5 +16,3 @@ const config = {
chunkRelations: true
}
};
module.exports = config;

View File

@ -5,8 +5,7 @@ This example shows how to use Code Splitting with entrypoint dependOn
```javascript
"use strict";
/** @type {import("webpack").Configuration} */
const config = {
module.exports = {
entry: {
app: { import: "./app.js", dependOn: ["react-vendors"] },
"react-vendors": ["react", "react-dom", "prop-types"]
@ -19,8 +18,6 @@ const config = {
chunkRelations: true
}
};
module.exports = config;
```
# app.js

View File

@ -1,7 +1,6 @@
"use strict";
/** @type {import("webpack").Configuration} */
const config = {
module.exports = {
entry: {
app: { import: "./app.js", dependOn: ["react-vendors"] },
"react-vendors": ["react", "react-dom", "prop-types"]
@ -14,5 +13,3 @@ const config = {
chunkRelations: true
}
};
module.exports = config;

View File

@ -223,6 +223,7 @@ module.exports = webpackAsyncContext;
/******/ script = document.createElement('script');
/******/
/******/ script.charset = 'utf-8';
/******/ script.timeout = 120;
/******/ if (__webpack_require__.nc) {
/******/ script.setAttribute("nonce", __webpack_require__.nc);
/******/ }
@ -421,9 +422,9 @@ chunk (runtime: main) 414.output.js 11 bytes [rendered]
./node_modules/b.js 11 bytes [built] [code generated]
[used exports unknown]
import() b ./example.js 3:0-11
chunk (runtime: main) output.js (main) 414 bytes (javascript) 6.89 KiB (runtime) [entry] [rendered]
chunk (runtime: main) output.js (main) 414 bytes (javascript) 6.91 KiB (runtime) [entry] [rendered]
> ./example.js main
runtime modules 6.89 KiB 10 modules
runtime modules 6.91 KiB 10 modules
dependent modules 171 bytes [dependent] 2 modules
./example.js 243 bytes [built] [code generated]
[no exports]
@ -435,7 +436,7 @@ webpack X.X.X compiled successfully
## Production mode
```
asset output.js 2.88 KiB [emitted] [minimized] (name: main)
asset output.js 2.89 KiB [emitted] [minimized] (name: main)
asset 140.output.js 69 bytes [emitted] [minimized]
asset 197.output.js 69 bytes [emitted] [minimized]
asset 414.output.js 69 bytes [emitted] [minimized]
@ -458,9 +459,9 @@ chunk (runtime: main) 414.output.js 11 bytes [rendered]
./node_modules/b.js 11 bytes [built] [code generated]
[used exports unknown]
import() b ./example.js 3:0-11
chunk (runtime: main) output.js (main) 403 bytes (javascript) 6.63 KiB (runtime) [entry] [rendered]
chunk (runtime: main) output.js (main) 403 bytes (javascript) 6.65 KiB (runtime) [entry] [rendered]
> ./example.js main
runtime modules 6.63 KiB 9 modules
runtime modules 6.65 KiB 9 modules
dependent modules 160 bytes [dependent] 1 module
./example.js 243 bytes [built] [code generated]
[no exports]

View File

@ -1,10 +1,7 @@
"use strict";
/** @type {import("webpack").Configuration} */
const config = {
module.exports = {
optimization: {
chunkIds: "deterministic" // To keep filename consistent between different modes (for example building only)
}
};
module.exports = config;

View File

@ -50,9 +50,9 @@ export default foo;
/******/ var __webpack_modules__ = ([
/* 0 */,
/* 1 */
/*!***************************************************************************************************************!*\
!*** ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ referencedExports: namespace object ***!
\***************************************************************************************************************/
/*!*******************************************************************************************!*\
!*** ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ***!
\*******************************************************************************************/
/*! default exports */
/*! exports [not provided] [no usage info] */
/*! runtime requirements: module, __webpack_require__.o, __webpack_require__, __webpack_require__.e, __webpack_require__.* */
@ -197,6 +197,7 @@ module.exports = webpackAsyncContext;
/******/ script = document.createElement('script');
/******/
/******/ script.charset = 'utf-8';
/******/ script.timeout = 120;
/******/ if (__webpack_require__.nc) {
/******/ script.setAttribute("nonce", __webpack_require__.nc);
/******/ }
@ -376,32 +377,32 @@ asset 717.output.js 858 bytes [emitted]
asset 776.output.js 858 bytes [emitted]
asset 0.output.js 856 bytes [emitted]
chunk (runtime: main) 0.output.js 38 bytes [rendered]
> ./baz ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ referencedExports: namespace object ./baz
> ./baz.js ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ referencedExports: namespace object ./baz.js
> ./baz ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./baz
> ./baz.js ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./baz.js
./templates/baz.js 38 bytes [optional] [built] [code generated]
[exports: default]
[used exports unknown]
import() context element ./baz ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ referencedExports: namespace object ./baz
import() context element ./baz.js ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ referencedExports: namespace object ./baz.js
import() context element ./baz ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./baz
import() context element ./baz.js ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./baz.js
chunk (runtime: main) 717.output.js 38 bytes [rendered]
> ./foo ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ referencedExports: namespace object ./foo
> ./foo.js ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ referencedExports: namespace object ./foo.js
> ./foo ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./foo
> ./foo.js ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./foo.js
./templates/foo.js 38 bytes [optional] [built] [code generated]
[exports: default]
[used exports unknown]
import() context element ./foo ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ referencedExports: namespace object ./foo
import() context element ./foo.js ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ referencedExports: namespace object ./foo.js
import() context element ./foo ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./foo
import() context element ./foo.js ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./foo.js
chunk (runtime: main) 776.output.js 38 bytes [rendered]
> ./bar ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ referencedExports: namespace object ./bar
> ./bar.js ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ referencedExports: namespace object ./bar.js
> ./bar ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./bar
> ./bar.js ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./bar.js
./templates/bar.js 38 bytes [optional] [built] [code generated]
[exports: default]
[used exports unknown]
import() context element ./bar ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ referencedExports: namespace object ./bar
import() context element ./bar.js ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ referencedExports: namespace object ./bar.js
chunk (runtime: main) output.js (main) 597 bytes (javascript) 5.48 KiB (runtime) [entry] [rendered]
import() context element ./bar ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./bar
import() context element ./bar.js ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./bar.js
chunk (runtime: main) output.js (main) 597 bytes (javascript) 5.5 KiB (runtime) [entry] [rendered]
> ./example.js main
runtime modules 5.48 KiB 8 modules
runtime modules 5.5 KiB 8 modules
dependent modules 160 bytes [dependent] 1 module
./example.js 437 bytes [built] [code generated]
[used exports unknown]
@ -412,34 +413,34 @@ webpack X.X.X compiled successfully
## Production mode
```
asset output.js 2.42 KiB [emitted] [minimized] (name: main)
asset output.js 2.44 KiB [emitted] [minimized] (name: main)
asset 717.output.js 130 bytes [emitted] [minimized]
asset 776.output.js 130 bytes [emitted] [minimized]
asset 0.output.js 124 bytes [emitted] [minimized]
chunk (runtime: main) 0.output.js 38 bytes [rendered]
> ./baz ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ referencedExports: namespace object ./baz
> ./baz.js ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ referencedExports: namespace object ./baz.js
> ./baz ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./baz
> ./baz.js ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./baz.js
./templates/baz.js 38 bytes [optional] [built] [code generated]
[exports: default]
import() context element ./baz ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ referencedExports: namespace object ./baz
import() context element ./baz.js ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ referencedExports: namespace object ./baz.js
import() context element ./baz ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./baz
import() context element ./baz.js ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./baz.js
chunk (runtime: main) 717.output.js 38 bytes [rendered]
> ./foo ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ referencedExports: namespace object ./foo
> ./foo.js ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ referencedExports: namespace object ./foo.js
> ./foo ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./foo
> ./foo.js ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./foo.js
./templates/foo.js 38 bytes [optional] [built] [code generated]
[exports: default]
import() context element ./foo ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ referencedExports: namespace object ./foo
import() context element ./foo.js ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ referencedExports: namespace object ./foo.js
import() context element ./foo ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./foo
import() context element ./foo.js ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./foo.js
chunk (runtime: main) 776.output.js 38 bytes [rendered]
> ./bar ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ referencedExports: namespace object ./bar
> ./bar.js ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ referencedExports: namespace object ./bar.js
> ./bar ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./bar
> ./bar.js ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./bar.js
./templates/bar.js 38 bytes [optional] [built] [code generated]
[exports: default]
import() context element ./bar ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ referencedExports: namespace object ./bar
import() context element ./bar.js ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ referencedExports: namespace object ./bar.js
chunk (runtime: main) output.js (main) 597 bytes (javascript) 5.48 KiB (runtime) [entry] [rendered]
import() context element ./bar ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./bar
import() context element ./bar.js ./templates/ lazy ^\.\/.*$ include: \.js$ exclude: \.noimport\.js$ namespace object ./bar.js
chunk (runtime: main) output.js (main) 597 bytes (javascript) 5.5 KiB (runtime) [entry] [rendered]
> ./example.js main
runtime modules 5.48 KiB 8 modules
runtime modules 5.5 KiB 8 modules
dependent modules 160 bytes [dependent] 1 module
./example.js 437 bytes [built] [code generated]
[no exports used]

View File

@ -1,10 +1,7 @@
"use strict";
/** @type {import("webpack").Configuration} */
const config = {
module.exports = {
optimization: {
chunkIds: "deterministic" // To keep filename consistent between different modes (for example building only)
}
};
module.exports = config;

View File

@ -39,9 +39,9 @@ export default foo;
/******/ var __webpack_modules__ = ([
/* 0 */,
/* 1 */
/*!***********************************************************************!*\
!*** ./templates/ lazy ^\.\/.*$ referencedExports: namespace object ***!
\***********************************************************************/
/*!***************************************************!*\
!*** ./templates/ lazy ^\.\/.*$ namespace object ***!
\***************************************************/
/*! default exports */
/*! exports [not provided] [no usage info] */
/*! runtime requirements: module, __webpack_require__.o, __webpack_require__, __webpack_require__.e, __webpack_require__.* */
@ -186,6 +186,7 @@ module.exports = webpackAsyncContext;
/******/ script = document.createElement('script');
/******/
/******/ script.charset = 'utf-8';
/******/ script.timeout = 120;
/******/ if (__webpack_require__.nc) {
/******/ script.setAttribute("nonce", __webpack_require__.nc);
/******/ }
@ -363,32 +364,32 @@ asset 717.output.js 858 bytes [emitted]
asset 776.output.js 858 bytes [emitted]
asset 0.output.js 856 bytes [emitted]
chunk (runtime: main) 0.output.js 38 bytes [rendered]
> ./baz ./templates/ lazy ^\.\/.*$ referencedExports: namespace object ./baz
> ./baz.js ./templates/ lazy ^\.\/.*$ referencedExports: namespace object ./baz.js
> ./baz ./templates/ lazy ^\.\/.*$ namespace object ./baz
> ./baz.js ./templates/ lazy ^\.\/.*$ namespace object ./baz.js
./templates/baz.js 38 bytes [optional] [built] [code generated]
[exports: default]
[used exports unknown]
import() context element ./baz ./templates/ lazy ^\.\/.*$ referencedExports: namespace object ./baz
import() context element ./baz.js ./templates/ lazy ^\.\/.*$ referencedExports: namespace object ./baz.js
import() context element ./baz ./templates/ lazy ^\.\/.*$ namespace object ./baz
import() context element ./baz.js ./templates/ lazy ^\.\/.*$ namespace object ./baz.js
chunk (runtime: main) 717.output.js 38 bytes [rendered]
> ./foo ./templates/ lazy ^\.\/.*$ referencedExports: namespace object ./foo
> ./foo.js ./templates/ lazy ^\.\/.*$ referencedExports: namespace object ./foo.js
> ./foo ./templates/ lazy ^\.\/.*$ namespace object ./foo
> ./foo.js ./templates/ lazy ^\.\/.*$ namespace object ./foo.js
./templates/foo.js 38 bytes [optional] [built] [code generated]
[exports: default]
[used exports unknown]
import() context element ./foo ./templates/ lazy ^\.\/.*$ referencedExports: namespace object ./foo
import() context element ./foo.js ./templates/ lazy ^\.\/.*$ referencedExports: namespace object ./foo.js
import() context element ./foo ./templates/ lazy ^\.\/.*$ namespace object ./foo
import() context element ./foo.js ./templates/ lazy ^\.\/.*$ namespace object ./foo.js
chunk (runtime: main) 776.output.js 38 bytes [rendered]
> ./bar ./templates/ lazy ^\.\/.*$ referencedExports: namespace object ./bar
> ./bar.js ./templates/ lazy ^\.\/.*$ referencedExports: namespace object ./bar.js
> ./bar ./templates/ lazy ^\.\/.*$ namespace object ./bar
> ./bar.js ./templates/ lazy ^\.\/.*$ namespace object ./bar.js
./templates/bar.js 38 bytes [optional] [built] [code generated]
[exports: default]
[used exports unknown]
import() context element ./bar ./templates/ lazy ^\.\/.*$ referencedExports: namespace object ./bar
import() context element ./bar.js ./templates/ lazy ^\.\/.*$ referencedExports: namespace object ./bar.js
chunk (runtime: main) output.js (main) 441 bytes (javascript) 5.48 KiB (runtime) [entry] [rendered]
import() context element ./bar ./templates/ lazy ^\.\/.*$ namespace object ./bar
import() context element ./bar.js ./templates/ lazy ^\.\/.*$ namespace object ./bar.js
chunk (runtime: main) output.js (main) 441 bytes (javascript) 5.5 KiB (runtime) [entry] [rendered]
> ./example.js main
runtime modules 5.48 KiB 8 modules
runtime modules 5.5 KiB 8 modules
dependent modules 160 bytes [dependent] 1 module
./example.js 281 bytes [built] [code generated]
[used exports unknown]
@ -399,34 +400,34 @@ webpack X.X.X compiled successfully
## Production mode
```
asset output.js 2.39 KiB [emitted] [minimized] (name: main)
asset output.js 2.4 KiB [emitted] [minimized] (name: main)
asset 717.output.js 130 bytes [emitted] [minimized]
asset 776.output.js 130 bytes [emitted] [minimized]
asset 0.output.js 124 bytes [emitted] [minimized]
chunk (runtime: main) 0.output.js 38 bytes [rendered]
> ./baz ./templates/ lazy ^\.\/.*$ referencedExports: namespace object ./baz
> ./baz.js ./templates/ lazy ^\.\/.*$ referencedExports: namespace object ./baz.js
> ./baz ./templates/ lazy ^\.\/.*$ namespace object ./baz
> ./baz.js ./templates/ lazy ^\.\/.*$ namespace object ./baz.js
./templates/baz.js 38 bytes [optional] [built] [code generated]
[exports: default]
import() context element ./baz ./templates/ lazy ^\.\/.*$ referencedExports: namespace object ./baz
import() context element ./baz.js ./templates/ lazy ^\.\/.*$ referencedExports: namespace object ./baz.js
import() context element ./baz ./templates/ lazy ^\.\/.*$ namespace object ./baz
import() context element ./baz.js ./templates/ lazy ^\.\/.*$ namespace object ./baz.js
chunk (runtime: main) 717.output.js 38 bytes [rendered]
> ./foo ./templates/ lazy ^\.\/.*$ referencedExports: namespace object ./foo
> ./foo.js ./templates/ lazy ^\.\/.*$ referencedExports: namespace object ./foo.js
> ./foo ./templates/ lazy ^\.\/.*$ namespace object ./foo
> ./foo.js ./templates/ lazy ^\.\/.*$ namespace object ./foo.js
./templates/foo.js 38 bytes [optional] [built] [code generated]
[exports: default]
import() context element ./foo ./templates/ lazy ^\.\/.*$ referencedExports: namespace object ./foo
import() context element ./foo.js ./templates/ lazy ^\.\/.*$ referencedExports: namespace object ./foo.js
import() context element ./foo ./templates/ lazy ^\.\/.*$ namespace object ./foo
import() context element ./foo.js ./templates/ lazy ^\.\/.*$ namespace object ./foo.js
chunk (runtime: main) 776.output.js 38 bytes [rendered]
> ./bar ./templates/ lazy ^\.\/.*$ referencedExports: namespace object ./bar
> ./bar.js ./templates/ lazy ^\.\/.*$ referencedExports: namespace object ./bar.js
> ./bar ./templates/ lazy ^\.\/.*$ namespace object ./bar
> ./bar.js ./templates/ lazy ^\.\/.*$ namespace object ./bar.js
./templates/bar.js 38 bytes [optional] [built] [code generated]
[exports: default]
import() context element ./bar ./templates/ lazy ^\.\/.*$ referencedExports: namespace object ./bar
import() context element ./bar.js ./templates/ lazy ^\.\/.*$ referencedExports: namespace object ./bar.js
chunk (runtime: main) output.js (main) 441 bytes (javascript) 5.48 KiB (runtime) [entry] [rendered]
import() context element ./bar ./templates/ lazy ^\.\/.*$ namespace object ./bar
import() context element ./bar.js ./templates/ lazy ^\.\/.*$ namespace object ./bar.js
chunk (runtime: main) output.js (main) 441 bytes (javascript) 5.5 KiB (runtime) [entry] [rendered]
> ./example.js main
runtime modules 5.48 KiB 8 modules
runtime modules 5.5 KiB 8 modules
dependent modules 160 bytes [dependent] 1 module
./example.js 281 bytes [built] [code generated]
[no exports used]

View File

@ -1,10 +1,7 @@
"use strict";
/** @type {import("webpack").Configuration} */
const config = {
module.exports = {
optimization: {
chunkIds: "deterministic" // To keep filename consistent between different modes (for example building only)
}
};
module.exports = config;

View File

@ -39,9 +39,9 @@ export default foo;
/******/ var __webpack_modules__ = ([
/* 0 */,
/* 1 */
/*!**************************************************************************************************!*\
!*** ./templates/ lazy ^\.\/ba.*$ referencedExports: chunkName: chunk-bar-baz namespace object ***!
\**************************************************************************************************/
/*!******************************************************************************!*\
!*** ./templates/ lazy ^\.\/ba.*$ chunkName: chunk-bar-baz namespace object ***!
\******************************************************************************/
/*! default exports */
/*! exports [not provided] [no usage info] */
/*! runtime requirements: module, __webpack_require__.o, __webpack_require__, __webpack_require__.e, __webpack_require__.* */
@ -178,6 +178,7 @@ module.exports = webpackAsyncContext;
/******/ script = document.createElement('script');
/******/
/******/ script.charset = 'utf-8';
/******/ script.timeout = 120;
/******/ if (__webpack_require__.nc) {
/******/ script.setAttribute("nonce", __webpack_require__.nc);
/******/ }
@ -362,36 +363,36 @@ chunk (runtime: main) 45.output.js (chunk-foo) 38 bytes [rendered]
[used exports unknown]
import() ./templates/foo ./example.js 1:0-62
cjs require ./templates/foo ./example.js 6:11-37
chunk (runtime: main) output.js (main) 565 bytes (javascript) 5.48 KiB (runtime) [entry] [rendered]
chunk (runtime: main) output.js (main) 565 bytes (javascript) 5.5 KiB (runtime) [entry] [rendered]
> ./example.js main
runtime modules 5.48 KiB 8 modules
runtime modules 5.5 KiB 8 modules
dependent modules 160 bytes [dependent] 1 module
./example.js 405 bytes [built] [code generated]
[used exports unknown]
entry ./example.js main
chunk (runtime: main) 792.output.js (chunk-bar-baz2) 38 bytes [rendered]
> ./baz ./templates/ lazy ^\.\/ba.*$ referencedExports: chunkName: chunk-bar-baz namespace object ./baz
> ./baz.js ./templates/ lazy ^\.\/ba.*$ referencedExports: chunkName: chunk-bar-baz namespace object ./baz.js
> ./baz ./templates/ lazy ^\.\/ba.*$ chunkName: chunk-bar-baz namespace object ./baz
> ./baz.js ./templates/ lazy ^\.\/ba.*$ chunkName: chunk-bar-baz namespace object ./baz.js
./templates/baz.js 38 bytes [optional] [built] [code generated]
[exports: default]
[used exports unknown]
import() context element ./baz ./templates/ lazy ^\.\/ba.*$ referencedExports: chunkName: chunk-bar-baz namespace object ./baz
import() context element ./baz.js ./templates/ lazy ^\.\/ba.*$ referencedExports: chunkName: chunk-bar-baz namespace object ./baz.js
import() context element ./baz ./templates/ lazy ^\.\/ba.*$ chunkName: chunk-bar-baz namespace object ./baz
import() context element ./baz.js ./templates/ lazy ^\.\/ba.*$ chunkName: chunk-bar-baz namespace object ./baz.js
chunk (runtime: main) 994.output.js (chunk-bar-baz0) 38 bytes [rendered]
> ./bar ./templates/ lazy ^\.\/ba.*$ referencedExports: chunkName: chunk-bar-baz namespace object ./bar
> ./bar.js ./templates/ lazy ^\.\/ba.*$ referencedExports: chunkName: chunk-bar-baz namespace object ./bar.js
> ./bar ./templates/ lazy ^\.\/ba.*$ chunkName: chunk-bar-baz namespace object ./bar
> ./bar.js ./templates/ lazy ^\.\/ba.*$ chunkName: chunk-bar-baz namespace object ./bar.js
./templates/bar.js 38 bytes [optional] [built] [code generated]
[exports: default]
[used exports unknown]
import() context element ./bar ./templates/ lazy ^\.\/ba.*$ referencedExports: chunkName: chunk-bar-baz namespace object ./bar
import() context element ./bar.js ./templates/ lazy ^\.\/ba.*$ referencedExports: chunkName: chunk-bar-baz namespace object ./bar.js
import() context element ./bar ./templates/ lazy ^\.\/ba.*$ chunkName: chunk-bar-baz namespace object ./bar
import() context element ./bar.js ./templates/ lazy ^\.\/ba.*$ chunkName: chunk-bar-baz namespace object ./bar.js
webpack X.X.X compiled successfully
```
## Production mode
```
asset output.js 2.41 KiB [emitted] [minimized] (name: main)
asset output.js 2.42 KiB [emitted] [minimized] (name: main)
asset 994.output.js 130 bytes [emitted] [minimized] (name: chunk-bar-baz0)
asset 45.output.js 129 bytes [emitted] [minimized] (name: chunk-foo)
asset 792.output.js 126 bytes [emitted] [minimized] (name: chunk-bar-baz2)
@ -402,26 +403,26 @@ chunk (runtime: main) 45.output.js (chunk-foo) 38 bytes [rendered]
[exports: default]
import() ./templates/foo ./example.js 1:0-62
cjs require ./templates/foo ./example.js 6:11-37
chunk (runtime: main) output.js (main) 565 bytes (javascript) 5.48 KiB (runtime) [entry] [rendered]
chunk (runtime: main) output.js (main) 565 bytes (javascript) 5.5 KiB (runtime) [entry] [rendered]
> ./example.js main
runtime modules 5.48 KiB 8 modules
runtime modules 5.5 KiB 8 modules
dependent modules 160 bytes [dependent] 1 module
./example.js 405 bytes [built] [code generated]
[no exports used]
entry ./example.js main
chunk (runtime: main) 792.output.js (chunk-bar-baz2) 38 bytes [rendered]
> ./baz ./templates/ lazy ^\.\/ba.*$ referencedExports: chunkName: chunk-bar-baz namespace object ./baz
> ./baz.js ./templates/ lazy ^\.\/ba.*$ referencedExports: chunkName: chunk-bar-baz namespace object ./baz.js
> ./baz ./templates/ lazy ^\.\/ba.*$ chunkName: chunk-bar-baz namespace object ./baz
> ./baz.js ./templates/ lazy ^\.\/ba.*$ chunkName: chunk-bar-baz namespace object ./baz.js
./templates/baz.js 38 bytes [optional] [built] [code generated]
[exports: default]
import() context element ./baz ./templates/ lazy ^\.\/ba.*$ referencedExports: chunkName: chunk-bar-baz namespace object ./baz
import() context element ./baz.js ./templates/ lazy ^\.\/ba.*$ referencedExports: chunkName: chunk-bar-baz namespace object ./baz.js
import() context element ./baz ./templates/ lazy ^\.\/ba.*$ chunkName: chunk-bar-baz namespace object ./baz
import() context element ./baz.js ./templates/ lazy ^\.\/ba.*$ chunkName: chunk-bar-baz namespace object ./baz.js
chunk (runtime: main) 994.output.js (chunk-bar-baz0) 38 bytes [rendered]
> ./bar ./templates/ lazy ^\.\/ba.*$ referencedExports: chunkName: chunk-bar-baz namespace object ./bar
> ./bar.js ./templates/ lazy ^\.\/ba.*$ referencedExports: chunkName: chunk-bar-baz namespace object ./bar.js
> ./bar ./templates/ lazy ^\.\/ba.*$ chunkName: chunk-bar-baz namespace object ./bar
> ./bar.js ./templates/ lazy ^\.\/ba.*$ chunkName: chunk-bar-baz namespace object ./bar.js
./templates/bar.js 38 bytes [optional] [built] [code generated]
[exports: default]
import() context element ./bar ./templates/ lazy ^\.\/ba.*$ referencedExports: chunkName: chunk-bar-baz namespace object ./bar
import() context element ./bar.js ./templates/ lazy ^\.\/ba.*$ referencedExports: chunkName: chunk-bar-baz namespace object ./bar.js
import() context element ./bar ./templates/ lazy ^\.\/ba.*$ chunkName: chunk-bar-baz namespace object ./bar
import() context element ./bar.js ./templates/ lazy ^\.\/ba.*$ chunkName: chunk-bar-baz namespace object ./bar.js
webpack X.X.X compiled successfully
```

View File

@ -1,10 +1,7 @@
"use strict";
/** @type {import("webpack").Configuration} */
const config = {
module.exports = {
optimization: {
chunkIds: "deterministic" // To keep filename consistent between different modes (for example building only)
}
};
module.exports = config;

View File

@ -144,6 +144,7 @@ require.ensure(["c"], function(require) {
/******/ script = document.createElement('script');
/******/
/******/ script.charset = 'utf-8';
/******/ script.timeout = 120;
/******/ if (__webpack_require__.nc) {
/******/ script.setAttribute("nonce", __webpack_require__.nc);
/******/ }
@ -332,11 +333,11 @@ Minimized
## Unoptimized
```
asset output.js 9.43 KiB [emitted] (name: main)
asset output.js 9.46 KiB [emitted] (name: main)
asset node_modules_c_js-node_modules_d_js.output.js 562 bytes [emitted]
chunk (runtime: main) output.js (main) 161 bytes (javascript) 4.92 KiB (runtime) [entry] [rendered]
chunk (runtime: main) output.js (main) 161 bytes (javascript) 4.94 KiB (runtime) [entry] [rendered]
> ./example.js main
runtime modules 4.92 KiB 6 modules
runtime modules 4.94 KiB 6 modules
dependent modules 22 bytes [dependent] 2 modules
./example.js 139 bytes [built] [code generated]
[used exports unknown]
@ -355,11 +356,11 @@ webpack X.X.X compiled successfully
## Production mode
```
asset output.js 1.75 KiB [emitted] [minimized] (name: main)
asset output.js 1.76 KiB [emitted] [minimized] (name: main)
asset node_modules_c_js-node_modules_d_js.output.js 114 bytes [emitted] [minimized]
chunk (runtime: main) output.js (main) 161 bytes (javascript) 4.92 KiB (runtime) [entry] [rendered]
chunk (runtime: main) output.js (main) 161 bytes (javascript) 4.94 KiB (runtime) [entry] [rendered]
> ./example.js main
runtime modules 4.92 KiB 6 modules
runtime modules 4.94 KiB 6 modules
dependent modules 22 bytes [dependent] 2 modules
./example.js 139 bytes [built] [code generated]
[no exports used]

View File

@ -1,10 +1,7 @@
"use strict";
/** @type {import("webpack").Configuration} */
const config = {
module.exports = {
optimization: {
chunkIds: "named" // To keep filename consistent between different modes (for example building only)
}
};
module.exports = config;

View File

@ -1,7 +1,6 @@
"use strict";
/** @type {import("webpack").Configuration} */
const config = {
module.exports = {
// mode: "development" || "production",
module: {
rules: [
@ -15,5 +14,3 @@ const config = {
extensions: [".web.coffee", ".web.js", ".coffee", ".js"]
}
};
module.exports = config;

View File

@ -38,8 +38,7 @@ With this bundle configuration, you would load your third party libraries, then
const path = require("path");
/** @type {import("webpack").Configuration} */
const config = {
module.exports = {
// mode: "development" || "production",
entry: {
pageA: "./pageA",
@ -71,8 +70,6 @@ const config = {
filename: "[name].js"
}
};
module.exports = config;
```
# dist/vendor.js

View File

@ -2,8 +2,7 @@
const path = require("path");
/** @type {import("webpack").Configuration} */
const config = {
module.exports = {
// mode: "development" || "production",
entry: {
pageA: "./pageA",
@ -35,5 +34,3 @@ const config = {
filename: "[name].js"
}
};
module.exports = config;

View File

@ -86,8 +86,7 @@ module.exports = function() {
const path = require("path");
/** @type {import("webpack").Configuration} */
const config = {
module.exports = {
// mode: "development" || "production",
entry: {
main: ["./example.js"]
@ -103,8 +102,6 @@ const config = {
filename: "output.js"
}
};
module.exports = config;
```
# dist/output.js
@ -193,6 +190,7 @@ module.exports = config;
/******/ script = document.createElement('script');
/******/
/******/ script.charset = 'utf-8';
/******/ script.timeout = 120;
/******/ if (__webpack_require__.nc) {
/******/ script.setAttribute("nonce", __webpack_require__.nc);
/******/ }
@ -452,14 +450,14 @@ module.exports = function() {
## Unoptimized
```
asset output.js 9.04 KiB [emitted] (name: main)
asset output.js 9.08 KiB [emitted] (name: main)
asset pageB_js.output.js 772 bytes [emitted]
asset pageA_js.output.js 565 bytes [emitted]
asset pageC_js.output.js 559 bytes [emitted]
asset reusableComponent_js.output.js 453 bytes [emitted]
chunk (runtime: main) output.js (main) 220 bytes (javascript) 4.92 KiB (runtime) [entry] [rendered]
chunk (runtime: main) output.js (main) 220 bytes (javascript) 4.94 KiB (runtime) [entry] [rendered]
> ./example.js main
runtime modules 4.92 KiB 6 modules
runtime modules 4.94 KiB 6 modules
./example.js 220 bytes [built] [code generated]
[used exports unknown]
entry ./example.js main
@ -495,14 +493,14 @@ webpack X.X.X compiled successfully
## Production mode
```
asset output.js 1.8 KiB [emitted] [minimized] (name: main)
asset output.js 1.82 KiB [emitted] [minimized] (name: main)
asset pageB_js.output.js 231 bytes [emitted] [minimized]
asset reusableComponent_js.output.js 142 bytes [emitted] [minimized]
asset pageC_js.output.js 141 bytes [emitted] [minimized]
asset pageA_js.output.js 140 bytes [emitted] [minimized]
chunk (runtime: main) output.js (main) 220 bytes (javascript) 4.92 KiB (runtime) [entry] [rendered]
chunk (runtime: main) output.js (main) 220 bytes (javascript) 4.94 KiB (runtime) [entry] [rendered]
> ./example.js main
runtime modules 4.92 KiB 6 modules
runtime modules 4.94 KiB 6 modules
./example.js 220 bytes [built] [code generated]
[no exports used]
entry ./example.js main

View File

@ -2,8 +2,7 @@
const path = require("path");
/** @type {import("webpack").Configuration} */
const config = {
module.exports = {
// mode: "development" || "production",
entry: {
main: ["./example.js"]
@ -19,5 +18,3 @@ const config = {
filename: "output.js"
}
};
module.exports = config;

View File

@ -163,6 +163,7 @@ __webpack_require__.r(module.exports = {
/******/ script = document.createElement('script');
/******/
/******/ script.charset = 'utf-8';
/******/ script.timeout = 120;
/******/ if (__webpack_require__.nc) {
/******/ script.setAttribute("nonce", __webpack_require__.nc);
/******/ }
@ -544,7 +545,7 @@ body {
## Unoptimized
```
assets by path *.js 16.2 KiB
assets by path *.js 16.3 KiB
asset output.js 15.9 KiB [emitted] (name: main)
asset 1.output.js 357 bytes [emitted]
assets by path *.css 1.19 KiB
@ -552,9 +553,9 @@ assets by path *.css 1.19 KiB
asset 1.output.css 125 bytes [emitted]
asset 89a353e9c515885abd8e.png 14.6 KiB [emitted] [immutable] [from: images/file.png] (auxiliary name: main)
Entrypoint main 17 KiB (14.6 KiB) = output.js 15.9 KiB output.css 1.06 KiB 1 auxiliary asset
chunk (runtime: main) output.js, output.css (main) 265 bytes (javascript) 454 bytes (css) 14.6 KiB (asset) 42 bytes (css-url) 42 bytes (css-import) 8.8 KiB (runtime) [entry] [rendered]
chunk (runtime: main) output.js, output.css (main) 265 bytes (javascript) 454 bytes (css) 14.6 KiB (asset) 42 bytes (css-url) 42 bytes (css-import) 8.82 KiB (runtime) [entry] [rendered]
> ./example.js main
runtime modules 8.8 KiB 9 modules
runtime modules 8.82 KiB 9 modules
dependent modules 14.6 KiB (asset) 42 bytes (css-url) 454 bytes (css) 89 bytes (javascript) 42 bytes (css-import) [dependent] 6 modules
./example.js 176 bytes [built] [code generated]
[no exports]
@ -572,17 +573,17 @@ webpack X.X.X compiled successfully
## Production mode
```
assets by path *.js 3.41 KiB
asset output.js 3.32 KiB [emitted] [minimized] (name: main)
assets by path *.js 3.42 KiB
asset output.js 3.34 KiB [emitted] [minimized] (name: main)
asset 822.output.js 87 bytes [emitted] [minimized]
assets by path *.css 490 bytes
asset output.css 466 bytes [emitted] (name: main)
asset 822.output.css 24 bytes [emitted]
asset 89a353e9c515885abd8e.png 14.6 KiB [emitted] [immutable] [from: images/file.png] (auxiliary name: main)
Entrypoint main 3.78 KiB (14.6 KiB) = output.js 3.32 KiB output.css 466 bytes 1 auxiliary asset
chunk (runtime: main) output.js, output.css (main) 299 bytes (javascript) 454 bytes (css) 14.6 KiB (asset) 42 bytes (css-url) 42 bytes (css-import) 8.8 KiB (runtime) [entry] [rendered]
Entrypoint main 3.79 KiB (14.6 KiB) = output.js 3.34 KiB output.css 466 bytes 1 auxiliary asset
chunk (runtime: main) output.js, output.css (main) 299 bytes (javascript) 454 bytes (css) 14.6 KiB (asset) 42 bytes (css-url) 42 bytes (css-import) 8.82 KiB (runtime) [entry] [rendered]
> ./example.js main
runtime modules 8.8 KiB 9 modules
runtime modules 8.82 KiB 9 modules
dependent modules 14.6 KiB (asset) 42 bytes (css-url) 119 bytes (javascript) 279 bytes (css) 42 bytes (css-import) [dependent] 4 modules
cacheable modules 180 bytes (javascript) 175 bytes (css)
./example.js + 2 modules 178 bytes [built] [code generated]

View File

@ -1,7 +1,6 @@
"use strict";
/** @type {import("webpack").Configuration} */
const config = {
module.exports = {
output: {
uniqueName: "app"
},
@ -9,5 +8,3 @@ const config = {
css: true
}
};
module.exports = config;

View File

@ -1,375 +0,0 @@
# example.js
```javascript
import { increment as inc } from './increment';
var a = 1;
inc(a); // 2
// async loading
import("./async-loaded").then(function(asyncLoaded) {
console.log(asyncLoaded);
});
```
# increment.js
```javascript
import { add } from './math';
export function increment(val) {
return add(val, 1);
};
```
# dist/output.js
```javascript
/******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ([
/* 0 */,
/* 1 */
/*!**********************!*\
!*** ./increment.js ***!
\**********************/
/*! namespace exports */
/*! export increment [provided] [no usage info] [missing usage info prevents renaming] */
/*! other exports [not provided] [no usage info] */
/*! runtime requirements: __webpack_require__, __webpack_require__.r, __webpack_exports__, __webpack_require__.d, __webpack_require__.* */
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ increment: () => (/* binding */ increment)
/* harmony export */ });
/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./math */ 2);
function increment(val) {
return (0,_math__WEBPACK_IMPORTED_MODULE_0__.add)(val, 1);
};
/***/ }),
/* 2 */
/*!*****************!*\
!*** ./math.js ***!
\*****************/
/*! namespace exports */
/*! export add [provided] [no usage info] [missing usage info prevents renaming] */
/*! other exports [not provided] [no usage info] */
/*! runtime requirements: __webpack_require__.r, __webpack_exports__, __webpack_require__.d, __webpack_require__.* */
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ add: () => (/* binding */ add)
/* harmony export */ });
function add() {
var sum = 0, i = 0, args = arguments, l = args.length;
while (i < l) {
sum += args[i++];
}
return sum;
}
/***/ })
/******/ ]);
```
<details><summary><code>/* webpack runtime code */</code></summary>
``` js
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = __webpack_modules__;
/******/
/************************************************************************/
/******/ /* webpack/runtime/define property getters */
/******/ (() => {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = (exports, definition) => {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/ensure chunk */
/******/ (() => {
/******/ __webpack_require__.f = {};
/******/ // This file contains only the entry chunk.
/******/ // The chunk loading function for additional chunks
/******/ __webpack_require__.e = (chunkId) => {
/******/ return Promise.all(Object.keys(__webpack_require__.f).reduce((promises, key) => {
/******/ __webpack_require__.f[key](chunkId, promises);
/******/ return promises;
/******/ }, []));
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/get javascript chunk filename */
/******/ (() => {
/******/ // This function allow to reference async chunks
/******/ __webpack_require__.u = (chunkId) => {
/******/ // return url for filenames based on template
/******/ return "" + chunkId + ".output.js";
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/
/******/ /* webpack/runtime/load script */
/******/ (() => {
/******/ var inProgress = {};
/******/ // data-webpack is not used as build has no uniqueName
/******/ // loadScript function to load a script via script tag
/******/ __webpack_require__.l = (url, done, key, chunkId) => {
/******/ if(inProgress[url]) { inProgress[url].push(done); return; }
/******/ var script, needAttach;
/******/ if(key !== undefined) {
/******/ var scripts = document.getElementsByTagName("script");
/******/ for(var i = 0; i < scripts.length; i++) {
/******/ var s = scripts[i];
/******/ if(s.getAttribute("src") == url) { script = s; break; }
/******/ }
/******/ }
/******/ if(!script) {
/******/ needAttach = true;
/******/ script = document.createElement('script');
/******/
/******/ script.charset = 'utf-8';
/******/ if (__webpack_require__.nc) {
/******/ script.setAttribute("nonce", __webpack_require__.nc);
/******/ }
/******/
/******/
/******/ script.src = url;
/******/ }
/******/ inProgress[url] = [done];
/******/ var onScriptComplete = (prev, event) => {
/******/ // avoid mem leaks in IE.
/******/ script.onerror = script.onload = null;
/******/ clearTimeout(timeout);
/******/ var doneFns = inProgress[url];
/******/ delete inProgress[url];
/******/ script.parentNode && script.parentNode.removeChild(script);
/******/ doneFns && doneFns.forEach((fn) => (fn(event)));
/******/ if(prev) return prev(event);
/******/ }
/******/ var timeout = setTimeout(onScriptComplete.bind(null, undefined, { type: 'timeout', target: script }), 120000);
/******/ script.onerror = onScriptComplete.bind(null, script.onerror);
/******/ script.onload = onScriptComplete.bind(null, script.onload);
/******/ needAttach && document.head.appendChild(script);
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/publicPath */
/******/ (() => {
/******/ __webpack_require__.p = "dist/";
/******/ })();
/******/
/******/ /* webpack/runtime/jsonp chunk loading */
/******/ (() => {
/******/ // no baseURI
/******/
/******/ // object to store loaded and loading chunks
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
/******/ var installedChunks = {
/******/ 792: 0
/******/ };
/******/
/******/ __webpack_require__.f.j = (chunkId, promises) => {
/******/ // JSONP chunk loading for javascript
/******/ var installedChunkData = __webpack_require__.o(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;
/******/ if(installedChunkData !== 0) { // 0 means "already installed".
/******/
/******/ // a Promise means "currently loading".
/******/ if(installedChunkData) {
/******/ promises.push(installedChunkData[2]);
/******/ } else {
/******/ if(true) { // all chunks have JS
/******/ // setup Promise in chunk cache
/******/ var promise = new Promise((resolve, reject) => (installedChunkData = installedChunks[chunkId] = [resolve, reject]));
/******/ promises.push(installedChunkData[2] = promise);
/******/
/******/ // start chunk loading
/******/ var url = __webpack_require__.p + __webpack_require__.u(chunkId);
/******/ // create error before stack unwound to get useful stacktrace later
/******/ var error = new Error();
/******/ var loadingEnded = (event) => {
/******/ if(__webpack_require__.o(installedChunks, chunkId)) {
/******/ installedChunkData = installedChunks[chunkId];
/******/ if(installedChunkData !== 0) installedChunks[chunkId] = undefined;
/******/ if(installedChunkData) {
/******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type);
/******/ var realSrc = event && event.target && event.target.src;
/******/ error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
/******/ error.name = 'ChunkLoadError';
/******/ error.type = errorType;
/******/ error.request = realSrc;
/******/ installedChunkData[1](error);
/******/ }
/******/ }
/******/ };
/******/ __webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
/******/ }
/******/ }
/******/ }
/******/ };
/******/
/******/ // no prefetching
/******/
/******/ // no preloaded
/******/
/******/ // no HMR
/******/
/******/ // no HMR manifest
/******/
/******/ // no on chunks loaded
/******/
/******/ // install a JSONP callback for chunk loading
/******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
/******/ var [chunkIds, moreModules, runtime] = data;
/******/ // add "moreModules" to the modules object,
/******/ // then flag all "chunkIds" as loaded and fire callback
/******/ var moduleId, chunkId, i = 0;
/******/ if(chunkIds.some((id) => (installedChunks[id] !== 0))) {
/******/ for(moduleId in moreModules) {
/******/ if(__webpack_require__.o(moreModules, moduleId)) {
/******/ __webpack_require__.m[moduleId] = moreModules[moduleId];
/******/ }
/******/ }
/******/ if(runtime) var result = runtime(__webpack_require__);
/******/ }
/******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
/******/ for(;i < chunkIds.length; i++) {
/******/ chunkId = chunkIds[i];
/******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
/******/ installedChunks[chunkId][0]();
/******/ }
/******/ installedChunks[chunkId] = 0;
/******/ }
/******/
/******/ }
/******/
/******/ var chunkLoadingGlobal = self["webpackChunk"] = self["webpackChunk"] || [];
/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
/******/ })();
/******/
/************************************************************************/
```
</details>
``` js
var __webpack_exports__ = {};
// This entry needs to be wrapped in an IIFE because it needs to be isolated against other modules in the chunk.
(() => {
/*!********************!*\
!*** ./example.js ***!
\********************/
/*! namespace exports */
/*! exports [not provided] [no usage info] */
/*! runtime requirements: __webpack_require__, __webpack_require__.r, __webpack_exports__, __webpack_require__.e, __webpack_require__.* */
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _increment__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./increment */ 1);
var a = 1;
(0,_increment__WEBPACK_IMPORTED_MODULE_0__.increment)(a); // 2
// async loading
__webpack_require__.e(/*! import() */ 655).then(__webpack_require__.bind(__webpack_require__, /*! ./async-loaded */ 3)).then(function(asyncLoaded) {
console.log(asyncLoaded);
});
})();
/******/ })()
;
```
# Info
## Unoptimized
```
asset output.js 11.7 KiB [emitted] (name: main)
asset 655.output.js 773 bytes [emitted]
chunk (runtime: main) 655.output.js 24 bytes [rendered]
> ./async-loaded ./example.js 6:0-24
./async-loaded.js 24 bytes [built] [code generated]
[exports: answer]
[used exports unknown]
import() ./async-loaded ./example.js 6:0-24
chunk (runtime: main) output.js (main) 400 bytes (javascript) 5.48 KiB (runtime) [entry] [rendered]
> ./example.js main
runtime modules 5.48 KiB 8 modules
dependent modules 225 bytes [dependent] 2 modules
./example.js 175 bytes [built] [code generated]
[no exports]
[used exports unknown]
entry ./example.js main
webpack X.X.X compiled successfully
```
## Production mode
```
asset output.js 2.01 KiB [emitted] [minimized] (name: main)
asset 655.output.js 124 bytes [emitted] [minimized]
chunk (runtime: main) 655.output.js 24 bytes [rendered]
> ./async-loaded ./example.js 6:0-24
./async-loaded.js 24 bytes [built] [code generated]
[exports: answer]
import() ./async-loaded ./example.js + 2 modules ./example.js 6:0-24
chunk (runtime: main) output.js (main) 400 bytes (javascript) 5.48 KiB (runtime) [entry] [rendered]
> ./example.js main
runtime modules 5.48 KiB 8 modules
./example.js + 2 modules 400 bytes [built] [code generated]
[no exports]
[no exports used]
entry ./example.js main
webpack X.X.X compiled successfully
```

View File

@ -1 +0,0 @@
export var answer = 42;

View File

@ -1 +0,0 @@
require("../build-common");

View File

@ -1,8 +0,0 @@
import { increment as inc } from './increment';
var a = 1;
inc(a); // 2
// async loading
import("./async-loaded").then(function(asyncLoaded) {
console.log(asyncLoaded);
});

View File

@ -1,4 +0,0 @@
import { add } from './math';
export function increment(val) {
return add(val, 1);
};

View File

@ -1,7 +0,0 @@
export function add() {
var sum = 0, i = 0, args = arguments, l = args.length;
while (i < l) {
sum += args[i++];
}
return sum;
}

View File

@ -1,31 +0,0 @@
# example.js
```javascript
_{{example.js}}_
```
# increment.js
```javascript
_{{increment.js}}_
```
# dist/output.js
```javascript
_{{dist/output.js}}_
```
# Info
## Unoptimized
```
_{{stdout}}_
```
## Production mode
```
_{{production:stdout}}_
```

View File

@ -1,7 +0,0 @@
"use strict";
module.exports = () => {
const [major] = process.versions.node.split(".").map(Number);
return major >= 20;
};

View File

@ -1,61 +0,0 @@
"use strict";
const meriyah = require("meriyah");
/** @typedef {import("estree").Comment & { start: number, end: number, loc: import("estree").SourceLocation }} Comment */
/**
* @param {string} sourceCode the source code
* @param {import("../../lib/javascript/JavascriptParser").ParseOptions} options options
* @returns {{ ast: import("estree").Program, comments: Comment[], semicolons: Set<number> }} the parsed result
*/
const parse = (sourceCode, options) => {
/** @type {Comment[]} */
const comments = [];
/** @type {Set<number>} */
const semicolons = new Set();
/**
* @param {number} pos a position of semicolon
* @returns {Set<number>} set with semicolon positions
*/
const onInsertedSemicolon = (pos) => semicolons.add(pos);
const parseOptions = {
...options,
module: options.sourceType === "module",
loc: options.locations,
onComment: options.comments ? comments : undefined,
onInsertedSemicolon: options.semicolons ? onInsertedSemicolon : undefined
};
// @ts-expect-error wrong types for comments
const ast = meriyah.parse(sourceCode, parseOptions);
// @ts-expect-error wrong types AST
return { ast, comments, semicolons };
};
/** @type {import("webpack").Configuration} */
const config = {
mode: "production",
optimization: {
chunkIds: "deterministic" // To keep filename consistent between different modes (for example building only)
},
module: {
// Global override
parser: {
javascript: {
parse
}
}
// Override on the module level, only for modules which match the `test`
// rules: [
// {
// test: /\.js$/,
// parser: {
// parse
// }
// }
// ]
}
};
module.exports = config;

View File

@ -66,11 +66,9 @@ document.querySelector('#app').innerHTML = [toml, yaml, json].map(data => `
const json5 = require("json5");
const toml = require("toml");
// @ts-expect-error no types for yamljs
const yaml = require("yamljs");
/** @type {import("webpack").Configuration} */
const config = {
module.exports = {
module: {
rules: [
{
@ -97,8 +95,6 @@ const config = {
]
}
};
module.exports = config;
```
# js/output.js

Some files were not shown because too many files have changed in this diff Show More