Category : webpack-dev-server

I have these configs: .common.js const path = require("path"); module.exports = { entry: { index: "./src/scripts/index.ts", library: "./src/scripts/library.ts", }, resolve: { extensions: [".ts", ".tsx", ".js"], }, module: { rules: [ { test: /.ts?$/, use: "ts-loader", exclude: /node_modules/, }, { test: /.html$/i, loader: "html-loader", }, ], }, }; .dev.js const path = require("path"); const common = ..

Read more

I was following a tutorial on Udemy and found it does not watch or refresh the additional .html files I created after running npm run dev. However, the opened index.html does refresh whenever I edit .css or .js files The NPM packages used: const path = require(‘path’) const HtmlWebpackPlugin = require(‘html-webpack-plugin’) const fse = require(‘fs-extra’) ..

Read more

I am trying to simply run webpack serve -c myconfig.js, but I keep getting these errors: ERROR in ./node_modules/webpack-dev-server/client/index.js?http://localhost:9000 6:16-37 Module not found: Error: Can’t resolve ‘strip-ansi’ in ‘/home/aironside/Documents/private/webpack-example/node_modules/webpack-dev-server/client’ ERROR in ./node_modules/webpack-dev-server/client/index.js?http://localhost:9000 8:13-32 Module not found: Error: Can’t resolve ‘./socket’ in ‘/home/aironside/Documents/private/webpack-example/node_modules/webpack-dev-server/client’ ERROR in ./node_modules/webpack-dev-server/client/index.js?http://localhost:9000 10:14-34 Module not found: Error: Can’t resolve ‘./overlay’ in ‘/home/aironside/Documents/private/webpack-example/node_modules/webpack-dev-server/client’ ..

Read more

I am using a package that builds assets and "bundle.js" files in a separate directory called static where it generates "dist" and "static". I want to use all the "dist/[name].bundle" files as a source of a new project is it possible if yes how I can achieve this. This what I have tried so far, ..

Read more

Below are the webpack configuration files. webpack.config.client.js const path = require(‘path’); const webpack = require(‘webpack’); const CURRENT_WORKING_DIR = process.cwd(); const config = { name: ‘browser’, mode: ‘development’, // mode: ‘production’, devtool: ‘eval-source-map’, entry: [ ‘webpack-hot-middleware/client?reload=true’, path.join(CURRENT_WORKING_DIR, ‘client/main.js’), ], output: { path: path.join(CURRENT_WORKING_DIR, ‘/dist’), filename: ‘bundle.js’, publicPath: ‘/dist/’, }, module: { rules: [ { test: /.jsx?$/, ..

Read more

I can’t understand why HMR doesn’t work. Attempts to start a hot reboot do not produce results. packages: "webpack": "^5.23.0", "webpack-bundle-analyzer": "^3.8.0", "webpack-cli": "^4.5.0", "webpack-dev-server": "^3.11.2" run: "hot-admin": "cross-env NODE_ENV=development DEV_PORT=5000 webpack serve –hot", config: module.exports = { mode: NODE_ENV, entry: { main: path.resolve(__dirname, ‘./resources/components/admin/index.js’), }, output: { path: path.resolve(__dirname, ‘./public/js/admin’), filename: prefix + ‘.[name].[chunkhash:5].js’, ..

Read more

I am learning WebPack with a shortcode. In the code, we are trying to calculate the cube and square. They will suppose to store in a variable as per the following webpack.config.js. const webpack = require(‘webpack’); const path = require(‘path’); const HtmlWebpackPlugin = require(‘html-webpack-plugin’); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const isDevelopment = process.env.NODE_ENV === ‘development’; const ..

Read more