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|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
],
},
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"
}
}
from webpack bundles files but index.js isn't running
No comments:
Post a Comment