Skip to content

Commit 118331e

Browse files
pmmmwhpmmmwh
authored
Merge pull request #74 from pmmmwh/feat/webpack-plugin-serve
2 parents 170aafd + bb0149f commit 118331e

22 files changed

+5500
-20
lines changed

‎README.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -199,14 +199,15 @@ This will be used by the error overlay module, and is available for `webpack-dev
199199

200200
#### `options.overlay.sockIntegration`
201201

202-
Type: `wds` or `whm` or `string`
202+
Type: `wds`, `whm`, `wps` or `string`
203203
Default: `wds`
204204

205205
This controls how the error overlay connects to the sockets provided by several Webpack hot reload integrations.
206206

207207
- If you use `webpack-dev-server`, you don't need to set this as it defaults to `wds`.
208208
- If you use `webpack-hot-middleware`, you should set this to `whm`.
209-
- If you use anything else, you will have to provide a path to a module that will accept a message handler function and initializes the socket connection.
209+
- If you use `webpack-plugin-serve`, you should set this to `wps`.
210+
- If you use anything else, or if you want to customize the socket handling yourself, you will have to provide a path to a module that will accept a message handler function and initializes the socket connection.
210211
See the [`runtime/sockets`](https://github.com/pmmmwh/react-refresh-webpack-plugin/tree/master/src/runtime/sockets) folder for sample implementations.
211212

212213
#### `options.overlay.sockPort`

‎examples/webpack-plugin-serve/babel.config.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
module.exports = (api) => {
2+
// This caches the Babel config
3+
api.cache.using(() => process.env.NODE_ENV);
4+
return {
5+
presets: ['@babel/preset-env', '@babel/preset-react'],
6+
// Applies the react-refresh Babel plugin on non-production modes only
7+
...(!api.env('production') && { plugins: ['react-refresh/babel'] }),
8+
};
9+
};

‎examples/webpack-plugin-serve/package.json‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "using-webpack-plugin-serve",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"react": "^16.13.1",
7+
"react-dom": "^16.13.1"
8+
},
9+
"devDependencies": {
10+
"@babel/core": "^7.9.0",
11+
"@babel/preset-env": "^7.9.5",
12+
"@babel/preset-react": "^7.9.4",
13+
"@pmmmwh/react-refresh-webpack-plugin": "^0.3.0-beta.3",
14+
"babel-loader": "^8.1.0",
15+
"cross-env": "^7.0.2",
16+
"html-webpack-plugin": "^4.0.4",
17+
"react-refresh": "^0.8.1",
18+
"webpack": "^4.42.1",
19+
"webpack-cli": "^3.3.11",
20+
"webpack-plugin-serve": "^0.12.1"
21+
},
22+
"scripts": {
23+
"start": "webpack --watch",
24+
"build": "cross-env NODE_ENV=production webpack"
25+
}
26+
}

‎examples/webpack-plugin-serve/public/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>WPS React App</title>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
</body>
11+
</html>

‎examples/webpack-plugin-serve/src/App.jsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import * as React from 'react';
2+
import ClassDefault from './ClassDefault';
3+
import { ClassNamed } from './ClassNamed';
4+
import FunctionDefault from './FunctionDefault';
5+
import { FunctionNamed } from './FunctionNamed';
6+
7+
const LazyComponent = React.lazy(() => import('./LazyComponent'));
8+
9+
function App() {
10+
return (
11+
<div>
12+
<ClassDefault />
13+
<ClassNamed />
14+
<FunctionDefault />
15+
<FunctionNamed />
16+
<React.Suspense fallback={<h1>Loading</h1>}>
17+
<LazyComponent />
18+
</React.Suspense>
19+
</div>
20+
);
21+
}
22+
23+
export default App;

‎examples/webpack-plugin-serve/src/ClassDefault.jsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import * as React from 'react';
2+
3+
class ClassDefault extends React.Component {
4+
render() {
5+
return <h1>Default Export Class</h1>;
6+
}
7+
}
8+
9+
export default ClassDefault;

‎examples/webpack-plugin-serve/src/ClassNamed.jsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import * as React from 'react';
2+
3+
export class ClassNamed extends React.Component {
4+
render() {
5+
return <h1>Named Export Class</h1>;
6+
}
7+
}

‎examples/webpack-plugin-serve/src/FunctionDefault.jsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import * as React from 'react';
2+
3+
function FunctionDefault() {
4+
return <h1>Default Export Function</h1>;
5+
}
6+
7+
export default FunctionDefault;

‎examples/webpack-plugin-serve/src/FunctionNamed.jsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import * as React from 'react';
2+
3+
export function FunctionNamed() {
4+
return <h1>Named Export Function</h1>;
5+
}

‎examples/webpack-plugin-serve/src/LazyComponent.jsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import * as React from 'react';
2+
3+
function LazyComponent() {
4+
return <h1>Lazy Component</h1>;
5+
}
6+
7+
export default LazyComponent;

0 commit comments

Comments
 (0)