Styjun

I have an index.js file that imports my CSS and a few packages, but after bundling everything and starting the server I noticed that index.js wasn't running. I did a simple console.log in index.js and it isn't reached.

I copied the contents of my webpack.config file from a previous project which was working correctly, so I'm not sure if it's a file structure/path error or what not. Any thoughts?

Directory structure:

webpack.config.js:

const path = require('path')
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin')
var $ = require("jquery");

var HtmlWebpackPluginConfig = new HtmlWebpackPlugin(
 template: './src/index.html',
 filename: 'RecruitmentTracking.txt',
 inject: 'body'
);

module.exports = 
 entry: "./src/index.js", // removing the . fails the build
 output: 
 filename: './SiteAssets/scripts/RecruitmentTracking.js',
 path: path.resolve(__dirname, 'dist')
 ,

 module: 
 rules: [
 loader: 'babel-loader',
 test: /.js$/,
 exclude: /node_modules/
 , 
 test: /.css$/,
 use: ['style-loader', 'css-loader']
 , 
 test: /.(png
 ],
 ,
 devServer: 
 disableHostCheck: true
 ,
 devtool: 'cheap-module-eval-source-map', // this helps to browser to point to the exact file in the console, helps in debug
 devServer: 
 contentBase: path.join(__dirname, 'src'),
 historyApiFallback: true // this prevents the default browser full page refresh on form submission and link change
 ,
 plugins: [
 HtmlWebpackPluginConfig,
 new webpack.ProvidePlugin(
 "$": "jquery",
 "jQuery": "jquery",
 "window.jQuery": "jquery"
 )]

index.js:

import "./RecruitmentTracking.css";
import 'jquery';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
import 'jquery-ui-bundle/jquery-ui.min.js';

console.log('this is index.js');

package.json:

 "name": "recruitmenttracking",
 "version": "1.0.0",
 "description": "Recruitment Initiatives Tracking",
 "main": "index.js", // ----- should a more specific file path be here?
 "scripts": 
 "test": "echo "Error: no test specified" && exit 1",
 "start": "webpack-dev-server --open --mode development",
 "build": "webpack --config webpack.config.js",
 "dev-server": "webpack-dev-server"
 ,
 "author": "",
 "license": "ISC",
 "devDependencies": 
 "@babel/cli": "^7.2.3",
 "@babel/core": "^7.4.0",
 "@babel/preset-env": "^7.4.2",
 "babel-loader": "^8.0.5",
 "css-loader": "^2.1.1",
 "file-loader": "^3.0.1",
 "html-webpack-plugin": "^3.2.0",
 "style-loader": "^0.23.1",
 "webpack": "^4.29.6",
 "webpack-cli": "^3.3.0",
 "webpack-dev-server": "^3.2.1"
 ,
 "dependencies": 
 "@babel/polyfill": "^7.4.0",
 "axios": "^0.18.0",
 "bootstrap": "^4.3.1",
 "jquery": "^3.3.1",
 "jquery-ui-bundle": "^1.12.1-migrate",
 "pdfmake": "^0.1.54",
 "popper": "^1.0.1"
 

What's happening here is:

1 - webpack compiles and outputs into: './SiteAssets/scripts/RecruitmentTracking.js'

2 - HtmlWebpackPlugin, will then read the template file './src/index.html', and inject RecruitmentTracking.js script inside the body.

3 - then, it outputs the result to dist/RecruitmentTracking.txt

I don't see any problem, apart from the file being a .txt and not .html. and would obviously not be interpreted by the browser.

Try outputting to an html file instead, it should work

1) For some reason you've configured the following plugin to output a .txt file. So don't expect the browser to intepret that as a html file

var HtmlWebpackPluginConfig = new HtmlWebpackPlugin(
 template: './src/index.html',
 filename: 'RecruitmentTracking.txt',
 inject: 'body'
);

2) Also I believe that file that you're opening in the browser is /dist/index.html and that file doesn't load your js file. Try adding the following line into /dist/index.html:

<script src"./SiteAssets/scripts/RecruitmentTracking.js"></script>

3) If the above works, please still consider taking a closer look at (1)

You have named the output file in HtmlWebpackPluginConfig as RecruitmentTracking.txt. change it to index.html and it should work

var HtmlWebpackPluginConfig = new HtmlWebpackPlugin(
 template: './src/index.html', // webpack takes ./src/index.html as input file
 filename: 'index.html', // webpack processes the above input template and should output to index.html
 inject: 'body'
);