We Keep Coding

Why is webpack trying to bundle my test files?

I have two main directories in my project: "src" and "specs".
The entrypoint of my webpack configuration is set to a file within src. Also the context of the webpack config is set to the src directory. I have a postinstall hook in my package.json which bundles the app into a dist folder whenever the package is installed via "npm install". This also means that the devDependencies are not installed and that is what causes my npm install to fail. Apparently webpack tries to process the files in specs which it cannot do because the devDependencies are not installed.
Any idea why webpack thinks it should process the files in the specs directory?
Here is my complete webpack config:
const path = require("path");
const nodeExternals = require("webpack-node-externals");
const NODE_ENV = "development";
const client = {
entry: path.join(__dirname, "src", "browser_sdk", "index.ts"),
context: path.resolve(__dirname, "src", "browser_sdk"),
target: "web",
mode: NODE_ENV,
devtool: "source-map",
watch: false,
output: {
path: path.resolve(__dirname, "dist"),
filename: "client.js",
library: {
type: "umd",
},
},
module: {
rules: [
{
test: /\.ts$/,
use: "ts-loader",
exclude: /node_modules.*\.js$/,
},
],
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
},
externals: {
"pg-native": "require('pg-native')"
},
optimization: {
minimize: false,
},
};
const server = {
entry: path.join(__dirname, "src", "server", "index.ts"),
context: path.resolve(__dirname, "src", "server"),
mode: NODE_ENV,
target: "node",
externals: [nodeExternals(), 'pg-native'],
watch: false,
devtool: "source-map",
output: {
path: path.resolve(__dirname, "dist"),
filename: "server.js",
library: {
type: "umd",
},
},
resolve: {
extensions: [".ts", ".js"],
},
module: {
rules: [
{
test: /\.ts$/,
use: "ts-loader",
exclude: /node_modules.*\.js$/,
},
],
},
};
module.exports = [server, client];

The following config fixed my problems. I used transpileOnly to prevent the specs directory is bundled and I wrote a custom exclude handler to prevent node_module is bundled.
module: {
rules: [
{
test: /\.tsx?$/,
use: {
loader: "ts-loader",
options: {
transpileOnly: true
},
},
exclude: (e) => {
let file = e.replace(__dirname, '.');
return file.match(/node_modules/)
}
},
],
},

Webpack dev server not finding index.html

I have the following webpack config:
webpack.common.js:
const path = require('path');
module.exports = {
entry: './src/index.js',
watchOptions: {
ignored: [
path.resolve(__dirname, '.git'),
path.resolve(__dirname, 'node_modules'),
]
},
module: {
rules: [],
},
resolve: {
extensions: ['.js'],
},
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist'),
publicPath: "/dist/",
},
};
webpack.dev.js:
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
open: true,
compress: false,
port: 9000,
http2: false,
https: false,
liveReload: true,
watchFiles: ['src/**/*'],
client: {
overlay: false,
},
static: {
directory: __dirname,
}
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
})
]
});
My folder structure:
webpack.common.js
webpack.dev.js
src/
├─ index.html
├─ index.js
Tools versions:
"html-webpack-plugin": "^5.5.0"
"webpack": "^5.52.0"
"webpack-dev-server": "^4.1.0"
"webpack-merge": "^5.8.0"
QUESTION: When running webpack-dev-server --config webpack.dev.js in the root folder, I'm getting 404 error for index.html when accessing localhost:9000/index.html. Shouldn't index.html be created in memory?
I do get this in the log when starting the server:
asset bundle.js 901 KiB [emitted] (name: main)
asset index.html 5 KiB [emitted]
How not to get 404 error and access index.html that's in memory? Am I missing something?

Maybe this webpack config fix your problem, the index.html may be in a folder "public" and not in "src", and set enable the inject on index.html
Try this config :
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports ={
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js'
},
resolve: {
extensions: ['.js','.jsx']
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use:{
loader: 'babel-loader'
}
},
{
test: /\.html$/,
use:{
loader: 'html-loader'
}
},
{
test: /\.(css|scss)$/,
use:[
"style-loader",
"css-loader",
"sass-loader"
]
},
{
test: /\.svg$/,
use:{
loader: "svg-url-loader"
}
},
{
test: /\.png$/,
use: [
"file-loader",
{
loader: "image-webpack-loader"
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html",
inject:true,
filename: 'index.html'
}),
new MiniCssExtractPlugin(),
],
devServer:{
static: {
publicPath: path.join(__dirname, 'dist')
},
open:true,
compress: true,
port: 3000
}
}

My problem was with this line in webpack.common.js:
publicPath: "/dist/"
By removing it, it worked.

Why PWA can be installed only in dev mode?

