https://github.com/artembatura/hot-accept-webpack-plugin
Adds `module.hot.accept` to your modules
https://github.com/artembatura/hot-accept-webpack-plugin
hot-reload module replacement webpack webpack-plugin
Last synced: about 1 year ago
JSON representation
Adds `module.hot.accept` to your modules
- Host: GitHub
- URL: https://github.com/artembatura/hot-accept-webpack-plugin
- Owner: artembatura
- License: mit
- Created: 2019-02-05T23:40:34.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-02-12T16:55:24.000Z (over 3 years ago)
- Last Synced: 2025-04-14T19:06:17.916Z (about 1 year ago)
- Topics: hot-reload, module, replacement, webpack, webpack-plugin
- Language: TypeScript
- Homepage:
- Size: 57.7 MB
- Stars: 10
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/hot-accept-webpack-plugin)
[](https://github.com/artembatura/hot-accept-webpack-plugin)
# [hot-accept-webpack-plugin](https://www.npmjs.com/package/hot-accept-webpack-plugin)
Simple webpack plugin to add HMR accepting code to need modules.
## Compatibility
| Webpack Version | Plugin version | Status |
| --------------- | -------------- | ------------------------ |
| ^5.0.0 | ^4.0.0 |
✅
|
| ^4.37.0 | ^4.0.0 | ✅
|
## Installation
### NPM
```
npm i -D hot-accept-webpack-plugin
```
### Yarn
```
yarn add -D hot-accept-webpack-plugin
```
## Import
### ES6/TypeScript
```js
import { HotAcceptPlugin } from 'hot-accept-webpack-plugin';
```
### CJS
```js
const { HotAcceptPlugin } = require('hot-accept-webpack-plugin');
```
## Usage
**webpack.config.js**
```js
module.exports = {
plugins: [new HotAcceptPlugin(options)]
};
```
## Options
### `test`
Type: `string | RegExp | (string | RegExp)[]`
`Required`
#### Example (with RegExp)
In this example plugin will add `module.hot.accept` to all modules with filename `index.js`.
**webpack.config.js**
```js
const { HotModuleReplacementPlugin } = require('webpack');
const { HotAcceptPlugin } = require('hot-accept-webpack-plugin');
module.exports = {
plugins: [
new HotModuleReplacementPlugin(),
new HotAcceptPlugin({
test: /index\.js$/
})
]
};
```
If you want to add `module.hot.accept` only to one specific file, you need declare more precise path to file. You can check next example.
#### Example (specific file)
For example, we have the following file structure
```
src/index.js
src/components/TodoList.js
src/components/index.js
```
If we want to add `module.hot.accept` only to `src/index.js`, we should use following RegExp: `/src\/index\.js$/`.
**webpack.config.js**
```js
const { HotModuleReplacementPlugin } = require('webpack');
const { HotAcceptPlugin } = require('hot-accept-webpack-plugin');
module.exports = {
plugins: [
new HotModuleReplacementPlugin(),
new HotAcceptPlugin({
test: /src\/index\.js$/
})
]
};
```
#### Example (with string)
**webpack.config.js**
```js
const { HotModuleReplacementPlugin } = require('webpack');
const { HotAcceptPlugin } = require('hot-accept-webpack-plugin');
module.exports = {
plugins: [
new HotModuleReplacementPlugin(),
new HotAcceptPlugin({
test: 'index.js'
})
]
};
```
#### Example (with test as array)
**webpack.config.js**
```js
const { HotModuleReplacementPlugin } = require('webpack');
const { HotAcceptPlugin } = require('hot-accept-webpack-plugin');
module.exports = {
plugins: [
new HotModuleReplacementPlugin(),
new HotAcceptPlugin({
test: ['one-module.js', /two-module.js$/]
})
]
};
```
This plugin is based on [modify-source-webpack-plugin](https://github.com/artembatura/modify-source-webpack-plugin).