Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 15:15
    webpack-bot labeled #13592
  • 14:41
    webpack-bot labeled #13591
  • 11:39
    webpack-bot labeled #13592
  • 11:39
    gthb opened #13592
  • 11:28
    webpack-bot labeled #13590
  • 11:27
    webpack-bot labeled #13591
  • 11:27
    gthb opened #13591
  • 10:33

    sokra on master

    enhancement: improve descriptio… test: update cli snapshot chore: improve clarity in descr… and 2 more (compare)

  • 10:33
    sokra closed #13483
  • 10:33
    sokra synchronize #13483
  • 10:30

    sokra on master

    capitalized first letter of sen… Merge pull request #13519 from … (compare)

  • 10:30
    sokra closed #13519
  • 10:26

    sokra on master

    fix:the judgment of promise is … shorter code Merge pull request #13467 from … (compare)

  • 10:26
    sokra closed #13467
  • 10:25

    sokra on master

    reduce algorithmic complexity o… Merge pull request #13589 from … (compare)

  • 10:25

    sokra on 13588

    (compare)

  • 10:25
    sokra closed #13589
  • 10:25
    sokra auto_merge_disabled #13589
  • 10:24

    sokra on master

    Correct emitFile content argume… update types.d.ts Merge pull request #13577 from … (compare)

  • 10:24
    sokra closed #13577
