webpack config dev & prod now working

Author: Ifycode

buildScripts/srcServer.js

@@ -3,8 +3,18 @@ import path from 'path';
 import open from 'open';
 import { port, portUrl, openPort } from './customize/chalk';
 
+import webpack from 'webpack';
+import config from '../webpack.dev.config';
+import webpackDevMiddleware from 'webpack-dev-middleware';
+
 const app = express();
 
+const compiler = webpack(config);
+
+app.use(webpackDevMiddleware(compiler, {
+  publicPath: config.output.publicPath
+}));
+
 /*eslint-disable no-console*/
 
 app.use(express.static('src'));

package.json

@@ -5,13 +5,14 @@
   "main": "buildScripts/srcServer.js",
   "scripts": {
     "prestart": "babel-node buildScripts/customize/startMsg.js",
-    "start": "npm-run-all --parallel less webpack:watch open:src lint:watch",
+    "start": "npm-run-all --parallel less open:src lint:watch",
     "open:src": "babel-node buildScripts/srcServer.js",
     "lint": "esw webpack.config.* src buildScripts --color",
     "lint:watch": "npm run lint -- --watch",
     "less": "nodemon --exec lessc src/less/styles.less src/css/styles.css",
     "webpack:dev": "webpack --config webpack.dev.config.js",
-    "webpack:watch": "webpack --watch"
+    "webpack:watch": "webpack --watch",
+    "build": "webpack --config webpack.prod.config.js"
   },
   "publishConfig": {
     "registry": "https://npm.pkg.github.com"

src/bundle.js

@@ -50,6 +50,5 @@ <h1>CDN links:</h1>
       <a href="https://github.com/code-collabo/less-css-helper-library">less-css-helper-library repo</a>
     </button>
   </div>
-  <script src="./bundle.js"></script>
 </body>
 </html>

src/index.html

@@ -1,7 +1,14 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
-  mode: 'none',
   entry: './src/index.js',
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: 'src/index.html',
+      inject: true,
+      scriptLoading: 'blocking'
+    })
+  ],
   module: {
     rules: [
       {

webpack.config.js

@@ -7,7 +7,8 @@ config.devtool = 'inline-source-map';
 
 config.output = {
   filename: 'bundle.js',
-  path: path.resolve(__dirname, 'src')
+  path: path.resolve(__dirname, 'src'),
+  publicPath: '/'
 }
 
 module.exports = config;

webpack.dev.config.js

@@ -0,0 +1,14 @@
+const path = require('path');
+
+const config = require('./webpack.config');
+
+config.mode = 'production';
+
+config.devtool = 'source-map';
+
+config.output = {
+  filename: 'bundle.js',
+  path: path.resolve(__dirname, 'dist')
+}
+
+module.exports = config;