I am trying to upgrade an Angular js project from using grunt to making use of webpack. I created a webpack configuration and tried to run the application with webpack. I don't get any errors durig the building of the application but on running the application I do get an error and it displays a blank screen.
Firstly, I installed the necessary packages like webpack, webpack-cli, and webpack-dev-server using node version 18.13.0. I then created a webpack configuration file, after which I was able to build and run the application. I read an article See How Easily You Can Upgrade To Webpack by Yazan Aabed. This helped a lot but I couldn't understand how he did everything clearly as I am still new to Angular js.
On running the project, I expected that it starts up but instead it gave me an error and displays a blank screen. I suspected the issue might be coming from the project structure not having an entry point. The whole project depends on one source which is the window. Webpack needs an entry point to start with and an output point to end with. If this is the case, how can I create an entry point for the project or fix the entire issue of making the webpack configuration work?
Below is my webpack configuration file
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { entry: './app/scripts/app.js', output: { filename: 'bundle.[contenthash].js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', }, }, { test: /\.less$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader', ], }, ], }, plugins: [ new HtmlWebpackPlugin({ template: './app/index.html', filename: 'index.html', }), new CleanWebpackPlugin(), new CopyWebpackPlugin({ patterns: [ { from: 'app/styles/snoobi.css', to: 'styles/snoobi.css', }, ], }), new MiniCssExtractPlugin({ filename: 'styles/[name].[contenthash].css', }), ], devServer: { static: path.resolve(__dirname, 'dist'), compress: true, port: 9000, }, }; The error message displayed on the screen:
Related questions 502 Managing jQuery plugin dependency in webpack 2 How to fix HTML file comments not being ignored by Webpack Dev Server? 3 Webpack fails to find module dirs Related questions 502 Managing jQuery plugin dependency in webpack 2 How to fix HTML file comments not being ignored by Webpack Dev Server? 3 Webpack fails to find module dirs 430 What does the @ mean inside an import path? 1 Webpack: no loader to handle the SCSS is input is present 1 React + Webpack Entry point not working as mentioned in webpack.config.js 4 Serving static images with Webpack 9 vue-cli 3.0 ./src/main.js in multi (webpack)-dev-server/client? (webpack)/hot/dev-server.js ./src/main.js Load 5 more related questions Show fewer related questions
Reset to default
