We Keep Coding

web worker not able to communicate in webpack

I am using webpack and this is my webpack config file
const webpack = require("webpack");
const path = require("path");
const lazPerf = require("laz-perf");
console.log(lazPerf);
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "docs"),
},
resolve: {
fallback: {
fs: false,
},
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.worker\.js$/,
exclude: /node_modules/,
use: "worker-loader",
},
],
},
devServer: {
port: 8080,
static: path.resolve(__dirname, "docs"),
hot: true,
},
mode: "development",
devtool: "cheap-module-source-map",
plugins: [
// commonjs({ include: /node_modules\/laz-perf/ }),
new webpack.DefinePlugin({
tree: {
leafCapacity: 16,
bufferCapacity: 16,
},
}),
],
};
And in index.js
this is my code:
import Worker from "./worker/fetcher.worker.js";
const fetchWorker = new Worker();
fetchWorker.postMessage("hello");
and this is fetcher.worker.js
onmessage = function (message) {
console.log(message);
};
this is my directory structure
I am not able to communicate and get that console from fetcher worker !!
Any help, please

Multiple modules not found during webpack build

I have a problem with webpack in my react app. My project structure is like below:
- root
-- app
--- src
---- App.tsx
---- index.tsx
--- package.json
--- assets
---- styles
----- main.css
--- scripts
---- webpack
----- webpack.dev.js
--- public
---- index.html
Can someone tell me why, I've got a many of errors like below during webpack build?
ERROR in ./src/features/app/settings/AppSettingsDetailsPage.tsx 29:0-43
Module not found: Error: Can't resolve 'src/store/store' in 'C:\Users\some\Desktop\some\some\app\src\features\app\settings'
example of using import in AppSettingsDetailsPage
import { dispatch } from "src/store/store";
Here is full of my webpack configuration, It's my first journey with webpack :(
Thanks for any help!
webpack.common.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
target: 'web',
entry: {
app: './src/index.ts',
},
output: {
clean: true,
path: path.resolve(__dirname, '../../dist'),
filename: '[name].[contenthash].js',
publicPath: 'dist/',
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json', '.svg'],
symlinks: false,
},
module: {
rules: [
{
test: /\.html$/,
exclude: /index.html/,
use: [
{
loader: 'html-loader',
options: {
sources: false,
minimize: {
removeComments: false,
collapseWhitespace: false,
},
},
},
],
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
}
],
},
};
webpack.dev.js
'use strict';
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = (env = {}) =>
merge(common, {
devtool: 'inline-source-map',
mode: 'development',
entry: "./src/index.tsx",
module: {
rules: [
{
test: /\.tsx?$/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
cacheCompression: false,
},
},
exclude: /node_modules/,
},
],
},
plugins: [
new ESLintPlugin({
lintDirtyModulesOnly: true,
extensions: ['.ts', '.tsx'],
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
}),
new HtmlWebpackPlugin({
filename: path.resolve(__dirname, '../../public/index.html'),
template: path.resolve(__dirname, '../../public/index.html'),
inject: false,
chunksSortMode: 'none'
})
],
});

How do I disable webpack 4 code splitting?

I'm using webpack 4.43.0.
How do I prevent codesplitting from happening in webpack? All these files are created - 0.bundle.js up to 11.bundle.js (alongside the expected bundle.js), when I run webpack. Here's my webpack config:
/* eslint-env node */
const path = require('path');
module.exports = {
entry: './media/js/src/main.jsx',
mode: process.env.WEBPACK_SERVE ? 'development' : 'production',
output: {
path: path.resolve(__dirname, 'media/js'),
filename: 'bundle.js'
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: path.resolve(__dirname, 'media/js/src'),
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env', '#babel/preset-react']
}
}
}
]
}
};

You can use webpack's LimitChunkCountPlugin to limit the chunk count produced by code splitting:
In your webpack.config.js file:
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
})
],
...
};
You could also pass the --optimize-max-chunks option to the webpack command directly.
So, in your package.json file:
{
"scripts": {
"build": "webpack --optimize-max-chunks 1",
...
},
...
}
Now, when you run npm run build, webpack will build only one file (or "chunk").

// Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
build: {
scopeHoisting: true,
vueRouterMode: 'history', // available values: 'hash', 'history'
showProgress: true,
gzip: false,
analyze: false,
distDir: 'dist',
productName:'pos_host_ui',
minify:true,
// Options below are automatically set depending on the env, set them if you want to override
// extractCSS: false,
// https://quasar.dev/quasar-cli/cli-documentation/handling-webpack
extendWebpack (cfg) {
const webpack = require('webpack');
cfg.plugins.push(
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
})
);
cfg.module.rules.push({
resourceQuery: /blockType=i18n/,
type: 'javascript/auto',
use: [
{ loader: '#kazupon/vue-i18n-loader' },
{ loader: 'yaml-loader' },
]
});
}

Nodejs, Webpack4

i want to build 1 nodejs app. I do not understand why when I build a version and copy to another place and run the node can not run because of the lack of modules.
this is file webpack:
const nodeExternals = require('webpack-node-externals')
const fs = require('fs')
var nodeModules = {};
fs.readdirSync('node_modules')
.filter(function (x) {
return ['.bin'].indexOf(x) === -1;
})
.forEach(function (mod) {
nodeModules[mod] = 'commonjs ' + mod;
});
module.exports = {
mode: 'development',
target: "node",
entry: {
server: './src/index.js',
},
output: {
path: path.join(__dirname, 'build'),
filename: '[name].js',
},
node: {
__gloabal: true,
__filename: true,
},
module: {
rules: [
{
test: /\.js$/,
exclude: '/node_modules',
use: {
loader: "babel-loader"
}
},
{
test: /\.json$/,
loader: "json"
}
]
},
resolve: {
extensions: [".js", ".json"],
},
externals: [nodeModules],
optimization: {
minimize: true
}
}
and here when i'm running in folder before coppy:

Because you use Externals configuration option
The externals configuration option provides a way of excluding dependencies from the output bundles. Instead, the created bundle relies on that dependency to be present in the consumer's (any end-user application) environment. This feature is typically most useful to library developers, however there are a variety of applications for it.
module.exports = {
mode: 'development',
target: 'node',
entry: {
server: './src/index.js'
},
output: {
path: path.join(__dirname, 'build'),
filename: '[name].js'
},
node: {
__gloabal: true,
__filename: true
},
module: {
rules: [
{
test: /\.js$/,
exclude: '/node_modules',
use: {
loader: 'babel-loader'
}
},
{
test: /\.json$/,
loader: 'json'
}
]
},
resolve: {
extensions: ['.js', '.json']
},
optimization: {
minimize: true
}
};

Webpack require.ensure Error on --optimize--minimize

I need to do code splitting and load some React component and other script on-demand, I simply do it like:
<Route path="/journal" getComponent={function (nextState, cb) {
require.ensure([], function (require) {
cb(null, require("./components/Journal"));
})
}} />
In development, just run webpack it works just fine.
But for production build, I run webpack -p, then I always get error:
Uncaught TypeError: Cannot read property 'call' of undefined
at e (bootstrap a99e046…:50)
line 50 is:
// Execute the module function
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
What could be the issue ?
My webpack config:
var webpack = require('webpack');
var merge = require('webpack-merge');
var validate = require('webpack-validator');
var parts = require('./webpack.parts');
var common = {
entry: {
vendor: ['react', 'react-dom', 'lodash'],
},
output: {
filename: "index.bundle.js",
path: __dirname + '/public/js/',
publicPath: __dirname + '/public/js/'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
minChunks: 3,
filename: "vendor.bundle.js"
})
]
};
var config;
switch(process.env.npm_lifecycle_event) {
case 'build':
config = merge(common,
{
devtool: 'source-map',
entry: {
app: [ __dirname + '/src/index.js']
},
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loaders: ["babel-loader"]}
]
}
},
parts.productionOptimize()
);
break;
default:
config = merge(
common,
{
devtool: 'eval-source-map',
entry: {
app: ['webpack-hot-middleware/client', __dirname + '/src/index.js']
},
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loaders: ["react-hot","babel-loader"]}
]
}
},
parts.devServer({
host: process.env.HOST,
port: process.env.PORT
})
);
}
module.exports = validate(config);
webpack.parts.js
var webpack = require('webpack');
exports.devServer = function(options) {
return {
devServer: {
historyApiFallback: true,
inline: true,
hot: true,
stats: 'errors-only',
host: options.host,
port: options.port
},
plugins: [
new webpack.HotModuleReplacementPlugin({
multistep: true
})
]
};
}
exports.productionOptimize = function () {
return {
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin()
]
}
}

I did it wrong, publicPath should not be absolute:
I change
publicPath: __dirname + '/public/js/'
to
publicPath: '/js/'