Skip to content

create example with mini-html-webpack-plugin #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

create example with mini-html-webpack-plugin #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0743068
create example
donaldpipowitch Oct 9, 2020
400c27c
test template
donaldpipowitch Oct 12, 2020
3442be1
hacky de hack
donaldpipowitch Oct 12, 2020
230e239
lol - works
donaldpipowitch Oct 13, 2020
bd44bea
fix
donaldpipowitch Oct 13, 2020
60822e0
remove comment
donaldpipowitch Oct 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
"version": "0.0.0",
"private": true,
"scripts": {
"start": "wp --config src/webpack.config.js --dev"
"start": "wp --config src/webpack.config.js --dev",
"build": "wp --config src/webpack.config.js"
},
"dependencies": {
"@types/react": "^16.9.43",
Expand All @@ -23,7 +24,7 @@
"@types/webpack-env": "^1.15.2",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^4.3.0",
"mini-html-webpack-plugin": "^3.0.7",
"react-refresh": "^0.8.3",
"typescript": "^3.9.7",
"webpack": "^4.44.0",
Expand Down
2 changes: 1 addition & 1 deletion src/initial.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@ import React from 'react';
import { renderToString } from 'react-dom/server';
import { LoadingPage } from './components/loading-page';

export const html = renderToString(<LoadingPage />);
export const html = renderToString(<LoadingPage />);
127 changes: 101 additions & 26 deletions src/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
const webpack = require('webpack');
const { join } = require('path');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { MiniHtmlWebpackPlugin } = require('mini-html-webpack-plugin');
const { dev } = require('webpack-nano/argv');
const { WebpackPluginServe } = require('webpack-plugin-serve');

Expand All @@ -10,19 +11,23 @@ const watch = dev;
if (!dev) process.env.NODE_ENV = 'production';

const babelConfig = require('./babel.config');
if (dev) babelConfig.plugins.push(require.resolve('react-refresh/babel'));

const rules = [
{
test: /\.tsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: babelConfig,
options: {
...babelConfig,
plugins: dev
? [...babelConfig.plugins, require.resolve('react-refresh/babel')]
: babelConfig.plugins,
},
},
];

const entry = ['./src/index.tsx'];
if (dev) entry.push('webpack-plugin-serve/client');
const entry = { index: ['./src/index.tsx'] };
if (dev) entry.index.push('webpack-plugin-serve/client');

const output = {
path: join(process.cwd(), 'dist'),
Expand All @@ -34,13 +39,100 @@ if (dev) {
output.chunkFilename = '[name].lazy.js';
}

const resolve = {
extensions: ['.ts', '.tsx', '.js'],
};

const stats = {
// copied from `'minimal'`
all: false,
modules: true,
maxModules: 0,
errors: true,
warnings: true,
// our additional options
builtAt: true,
};

const devtool = dev ? 'cheap-module-eval-source-map' : 'source-map';

const plugins = [
new HtmlWebpackPlugin({ template: 'src/index.html' }),
new CleanWebpackPlugin({
// doesn't play nice with webpack-plugin-serve
cleanStaleWebpackAssets: false,
new MiniHtmlWebpackPlugin({
async template(data) {
// compile initial chunk
const rules = [
{
test: /\.tsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: babelConfig,
},
];
const entry = {initial: ['./src/initial.tsx']};
const config = {
mode,
entry,
output: {
...output,
libraryTarget: 'commonjs'
},
module: { rules },
resolve,
stats,
devtool,
};

await new Promise((resolve, reject) =>
webpack(config, (err, stats) => {
if (err) {
console.error(err);
return reject();
}

if (stats.hasErrors()) {
console.error(stats.toString('errors-only'));
return reject();
}

return resolve();
})
);

// not on file system yet - how do I get it?
const { html } = require(`${output.path}/initial.js`);
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>DEMO</title>
</head>
<body>
<div
id="initial"
style="
position: fixed;
top: 0;
width: 100vw;
background: white;
z-index: 1;
"
>
${html}
</div>
<div id="app"></div>
${data.js.map((entry) => `<script src="${entry}"></script>`)}
</body>
</html>
`;
},
}),
// new CleanWebpackPlugin({
// // doesn't play nice with webpack-plugin-serve
// cleanStaleWebpackAssets: false,
// }),
];

if (dev) {
plugins.push(
new ReactRefreshWebpackPlugin({
Expand All @@ -59,23 +151,6 @@ if (dev) {
);
}

const resolve = {
extensions: ['.ts', '.tsx', '.js'],
};

const stats = {
// copied from `'minimal'`
all: false,
modules: true,
maxModules: 0,
errors: true,
warnings: true,
// our additional options
builtAt: true,
};

const devtool = dev ? 'cheap-module-eval-source-map' : 'source-map';

module.exports = {
mode,
watch,
Expand Down
Loading