はてなブックマーク

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

This guide aims to help you migrating to webpack 5 when using webpack directly. If you are using a higher level tool to run webpack, please refer to the tool for migration instructions. Preparations Webpack 5 requires at least Node.js 10.13.0 (LTS), so make sure you upgrade your Node.js if you're still running an older one. Upgrade webpack 4 and its plugins/loaders Upgrade webpack 4 to the latest

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.

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

These options determine how the different types of modules within a project will be treated. module.defaultRules An array of rules applied by default for modules. See source code for details. module.exports = { module: { defaultRules: [ '...', // you can use "..." to reference those rules applied by webpack by default ], }, }; Starting with webpack 5.87.0, falsy values including 0, "", false, null

Webpack provides a Node.js API which can be used directly in Node.js runtime. The Node.js API is useful in scenarios in which you need to customize the build or development process since all the reporting and error handling must be done manually and webpack only does the compiling part. For this reason the stats configuration options will not have any effect in the webpack() call. Installation To

The NormalModuleReplacementPlugin allows you to replace resources that match resourceRegExp with newResource. If newResource is relative, it is resolved relative to the previous resource. If newResource is a function, it is expected to overwrite the request attribute of the supplied resource. This can be useful for allowing different behaviour between builds. new webpack.NormalModuleReplacementPlu

The DefinePlugin replaces variables in your code with other values or expressions at compile time. This can be useful for allowing different behavior between development builds and production builds. If you perform logging in your development build but not in the production build you might use a global constant to determine whether logging takes place. That's where DefinePlugin shines, set it and

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

Disclaimer: MiniCssExtractPlugin is a third-party package maintained by community members, it potentially does not have the same support, security policy or license as webpack, and it is not maintained by webpack. This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps. It builds on top of a new webpack

As mentioned in Getting Started, there are multiple ways to define the entry property in your webpack configuration. We will show you the ways you can configure the entry property, in addition to explaining why it may be useful to you. Single Entry (Shorthand) Syntax Usage: entry: string | [string] webpack.config.js module.exports = { entry: './path/to/my/entry/file.js', }; The single entry syntax

webpack-dev-server can be used to quickly develop an application. See the development guide to get started. This page describes the options that affect the behavior of webpack-dev-server (short: dev-server) version >= 5.0.0. Migration guide from v4 to v5 can be found here. devServer object This set of options is picked up by webpack-dev-server and can be used to change its behavior in various ways

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

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

If you've been following the guides from the start, you will now have a small project that shows "Hello webpack". Now let's try to incorporate some other assets, like images, to see how they can be handled. Prior to webpack, front-end developers would use tools like grunt and gulp to process these assets and move them from their /src folder into their /dist or /build directory. The same idea was u

Webpack accepts configuration files written in multiple programming and data languages. The list of supported file extensions can be found in the node-interpret package. Using node-interpret, webpack can handle many different types of configuration files. TypeScript To write the webpack configuration in TypeScript, you would first install the necessary dependencies, i.e., TypeScript and the releva

tipThis guide stems from the Getting Started guide. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. In this guide we will learn how to integrate TypeScript with webpack. Basic Setup First install the TypeScript compiler and loader by running: npm install --save-dev typescript ts-loader Now we'll modify the directory structure & the configuration files: project webpa

In the past, one of webpack’s trade-offs when bundling was that each module in your bundle would be wrapped in individual function closures. These wrapper functions made it slower for your JavaScript to execute in the browser. In comparison, tools like Closure Compiler and RollupJS ‘hoist’ or concatenate the scope of all your modules into one closure and allow for your code to have a faster execut

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

This option controls if and how source maps are generated. Use the SourceMapDevToolPlugin for a more fine grained configuration. See the source-map-loader to deal with existing source maps. devtool string = 'eval' false Choose a style of source mapping to enhance the debugging process. These values can affect build and rebuild speed dramatically. devtoolperformanceproductionqualitycomment

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

Webpack has a rich plugin interface. Most of the features within webpack itself use this plugin interface. This makes webpack flexible. NameDescription

The webpack compiler can understand modules written as ES2015 modules, CommonJS or AMD. However, some third party libraries may expect global dependencies (e.g. $ for jQuery). The libraries might also create globals which need to be exported. These "broken modules" are one instance where shimming comes into play. Another instance where shimming can be useful is when you want to polyfill browser fu