build: configure webpack to use inline script plugin under dev server

icelam · Nov 24, 2022 · 71f3cb0 · 71f3cb0
1 parent 0400cc0
commit 71f3cb0
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 4 deletions.
diff --git a/src/assets/js/app.js b/src/assets/js/app.js
@@ -1,3 +1,6 @@
 import initParticles from '@js/background';
 
 initParticles();
+
+// Try adding some console log below to test for webpack dev server
+console.log('Change me to test hotreload ability. Also tries refreshing the browser after severl changes.');
diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,11 @@
+/* eslint-disable import/no-import-module-exports */
 import 'core-js/stable';
 
 // CSS
 import '@style/index.scss';
 import '@js/app';
+
+// Needed for hot reload to work under dev server
+if (module.hot) {
+ module.hot.accept();
+}
diff --git a/webpack/webpack.base.conf.js b/webpack/webpack.base.conf.js
@@ -2,6 +2,7 @@
 const path = require('path');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');
 const HtmlVariablesPlugin = require('html-variables-plugin');
 
 module.exports = {
@@ -37,6 +38,7 @@ module.exports = {
  },
  inject: 'body'
  }),
+ new HtmlInlineScriptPlugin(),
  new HtmlVariablesPlugin(process.env)
  ],
  resolve: {

diff --git a/webpack/webpack.dev.conf.js b/webpack/webpack.dev.conf.js
@@ -36,7 +36,8 @@ module.exports = merge(baseWebpackConfig, {
  devServer: {
  host: '0.0.0.0',
  port: 8888,
- watchFiles: ["src/**/*"],
+ watchFiles: ['src/index.html'],
+ hot: true,
  client: {
  overlay: {
  warnings: false,

diff --git a/webpack/webpack.prod.conf.js b/webpack/webpack.prod.conf.js
@@ -6,7 +6,6 @@ const dotenv = require('dotenv');
 const { merge } = require('webpack-merge');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { default: HTMLInlineCSSWebpackPlugin } = require('html-inline-css-webpack-plugin');
-const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');
 const cssnano = require('cssnano');
 const autoprefixer = require('autoprefixer');
 const baseWebpackConfig = require('./webpack.base.conf');
@@ -42,8 +41,7 @@ module.exports = merge(baseWebpackConfig, {
  new MiniCssExtractPlugin({
  filename: 'assets/css/[name].[chunkhash:8].css'
  }),
- new HTMLInlineCSSWebpackPlugin(),
- new HtmlInlineScriptPlugin()
+ new HTMLInlineCSSWebpackPlugin()
  ],
  module: {
  rules: [