agatha/react-ssr-boilerplate
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor for common webpack config

Browse Source
This commit is contained in:
agatha 2024-04-12 19:55:40 -04:00
parent 85a131cd74
commit f424937b17
7 changed files with 63 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -5,7 +5,8 @@
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"dev:server": "nodemon --watch build --exec \"node build/bundle.js\"", "dev:server": "nodemon --watch build --exec \"node build/bundle.js\"",
"dev:build:server": "webpack --config webpack.server.js --watch" "dev:build:server": "webpack --config webpack.server.js --watch",
"dev:build:client": "webpack --config webpack.client.js --watch"
}, },
"author": "", "author": "",
"license": "ISC", "license": "ISC",

7
src/client/components/Home.js
View File

@ -1,7 +1,12 @@
import React from "react"; // ES2015 module syntax import React from "react"; // ES2015 module syntax
const Home = () => { const Home = () => {
return <div>Home component</div>; return (
<div>
<div>Home component</div>
<button onClick={() => console.log('button clicked')}>Button</button>
</div>
);
}; };
export default Home; export default Home;

6
src/client/index.js Normal file
View File

@ -0,0 +1,6 @@
import React from "react";
import ReactDOM from 'react-dom';
import Home from './components/Home';
ReactDOM.hydrate(<Home />, document.querySelector('#root'));

14
src/index.js
View File

@ -5,10 +5,20 @@ import Home from './client/components/Home'
const app = express(); const app = express();
app.use(express.static('public'));
app.get('/', (req, res) => { app.get('/', (req, res) => {
const content = renderToString(<Home />); const content = renderToString(<Home />);
const html = `
res.send(content); <!DOCTYPE html>
<html>
<head></head>
<body>
<div id="root">${content}</div>
<script src="bundle.js"></script>
</body>
</html>
`;
res.send(html);
}); });
app.listen(3000, () => { app.listen(3000, () => {

18
webpack.base.js Normal file
View File

@ -0,0 +1,18 @@
module.exports = {
module: {
rules: [
{
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: [
'react',
'stage-0',
['env', { targets: { browsers: ['last 2 versions'] }}]
]
}
}
]
}
}

13
webpack.client.js Normal file
View File

@ -0,0 +1,13 @@
const path = require('path');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.js');
const config = {
entry: './src/client/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'public')
}
};
module.exports = merge(baseConfig, config);

29
webpack.server.js
View File

@ -1,33 +1,14 @@
const path = require('path'); const path = require('path');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.js')
module.exports = { const config = {
// Tell webpack that we're building a bundle for Node.js, rather than for the browser
target: 'node', target: 'node',
// Tell webpack the root file of our server application
entry: './src/index.js', entry: './src/index.js',
// Tell webpack where to put the output file that is generated
output: { output: {
filename: 'bundle.js', filename: 'bundle.js',
path: path.resolve(__dirname, 'build') path: path.resolve(__dirname, 'build')
},
// Tell webpack to run babel on every file it runs through
module: {
rules: [
{
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: [
'react',
'stage-0',
['env', { targets: { browsers: ['last 2 versions'] }}]
]
}
}
]
} }
}; };
module.exports = merge(baseConfig, config);