Package exports | webpack
The exports field in the package.json of a package allows to declare which module should be used when using module requests like import "package" or import "package/sub/path". It replaces the default implementation that returns main field resp. index.js files for "package" and the file system lookup for "package/sub/path". When the exports field is specified, only these module requests are availab
Dependency Graph | webpack
Any time one file depends on another, webpack treats this as a dependency. This allows webpack to take non-code assets, such as images or web fonts, and also provide them as dependencies for your application. When webpack processes your application, it starts from a list of modules defined on the command line or in its configuration file. Starting from these entry points, webpack recursively build
Module Federation | webpack
Motivation Multiple separate builds should form a single application. These separate builds act like containers and can expose and consume code among themselves, creating a single, unified application. This is often known as Micro-Frontends, but is not limited to that. Low-level concepts We distinguish between local and remote modules. Local modules are regular modules that are part of the current
Module Methods | webpack
This section covers all methods available in code compiled with webpack. When using webpack to bundle your application, you can pick from a variety of module syntax styles including ES6, CommonJS, and AMD. While webpack supports multiple module syntaxes, we recommend following a single syntax for consistency and to avoid odd behaviors/bugs. Actually webpack would enforce the recommendation for .mj
Webpack 5 release (2020-10-10) | webpack
Webpack 4 was released in February 2018. Since then we shipped a lot of features without breaking changes. We know that people dislike major changes with breaking changes. Especially with webpack, which people usually only touch twice a year, and the remaining time it "just works". But shipping features without breaking changes also has a cost: We can't do major API or architectural improvements.
ProvidePlugin | webpack
Automatically load modules instead of having to import or require them everywhere. new webpack.ProvidePlugin({ identifier: 'module1', // ... }); or new webpack.ProvidePlugin({ identifier: ['module1', 'property1'], // ... }); By default, module resolution path is current folder (./**) and node_modules. It is also possible to specify full path: const path = require('path'); new webpack.ProvidePlugin
Caching | webpack
tipThe examples in this guide stem from getting started, output management and code splitting. So we're using webpack to bundle our modular application which yields a deployable /dist directory. Once the contents of /dist have been deployed to a server, clients (typically browsers) will hit that server to grab the site and its assets. The last step can be time consuming, which is why browsers use
SplitChunksPlugin | webpack
Originally, chunks (and modules imported inside them) were connected by a parent-child relationship in the internal webpack graph. The CommonsChunkPlugin was used to avoid duplicated dependencies across them, but further optimizations were not possible. Since webpack v4, the CommonsChunkPlugin was removed in favor of optimization.splitChunks. Defaults Out of the box SplitChunksPlugin should work w
Code Splitting | webpack
tipThis guide extends the example provided in Getting Started. Please make sure you are at least familiar with the example provided there and the Output Management chapter. Code splitting is one of the most compelling features of webpack. This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel. It can be used to achieve smaller bundles and
Hot Module Replacement | webpack
tipThis guide extends on code examples found in the Development guide. Hot Module Replacement (or HMR) is one of the most useful features offered by webpack. It allows all kinds of modules to be updated at runtime without the need for a full refresh. This page focuses on implementation while the concepts page gives more details on how it works and why it's useful. Enabling HMR This feature is grea
Configuration | webpack
Out of the box, webpack won't require you to use a configuration file. However, it will assume the entry point of your project is src/index.js and will output the result in dist/main.js minified and optimized for production. Usually, your projects will need to extend this functionality, for this you can create a webpack.config.js file in the root folder and webpack will automatically use it. All t
Migrating from v1 to v2 - webpack
The following sections describe the major changes from webpack 1 to 2. Note that there were far fewer changes between 2 and 3, so that migration shouldn't be too bad. If you are running into issues, please see the changelog for details. This content may be moved to the blog post in the near future as version 2 has been out for a while. On top of that, version 3 was recently released and version 4
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
webpack vote
webpack