I'm trying to integrate PWA in my react project, when i run using webpack-dev-server i can see the PWA app that i can install in my computer, but when i build the project with webpack and try to run it, i can't do it anymore
webpack.config.js
const path = require("path");
const webpack = require("webpack");
const { styles } = require("#ckeditor/ckeditor5-dev-utils");
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
const BUILD_DIR = path.resolve(__dirname, "public");
const APP_DIR = path.resolve(__dirname, "src");
const envs = require('./config/envs').getEnv;
const plugins = require('./webpack-plugins');
module.exports = (env) => {
console.log("OUTPUT: env", env)
const config = envs(env.NODE_ENV);
const mode = env.production ? 'production' : 'development';
return {
mode,
entry: `${APP_DIR}/index.js`,
output: {
filename: "js/bundle.js",
path: BUILD_DIR,
publicPath: "/"
},
node: {
net: "empty",
tls: "empty",
dns: "empty",
fs: "empty"
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
exclude: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/
},
{
test: /\.js$/,
exclude: /node_modules/,
use: [
"babel-loader",
{
loader: "eslint-loader",
options: {
failOnError: true,
emitError: true,
emitWarning: true
}
}
]
},
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
loader: "graphql-tag/loader"
},
{
test: /\.(jpg|png|gif|svg|pdf|ico)$/,
use: [
{
loader: "file-loader",
options: {
name: "[path][name]-[hash:8].[ext]"
}
}
],
exclude: [
/\.(js|jsx|mjs)$/,
/\.html$/,
/\.json$/,
/ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
/ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/
]
},
{
test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
use: ["raw-loader"]
},
{
test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
use: [
{
loader: "style-loader",
options: {
singleton: true
}
},
{
loader: "postcss-loader",
options: styles.getPostCssConfig({
themeImporter: {
themePath: require.resolve("#ckeditor/ckeditor5-theme-lark")
},
minify: true
})
}
]
}
]
},
devServer: {
historyApiFallback: true,
watchContentBase: true,
contentBase: "./public"
},
resolve: {
extensions: [".js"],
alias: {
src: path.resolve(__dirname, "src"),
shared: path.resolve(__dirname, "src", "shared"),
config: path.resolve(__dirname, "config"),
screens: path.resolve(__dirname, "src", "screens"),
package: path.resolve(__dirname, "package.json")
}
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new MomentLocalesPlugin({
localesToKeep: ['es-us', 'fr', 'es'],
}),
new webpack.DefinePlugin({
CONFIG: JSON.stringify(config),
}),
plugins.manifest,
plugins.sw
]
}
};
the Scripts on package.json
"build:local": "webpack --env.NODE_ENV=local --env.production --progress",
"start": "node server.js",
"dev": "webpack-dev-server --inline --watch --host 0.0.0.0 --env.NODE_ENV=local --env.development --progress"
Webpack packages used :
"webpack": "4.19.1",
"webpack-cli": "^2.0.15",
"webpack-dev-server": "^3.1.3",
"webpack-manifest-plugin": "^2.2.0"
PS: I tried both --env.production and --env.development in the build but neither worked
Any lead would be appreciated !

Making the app HTTPS fixed it, many thanks #Mathias

Webpack HotModuleReplacementPlugin not updating page when changes to files are made

The page loads up correctly and even logs to client console [WDS] Hot module replacement enabled. But when I make changes to files nothing is reflected on the page. Even on reload. Only when restarting the server.
Not sure if this matter but Im using redux.
webpack.config.js
var precss = require('precss');
var autoprefixer = require('autoprefixer');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + '/src/index.js',
output: {
path: __dirname + '/build',
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.css$/,
loader: 'style!css?modules!postcss'
},
{
test: /\.(png|jpg|jpeg|gif|woff)$/,
loader: 'url-loader?limit=8192'
}
]
},
postcss: function() {
return [autoprefixer, precss];
},
plugins: [
new HtmlWebpackPlugin({
template: __dirname + '/src/index.html'
}),
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: './public',
colors: true,
historyApiFallback: true,
inline: true,
hot: true
},
jest: {
moduleFileExtensions: ["js", "jsx"]
}
};
.babelrc
{
"presets": ["react", "es2015", "stage-0"],
"env": {
"development": {
"plugins": [["react-transform", {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
// this is important for Webpack HMR:
"locals": ["module"]
}]
// note: you can put more transforms into array
// this is just one of them!
}]]
}
}
}

Try adding
"scripts": {
"start": "node_modules/.bin/webpack-dev-server --progress --inline"
},
in your package.json file, and use npm start.

adding additional entry point in webpack config will reload the page automatically, however you will loose all the state because of a refresh.
entry: [
'webpack-hot-middleware/client?reload=true',
__dirname + '/src/index.js',
],
and in server js
app.use(require('webpack-hot-middleware')(compiler));

Scss extraction with webpack

I am trying to use ExtractTextPlugin to extract and convert my scss to css and move it to src folder along with client.min.js , but currently getting the following issue when building webpack.config.js file:
ERROR in ./scss/styles.js
Module not found: Error: Cannot resolve module 'main.scss' in C:\Users\ajoku\Desktop\Web Projects\learn2node\http\scss
# ./scss/styles.js 3:0-20
My webpack.config.js file :
"use strict";
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
let extractSCSS = new ExtractTextPlugin('./scss/main.scss',{allChunks: true});
module.exports = {
context: path.join(__dirname, "http"),
devtool: debug ? "inline-sourcemap" : null,
entry: {
js:"./react/client.js",
scss: "./scss/styles.js",},
module: {
loaders: [
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
}},
{test: /\.scss$/i, loader: ExtractTextPlugin.extract('css!scss')},
]
},
output: {
path: "./src/",
filename: "client.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
plugins: [
new ExtractTextPlugin('main.css', {
allChunks: true
})
]
};
My styles.js file
require("main.scss");
My scss files are located in http/scss along with styles.js file
What could be causing the problem?Thank you for your time.

This is possible with sass-loader and extract-text-webpack-plugin
webpack.config
module.exports = {
module: {
{
test: /\.scss$/,
include: path.resolve(__dirname, 'http/scss'),
loader: ExtractTextPlugin.extract('style', 'css?modules&localIdentName=[name]-[local]!autoprefixer!sass')
}
}
plugins: [
new ExtractTextPlugin('[name]-[hash].min.css')
]
}
package.json
"devDependencies": {
"autoprefixer-loader": "^3.1.0",
"css-loader": "^0.23.0",
"node-sass": "^3.4.2",
"sass-loader": "^3.1.2",
"extract-text-webpack-plugin": "^0.9.1",
"style-loader": "^0.13.0"
}