D-Rosado
@D-Rosado
people here seem to be having the same issue (even it's from a different plugin) stephencookdev/speed-measure-webpack-plugin#167
gloomysw
@swgloomy
image.png
nilsdjupvik
@nilsdjupvik
Hi everyone! I'm trying to build by component library that exposes multiple packages/module that the in codebase is imported static seperately (e.g. import moduleA, import module B etc). How can I setup a config that bundles this into one file? I will btw build it as a systemjs module that I load in single-spa app. Any info that helps me in the right direction is appreciated!
gbaah
@gbaah
Hi Everyone, I would like webpack-dev-server to use my html template file. To do that I am using HtmlWebpackConfig plugin but the plugin gets removed because of this line in the makeWebpackConfig.ts code (const removeList = ['HtmlWebpackPlugin', 'PreloadPlugin', 'HtmlPwaPlugin']). Is there a way to force the default HtmlWebpackPlugin used by webpack-dev-server to use my HtmlWebpackConfig object? Or is there a way for me to force the default plugin to use my html template instead of the default one (index-template.html)?
I mean is there a way to force webpack-dev-server to use my htmlwebpackplugin?
Mike Reiche
@mreiche
Hello. I need help with the Typescript integration of the https://github.com/webpack-contrib/worker-loader. Anyone matched that to get this work?
3 replies
Jules-Bertholet
@Jules-Bertholet
Hello, I'm trying to create a plugin to add a new WASM loading type (inline), but I can't figure out when to call EnableWasmLoadingPlugin.setEnabled(compiler, "inline"). I tried to call it with compiler.hooks.afterEnvironment, but I get the error
Error: Unsupported wasm loading type inline.
Plugins which provide custom wasm loading types must call EnableWasmLoadingPlugin.setEnabled(compiler, type) to disable this error.
Arshita Narayan
@arshita04
Hi people, I am trying to migrate from webpack V4 to V5. After upgrading the css loaders and dev server, cli , html-webpack-plugin . I keep getting the 'browser doesn't contain valid alias configuration' errors. Things work fine when the html-webpack-plugin,css-loaders are not updated and used with webpack4.
4 replies
Dominic Watson
@intellix
I'm trying to compile my project using webpack@5.38.1 to not need such a large node_modules when bundling my docker container. I have this in my config:
externals: ['subscriptions-transport-ws'],

when starting my bundled project I get: "Reference error: subscriptions is not defined" and I look at the line I see this:

"use strict";
module.exports = subscriptions-transport-ws;

Not sure why it's trying to do that. It'll never work

Dominic Watson
@intellix
ok the trick (not sure why) was:
externals: ['node_modules/subscriptions-transport-ws'], (but not in a similar project)
Joel Moberg
@joelmo
Is it possible to set a onclick for a element where the function resides in a bundle?
RGLB-G
@2019geguangpu
image.png
我。。。
What's the problem?
ukmastercom
@ukmastercom
@ukmastercom
hello i need a bit of help in javascript
can someone help me plz?
i have an array i want to save its information to a file
can someone suggest a way
array is like a=[343.56,5445.43,55.44,........]
RGLB-G
@2019geguangpu
@ukmastercom you may use some APIs from nodejs
ukmastercom
@ukmastercom
is there a way without it? I am new in webdev and also i dont have much idea about nodejs and its usage
RGLB-G
@2019geguangpu
Because reading and writing files need to access the operating system, JavaScript itself can't do it. Maybe you can also use chrome API.
@ukmastercom
It doesn't have to be Google.You can use browser's APIs.
ukmastercom
@ukmastercom
ok i'll try. thnx for your help
can i use django?? will it work??
logger-ctrl
@logger-ctrl
Hey Folks! I'm recently facing an issue within Webpack config where I have specified it on Github webpack repo: webpack/webpack#13564 so if anybody would be able to assist then it would be great!
Matt Jolly
@Kangie

Hi All,

Bit of an odd one here; I'm trying to make use of a module in an electron-forge app, and the webpack doesn't appear to be including the dependencies of that module.

As far as I can tell the dependency graph, file system, and yarn lock file all show the dependencies correctly, however whenever the webpack is built it complains about missing dependencies.

Unfortunately, I have absolutely no idea where to get started debugging that. Good news, I can point you at the source.

Any thoughts / pointers? Thanks!

Joel Moberg
@joelmo
I found an article that says webpackPrefetch won't fallback to some other method if the browser doesn't support prefetch. Is there a plugin that can take care of this? Otherwise I guess you need to do a xhr request in catch.
@Kangie which deps are missing?
try rm -rf node_modules/ && npm install
Mona Lisa
@spagu
Hi, before doing a long template bug report - I have a question: is it possible to make webpack to not pick up lock files during a watch ? it crashes each time I try to edit a file ( .#) test: /.scss$/, did try to make test: /^[^.#]*.scss$/ - that did not helped.
ukmastercom
@ukmastercom
how can i send array data from javascript to php
my html
<html>
<head>
<script type="text/javascript" src="home.js"></script>
</head>
<body onload="startthesite();">
<p>hello</p>

</body>
</html>
home.php
<?php
$arra = $_POST['arra'];
print_r($arra);
echo "hello";
echo $arra[1];
?>
var arra = [67.84,93.3];
function startthesite(){
$.ajax({
type: "POST",
url: "home.php",
data: { arra : arra},
success: function() {
alert("Success");
}
});
}
ukmastercom
@ukmastercom
any1
Iven Gehrmann
@1v3n

Hi,
after switching from extract-text-webpack-plugin to mini-css-extract-plugin I have some issues with URLs in SCSS / CSS files which are not resolved anymore. These URLs are svg-sprites which are generated with svg-sprite-loader.

Webpack just adds the full path ("/User/...") of in the output css file, but I expect to get the hashed path which webpack creates.


const path = require('path');
const webpack = require('webpack');
const SpritePlugin = require('svg-sprite-loader/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const StylelintPlugin = require('stylelint-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const TerserPlugin = require('terser-webpack-plugin');

module.exports = function({manifestConfig, target, commonPlugins, mode}) {

    const plugins = [
        ...
        new SpritePlugin(),
        new MiniCssExtractPlugin({filename: `[name]${manifestConfig ? '-[contenthash]' : ''}.css`}),
        new StylelintPlugin({    "files": ["**/*.scss","!/shops/"],
            "context": path.resolve(__dirname, '../scss/'),
            "fix": true,
            "configFile": path.resolve(__dirname, '../scss/_stylelintrc')
        }),
        ...commonPlugins
    ];

    if (manifestConfig) {
        plugins.push(
                new WebpackManifestPlugin({
                    fileName: manifestConfig.output,
                    seed: manifestConfig.assets,
                    basePath: '/offerpage/',
                    publicPath: '/offerpage/',
                    map: (file) => {
                        // Remove hash in manifest key
                        file.name = file.name.replace(/(-[a-f0-9]{32})(\..*)$/, '$2');
                        return file;
                    },
                })
        )
    }

    return {
        stats: 'minimal',
        devtool: 'source-map',
        entry: {
            myapp: [
                "babel-polyfill",
                path.resolve(__dirname, '../js/es6/myapp.es6.js')
            ]
        },
        output: {
            filename: `[name]${manifestConfig ? '-[chunkhash]' : ''}.js`, // use the properties of entry as name
            path: path.join(target, 'offerpage'),
        },
        optimization: {
            minimizer: [
                new TerserPlugin({
                    parallel: true,
                    sourceMap: true,
                }),
                new CssMinimizerPlugin(),
            ]
        },
        module: {
            rules: [
                ...
                {
                    test: /\.svg$/,
                    // always exclude the following directories in the url-loader below
                    include: [
                        path.resolve(__dirname, "../img/flags"),
                        path.resolve(__dirname, "../img/soop-2682-b-myapp-icons")
                    ],
                    // always exclude the following directories in the url-loader below
                    use: [
                        { loader: 'svg-sprite-loader',
                            options: {
                                extract: true,
                                spriteFilename: pathname => pathname.includes('soop-2682-b-myapp-icons') ?
                                        `images/soop-2682-b-sprite${manifestConfig ? '.[hash]' : ''}.svg` :
                                        `images/sprite${manifestConfig ? '.[hash]' : ''}.svg` },
                        }
                    ]
                },
                {
                    test: /\.(png|jp(e*)g|svg|gif)$/,
                    exclude: [
                        path.resolve(__dirname, "../img/flags"),
                        path.resolve(__dirname, "../img/soop-2682-b-myapp-icons")
                    ],
                    use: [{
                        loader: 'url-loader',
                        options: {
                            limit: 300,
                            name: `images/[name]${manifestConfig ? '-[hash]' : ''}[ext]`
                        }
                    }]
                },
                ...
                {
                    test: /\.scss$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        'postcss-loader',
                        {
                            loader: 'resolve-url-loader',
                            options: {
                                debug: true
                            }
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                sourceMap: true,
                                sassOptions: {
                                    sourceMapContents: true
                                }
                            }
                        }
                    ],
                }
            ]
        },

        ...
    };
};
Actual Dude
@actualdude

Hello Everyone. I'm getting this error "The package org.web3j.crypto is accessible from more than one module: core, crypto" . I don't know if it's the module-info file that's sending the error or the two dependencies "core / crypto".

"Module-info"
module com.mycompany.wallet {
requires javafx.controls;
requires javafx.fxml;
requires java.base;

opens com.mycompany.wallet to javafx.fxml;
exports com.mycompany.wallet;
requires jaxb.api;
requires com.google.gson;
requires javafx.base;
requires javafx.graphics;
requires de.jensd.fx.glyphs.fontawesome;
requires de.jensd.fx.glyphs.materialicons;
requires crypto;
requires core;

}

"Mnemonic Class" :
package Wallet;

import java.io.File;
import java.io.IOException;
import java.security.SecureRandom;

import org.web3j.crypto.Bip39Wallet;
import org.web3j.crypto.CipherException;
import org.web3j.crypto.Credentials;
import org.web3j.crypto.ECKeyPair;
import org.web3j.crypto.MnemonicUtils;
import org.web3j.crypto.WalletUtils;

public class Mnemonic {
static String walletPass = "Treasure@&67";
static File path = new File("Documents\PRIVATE\Test\demo");

public static void main(String[] args) {
    try {
        Bip39Wallet walletName = WalletUtils.generateBip39Wallet(walletPass, path);
        Credentials credentials = WalletUtils.loadBip39Credentials(walletPass, walletName.getMnemonic());
        String accountAddress = credentials.getAddress();
        ECKeyPair keyPair = credentials.getEcKeyPair();
        String mnemonic = walletName.getMnemonic();
        System.out.println("Account Details:");
        System.out.println("Your New Account Me : " + accountAddress);
        System.out.println("Mnemonic Words : " + mnemonic);
        System.out.println("Private Key: " + keyPair.getPrivateKey().toString(16));
        System.out.println("Public Key: " + keyPair.getPublicKey().toString(16));
    } catch (Exception e) {

    }
}

}

Thank you in advance for any help.

Ricky Munroe
@rimunroe
I have an ANTLR4 grammar file (Language.g4) that defines a small language. I use antlr4ts to compile that grammar file into a few files: Language.ts, LanguageVisitor.ts, Language.interp, and Language.tokens. I only really care about the two TypeScript files. Assuming I can't control the compiler actually creating these separate files, is it possible to write a loader (or chain of loaders) so that I could write import {Language, LanguageVisitor} from './Language.g4'; and have that work as though ./Language.g4 was actually a TypeScript module which imported everything from each of those compiled modules?
import * as Language from "./Language.ts";
import * as LanguageVisitor from "./LanguageVisitor.ts";

export {
    Language,
    LanguageVisitor
};
Ricky Munroe
@rimunroe
in short: making a loader that transforms one file into another file seems pretty straightforward, but is it possible to make a loader that transforms one file into several files?
Dominic Watson
@intellix

I'm using a library called Umzug to load in database migrations via a glob string like so:

const umzug = new Umzug({
  migrations: {
    glob: './database/seeders/*.{js,ts}',
  },
});

When I build my application I'd like those migration files to also be available via JS as well, via the same path... since it's not a require or import, how do I approach this? Do I need to force webpack to load an entire path of files to have them available after build via a similar glob path string?

Dominic Watson
@intellix
I read something that you can use a function like so, but it just adds 20min to build without succeeding:
function requireAll(r: any) { r.keys().forEach(r) }
requireAll(require.context('./database/seeders/', true, /\.ts$/));
Dominic Watson
@intellix
With that (I'm using 5.38.1 btw):
Before: 46,296ms - After: 428,099ms
Dominic Arrojado
@dominicarrojado
Hi everyone, I'm doing a migration from 4 to 5, and noticed the devtool option cheap-eval-source-map looks to be renamed into eval-cheap-source-map. Just wanted to confirm if it's really just a rename or something else was missed? I didn't see in the migration guide or anywhere else that it was renamed - would be good to mention if it is. Thank you.
Maurits Lamers
@mauritslamers
Hey all, I am trying to get QUnit unit tests integrated in webpack dev server, but I have issues trying to figure out how to generate the HTML for these tests. I would like to be able to use a loader to inject an entry (the test file) and the corresponding html file (perhaps through html-webpack-plugin). I see how I can add an entry, but how to add the html plugin settings not. I already tried childCompilers, but that only caused things to be built multiple times.
ANNAM SAI MANOHAR
@saimanoharhm
Hello, I am very new to this organisation but I would like to contribute to this organisation coming to my skills I am front-end developer with a tech stack of Html , css, JavaScript and React. Could someone point me to the right direction to contribute on this organisation.
shivam201312
@shivam201312

I am trying to convert my react app from client side rendering to server side rendering. I am able to run render JS and CSS file but
If css is defined for element then it is working find but if it is defining for class OR ID it is not rendering or working
*.css
//Working button { color:red; } //not working .testclass { color:red }
Project directory

PROJECTROOT
 - build
 - src
  -- pages
    --- homepage
       ---- homepage.js
       ---- homepage.css
    --- contactus
       ---- contactus.js
       ---- contactus.css
  -- App.js
  -- Client.js
  -- routes.js
 - server.js
 - webpack.client.js
 - webpack.server.js

Webpack.server.js

const path = require('path');
const webpackExternals = require('webpack-node-externals');
module.exports = {
    mode: 'development',
    target: 'node',
    entry: './server.js',
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'build'),
        publicPath:'/build'
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                loader:'babel-loader',
                exclude:'/node_modules/',
                options:{
                    presets:[
                        '@babel/react',
                        ['@babel/env',{
                            targets:{browsers:['last 2 version']}
                        }]
                    ]
                }
            },
            {
                test: /\.css$/,
                loader: 'ignore-loader'
            },
            { test: /(\.woff|\.woff2)$/, loader: 'url?name=font/[name].[ext]&limit=10240&mimetype=application/font-woff' },
            { test: /\.ttf$/, loader: 'ignore-loader' },
            { test: /\.eot$/, loader: 'ignore-loader' }
        ]
    },
    externals:[webpackExternals()]
}

webpack.client.js

const path = require('path');
const webpackExternals = require('webpack-node-externals');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    mode: 'development',
    target: 'node',
    entry: './src/client.js',
    output:{
        filename: 'client_bundle.js',
        path: path.resolve(__dirname, 'build/public'),
        publicPath:'/build/public'
    },
    module:{
        rules:[
            {
                test: /\.svg$/,
                use: 'file-loader'
            },
            {
                test:/\.js$/,
                loader:'babel-loader',
                exclude:'/node_modules/',
                options:{
                    presets:[
                        '@babel/react',
                        ['@babel/env',{
                            targets:{browsers:['last 2 version']}
                        }]
                    ]
                }
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                //use: [ 'style-loader', 'css-loader' ]
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                        },
                    },
                ],
            }
        ]
    }
}

homepage.js

import React, {Component} from 'react';
import "./homepage.css";
class HomePage extends Component {
    buttonClick(e){
        console.log("Clicked on button");
    }
    componentDidMount(){
        console.log("Component did mount");
    }
    render(){
        return(
            <div className="hello">Hello its home page
                <br></br>
                <button onClick={this.buttonClick}>Click on this button</button>
            </div>
        )
    }
}

export default HomePage;