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
Build Performance
This guide contains some useful tips for improving build/compilation performance. GeneralThe following best practices should help, whether you're running build scripts in development or production. Stay Up to DateUse the latest webpack version. We are always making performance improvements. The latest recommended version of webpack is: Staying up-to-date with Node.js can also help with performance
Roadmap 2021 (2020-12-08) | webpack
It has been nearly 2 months since webpack 5 was officially released. Due to the sponsoring situation, we couldn't devote as much time to webpack as we would like to. Speaking only for myself (@sokra), I enjoyed the little break and have worked on a few side projects. Ironically, while I was using webpack 5 and all its bleeding-edge features (asset modules, worker support, persistent caching), I di
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.
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. DefaultsOut of the box SplitChunksPlugin should work we
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
Tree Shaking | webpack
Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module syntax, i.e. import and export. The name and concept have been popularized by the ES2015 module bundler rollup. The webpack 2 release came with built-in support for ES2015 modules (alias harmony modules) as well as unused module export detection. The new webp
Stats Data | webpack
When compiling source code with webpack, users can generate a JSON file containing statistics about modules. These statistics can be used to analyze an application's dependency graph as well as to optimize compilation speed. The file is typically generated with the following CLI command: npx webpack --profile --json=compilation-stats.jsonThe --json=compilation-stats.json flag indicates to webpack
Resolve | webpack
These options change how modules are resolved. Webpack provides reasonable defaults, but it is possible to change the resolving in detail. Have a look at Module Resolution for more explanation of how the resolver works. resolve object Configure how modules are resolved. For example, when calling import 'lodash' in ES2015, the resolve options can change where webpack goes to look for 'lodash' (see
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
Lazy Loading - React
A component can lazily load dependencies without its consumer knowing using higher order functions, or a consumer can lazily load its children without its children knowing using a component that takes a function and collection of modules, or some combination of both. LazilyLoad Component Lets have a look at a consumer choosing to lazily load some components. The importLazy is simply a function tha
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Output | webpack