chore(web-diary): HTMLWebpackPlugin added (#77)

* chore(web-diary): hTMLWebpackPlugin added

affects: @practice/web-diary

ISSUES CLOSED: #75

* chore(web-diary): template import refactored

affects: @practice/web-diary

ISSUES CLOSED: #75

* refactor(web-diary): variable deleted

affects: @practice/web-diary

ISSUES CLOSED: #75

practice/web-diary/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "start": "webpack && webpack serve",
+    "start": "webpack serve",
     "build": "webpack --mode production"
   },
   "devDependencies": {
@@ -19,6 +19,8 @@
     "babel-plugin-react-intl": "^8.2.25",
     "css-loader": "^5.1.3",
     "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.3.1",
+    "html-webpack-template": "^6.2.0",
     "style-loader": "^2.0.0",
     "styled-system": "^5.1.5",
     "typescript": "^4.2.3",

practice/web-diary/webpack.config.ts

@@ -1,13 +1,24 @@
-import * as path from 'path'
-import webpack   from 'webpack'
+import HTMLWebpackPlugin from 'html-webpack-plugin'
+import template          from 'html-webpack-template'
+import path              from 'path'
 
 export const target = 'node'
 export const mode = 'development'
 export const entry = './app/index.tsx'
 export const output = {
-  path: path.resolve(__dirname, 'public/dist'),
+  path: `${__dirname}/dist`,
 }
-export const plugins = [new webpack.HotModuleReplacementPlugin({})]
+export const plugins = [
+  new HTMLWebpackPlugin({
+    inject: false,
+    template,
+    appMountId: 'root',
+    devServer: 'http://localhost:9000',
+    title: 'My diary',
+    scripts: ['main.js'],
+  }),
+]
+
 export const module = {
   rules: [
     {
@@ -35,8 +46,8 @@ export const resolve = {
   extensions: ['.ts', '.json', '.tsx', '.js'],
 }
 export const devServer = {
-  contentBase: path.join(__dirname, 'public'),
+  contentBase: path.join(__dirname, 'dist'),
   compress: true,
   port: 9000,
-  hot: true,
+  open: true,
 }