From f424937b17417e71c879cf66b066e816197193be Mon Sep 17 00:00:00 2001 From: agatha Date: Fri, 12 Apr 2024 19:55:40 -0400 Subject: [PATCH] refactor for common webpack config --- package.json | 3 ++- src/client/components/Home.js | 7 ++++++- src/client/index.js | 6 ++++++ src/index.js | 14 ++++++++++++-- webpack.base.js | 18 ++++++++++++++++++ webpack.client.js | 13 +++++++++++++ webpack.server.js | 31 ++++++------------------------- 7 files changed, 63 insertions(+), 29 deletions(-) create mode 100644 src/client/index.js create mode 100644 webpack.base.js create mode 100644 webpack.client.js diff --git a/package.json b/package.json index 5293e35..57c1e52 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,8 @@ "main": "index.js", "scripts": { "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": "", "license": "ISC", diff --git a/src/client/components/Home.js b/src/client/components/Home.js index 8ef7869..ce66671 100644 --- a/src/client/components/Home.js +++ b/src/client/components/Home.js @@ -1,7 +1,12 @@ import React from "react"; // ES2015 module syntax const Home = () => { - return
Home component
; + return ( +
+
Home component
+ +
+ ); }; export default Home; \ No newline at end of file diff --git a/src/client/index.js b/src/client/index.js new file mode 100644 index 0000000..3e553ee --- /dev/null +++ b/src/client/index.js @@ -0,0 +1,6 @@ +import React from "react"; +import ReactDOM from 'react-dom'; + +import Home from './components/Home'; + +ReactDOM.hydrate(, document.querySelector('#root')); \ No newline at end of file diff --git a/src/index.js b/src/index.js index 05d58f7..8102981 100644 --- a/src/index.js +++ b/src/index.js @@ -5,10 +5,20 @@ import Home from './client/components/Home' const app = express(); +app.use(express.static('public')); app.get('/', (req, res) => { const content = renderToString(); - - res.send(content); + const html = ` + + + + +
${content}
+ + + + `; + res.send(html); }); app.listen(3000, () => { diff --git a/webpack.base.js b/webpack.base.js new file mode 100644 index 0000000..76d9b7d --- /dev/null +++ b/webpack.base.js @@ -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'] }}] + ] + } + } + ] + } +} \ No newline at end of file diff --git a/webpack.client.js b/webpack.client.js new file mode 100644 index 0000000..6449504 --- /dev/null +++ b/webpack.client.js @@ -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); \ No newline at end of file diff --git a/webpack.server.js b/webpack.server.js index 135be34..605207f 100644 --- a/webpack.server.js +++ b/webpack.server.js @@ -1,33 +1,14 @@ const path = require('path'); +const merge = require('webpack-merge'); +const baseConfig = require('./webpack.base.js') -module.exports = { - // Tell webpack that we're building a bundle for Node.js, rather than for the browser +const config = { target: 'node', - - // Tell webpack the root file of our server application entry: './src/index.js', - - // Tell webpack where to put the output file that is generated output: { filename: 'bundle.js', 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'] }}] - ] - } - } - ] } -}; \ No newline at end of file +}; + +module.exports = merge(baseConfig, config); \ No newline at end of file