Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Dec 04 12:25
    vankop closed #10910
  • Dec 03 15:58
    sokra synchronize #14894
  • Dec 03 15:58

    sokra on css-modules

    bugfixes, external assets (compare)

  • Dec 03 12:55

    sokra on main

    Proposed fix to module federati… Added testing for new singleton… Merge pull request #14884 from … (compare)

  • Dec 03 12:55
    webpack-bot labeled #14884
  • Dec 03 12:55
    webpack-bot unlabeled #14884
  • Dec 03 12:55
    sokra closed #14884
  • Dec 03 10:45
    webpack-bot labeled #14896
  • Dec 03 10:45
    Hydrock opened #14896
  • Dec 03 10:40
    alexander-akait edited #14884
  • Dec 03 07:47
    sokra synchronize #14894
  • Dec 03 07:47

    sokra on css-modules

    css generation and hmr add support for url() in css add test case and 5 more (compare)

  • Dec 02 20:38
    webpack-bot unlabeled #14894
  • Dec 02 20:38
    sokra synchronize #14894
  • Dec 02 20:38

    sokra on css-modules

    add css tokenizer css generation and hmr add support for url() in css and 6 more (compare)

  • Dec 02 20:17
    webpack-bot labeled #14894
  • Dec 02 20:17
    webpack-bot labeled #14894
  • Dec 02 20:17
    sokra opened #14894
  • Dec 02 20:12

    sokra on css-modules

    add todo (compare)

  • Dec 02 18:37

    sokra on css-modules

    use comma instead of space test… (compare)

Matúš
@matustalcik:matrix.org
[m]
Okay, it seems I cannot use outputModule: true
David Leangen
@dleangen

Hello!

When running webpack-dev-server, all my content is served as files, not as http. Any hints?

Using:

@webpack-cli/serve 1.6.0
webpack: 5.64.1
webpack-cli: 4.9.1
webpack-dev-server 4.5.0

My webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
        static: './dist',
    },
    context: path.resolve(__dirname, 'src'),
    entry: {
        dummy: './scripts/dummy.ts',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'assets/js/[name]-[contenthash].js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "home.html",
            filename: "index.html"
        })
    ]
};
@myNameIsDu
Hello, I have a problem I don't understand, RuleSetLoader is of type string, but using MiniCssExtractPlugin its loader is a function
@myNameIsDu
image.png
Okay, I'm sorry. I didn't notice it
@myNameIsDu
@dleangen I don't understand what you are talking about, but I think there might be some problems with your configuration. devserve. static and output.path should not both be dist
David Leangen
@dleangen

I think you are right, thanks. I was just playing around with the config to try to isolate the problem.

I have been able to narrow down the problem to HtmlWebpackPlugin. I noticed that if there is no ".html" extension in the "filename" this problem occurs. It was working as expected (i.e. serving html) in v4, but when I upgrade I am getting this strange behaviour.

x-yuri
@x-yuri
Hi, this is probably a strange question, but why does this branch exists?
https://github.com/webpack/webpack/blob/v5.64.2/lib/javascript/JavascriptParser.js#L2947-L2972
Or why does webpack doesn't return definitions for function parameters and local variables?
https://github.com/webpack/webpack/blob/v5.64.2/lib/javascript/JavascriptParser.js#L3551
Owing to this DefinePlugin can't replace a variable.
David Leangen
@dleangen

I think I was able to narrow down the problem. My issue is with webpack-dev-middleware. It looks like it is not possible to configure the mime-type of a file that does not have an extension. The result is like this.

If I name my file "default.html", then I get this reply (from curl):

< HTTP/1.1 200 OK
< X-Powered-By: Express
< Content-Type: text/html; charset=utf-8
< Accept-Ranges: bytes
< Content-Length: 8968
< ETag: W/"2308-1YaG19zdqG3zkuYFNJVskAkntHs"
< Vary: Accept-Encoding
< Date: Mon, 22 Nov 2021 06:44:17 GMT
< Connection: keep-alive
< Keep-Alive: timeout=5

However, if I take away the html extension, I get this:

< HTTP/1.1 200 OK
< X-Powered-By: Express
< Accept-Ranges: bytes
< Content-Type: application/octet-stream
< Content-Length: 8968
< ETag: W/"2308-mEoik6Ip9CDdAalBtS74McRPXIY"
< Date: Mon, 22 Nov 2021 06:45:39 GMT
< Connection: keep-alive
< Keep-Alive: timeout=5

Notice the different mime-type!! I need the mime-type to be "text/html" for files that don't have an extension.

I tried configuring via my webpack.config as follows, but no joy. (The root file should be served with "default".)

            devServer: {
                devMiddleware: {
                    index: 'default',
                    mimeTypes: { '': 'text/html' }, <-- Tried configuring "no extension" here, but doesn't work
                }
            },

Is this a bug??? Or is there some way to configure this???

Chef Mitsu
@chefmitsu

Hello guys, I need your help.

I am tryinf to use Typescript in my react app, I have configured webpack.config.js and installed "Babel-loader" and "ts-loader", but when I run the test command
npx webpack --config webpack.config.js It gives the following error

`You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| function App() {
| return (

<Container>

| <Sidebar />
| </Container>
@ ./src/index.tsx 3:0-24 4:50-53`

Note: I make use of styled-components, I think that is where the problem arise from

Ethan Waldo
@Dishwasha
Hello. I am attempting to upgrade to webpack 5.64.1 via @vue-cli 5.0.0-rc.0 and am getting the error "Module not found: Error: path argument is not a string". I've tried following https://stackoverflow.com/questions/65819449/webpack-path-argument-is-not-a-string, but that doesn't seem to help. Unfortunately there's very little information about where the error is occurring. Does anyone have any experience with this error?
Ethan Waldo
@Dishwasha
It seems to be related to an scss @import
Ethan Waldo
@Dishwasha
nevermind, looks like it was the content of the @import which wasn't apparent
Wes
@wes-davis
Hey all. I'm trying out webpack-dev-server instead of browsersync for local work on a Wordpress theme project. Right now I've successfully installed and can run WDS but localhost:[port#] just shows a folder directory in the browser instead of the actual site, no matter where in the directory tree I point static— can anyone suggest what I might be doing wrong config-wise?
Wes
@wes-davis
^ (this is what I have in the config so far:
devServer: {

        host: 'xxxxxxxxxxxxx.local',

        static: path.join(__dirname, './'),

        https: true,

        hot: true,

        port: 3000

    }
Wes
@wes-davis
… or where would be a better place to ask questions specific to webpack-dev-server?
pgnd
@pgnd

@wooorm

moving a webpack config to ESM usage, dealing with unsupported require.resolve, looking at usage of your wooorm/import-meta-resolve

this interim solution works,

import { createRequire } from 'module';
const require = createRequire(import.meta.url);
const exposeJquery = () => ({
    module: {
        rules: [
            {
                test: require.resolve('jquery'),
                use: [
                ...

for the 'test:`.

with instead,

import {resolve} from 'import-meta-resolve';
const exposeJquery = () => ({
    module: {
        rules: [
            {
                test: require.resolve('jquery'),
                use: [
                ...

build fails

...
[webpack-cli] ReferenceError: require is not defined in ES module scope, you can use import instead
...

what's the right 'import' usage for that 'test: ...', with import-meta-resolve ?

Vlad Shcherbin
@vladshcherbin

Hey, how's it possible to disable all webpack transforms (e.g. import to require) and just "concatenate" files into one (for nodejs env)

Result after webpack execution should look like source code:

import http from 'http'

const server = http.createServer((req, res) => {
  res.end()
})

server.listen(3000)
Paul Abrams
@pabrams
Hey, has anyone noticed this is all questions, and no answers?

… or where would be a better place to ask questions specific to webpack-dev-server?

StackOverflow? Or maybe the issue tracker for webpack-dev-server?

Paul Abrams
@pabrams

Hey, how's it possible to disable all webpack transforms (e.g. import to require) and just "concatenate" files into one (for nodejs env)

Just write a script to take your files and concatenate them all to a new one, if that's what you want.

If you're on windows, you take a list of all the files you want to concatenate together, pipe that into PowerShell's foreach-object, and output the result of Get-Content, for each object. When you call the script, redirect the output to your new file.
Vlad Shcherbin
@vladshcherbin
@pabrams I can't, the requirement is to use webpack. I'd use rollup and call it a day - it does what I want with no config 😭
pgnd
@pgnd

@pabrams

Hey, has anyone noticed this is all questions, and no answers?

signs of being stretched waaaaay too thin ...

pgnd
@pgnd

@alexander-akait

is terser-webpack-plugin for webpack5 js minification being replaced by swc minification?

i see imagemin/imagemin is no longer maintained, and recommends squoosh. is image-minimizer-webpack-plugin still the planned/only option for wp image minification with squoosh?

i not your ongoing work/commits in these pojects, so not clear which are planned to deprecate, etc.

Paul Abrams
@pabrams

@pabrams I can't, the requirement is to use webpack. I'd use rollup and call it a day - it does what I want with no config 😭

What do you mean, "the requirement"... what is this, a homework assignment?

Paul Abrams
@pabrams
A client shouldn't be telling you what dev tools to use - that's up to you
Peter Sutton
@dj-foxxy
I get very high memory usage that grows over time (fills my 16GB RAM and 8 GB swap) for a medium sized project then OOM. Are their any common mistakes? Here's my config:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
const { ESBuildMinifyPlugin } = require('esbuild-loader')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = (env) => {
  const flag = (name, defaultValue = false) => {
    const value = env[name];
    return (typeof value === 'boolean') ? value : defaultValue;
  };

  const production = flag('production');
  const config = {};
  config.mode = production ? 'production' : 'development';
  config.entry = './src/client/main.tsx';

  // ---------------------------------------------------------------------- //
  // - Rules                                                              - //
  // ---------------------------------------------------------------------- //

  const cssRule = {
    test: /\.css$/i,
    use: [
      MiniCssExtractPlugin.loader,
      'css-loader',
    ],
  };

  const sassRule = {
    test: /\.scss$/i,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          esModule: false,
        },
      },
      'css-loader',
      {
        loader: 'sass-loader',
        options: {
          sassOptions: {
            sourceMapContents: false,
          },
          sourceMap: true,
        }
      }
    ],
  };

  const fileRule = {
    test: /\.(bin|glb|ico|mp3|png|[ot]tf|svg|webmanifest|woff2?|xml)$/i,
    loader: 'file-loader',
  };

  const tsRule = {
    test: /\.tsx?$/,
    loader: 'esbuild-loader',
    exclude: /node_modules/,
    options: {
      loader: 'tsx',
      target: 'esnext',
    },
  };

  const rules = [
    cssRule,
    sassRule,
    fileRule,
    tsRule,
  ];

  config.module = { rules };

  // ---------------------------------------------------------------------- //
  // - Plugins                                                            - //
  // ---------------------------------------------------------------------- //

  const definePlugin = new webpack.DefinePlugin({
    'process.env.NODE_DEBUG': 'false',
    'theWindow.TONE_SILENCE_LOGGING': 'true',
  });

  const htmlWebpackPlugin = new HtmlWebpackPlugin({
    inject: false,
  });

  const miniCssExtractPluginArgs = {};

  if (production) {
    miniCssExtractPluginArgs.filename = '[contenthash].css';
  }

  const miniCssExtractPlugin = new MiniCssExtractPlugin(
    miniCssExtractPluginArgs,
  );

  config.plugins = [
    definePlugin,
    htmlWebpackPlugin,
    miniCssExtractPlugin,
  ];

  // ---------------------------------------------------------------------- //

  config.resolve = {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
    fallback: {
      asserts: false,
      fs: false,
      path: false,
    },
  };

  config.optimization = {
    minimizer: [
      new ESBuildMinifyPlugin({
        target: 'esnext',
      }),
    ],
    usedExports: true,
  };

  const output = path.resolve(__dirname, 'package/client');

  config.output = {
    filename: '[contenthash].js',
    path: output,
    clean: true,
  };

  config.devtool = production ? false : 'source-map';

  config.devServer = {
    allowedHosts: ['lloyd.fds.im', 'peter.fds.im'],
    client: {
      logging: 'warn',
      webSocketURL: 'auto://0.0.0.0:0/webpack',
    },
    static: {
      directory: output,
    },
    historyApiFallback: true,
    host: '0.0.0.0',
  };

  return config;
};
Vlad Shcherbin
@vladshcherbin
@pabrams yep, it's a homework - you guessed it right :)
tst32
@tst32
Hello all, has anyone faced to unwanted / at path that webpack add at start of every path in index.html? like
<link rel="icon" href="/favicon96x96.png"><script defer="defer" src="/main.dev.js"></script><link href="/main.dev.css" rel="stylesheet"></head>
1 reply
Soumojit Chakraborty
@SOUMOJIT-CHAKRABORTY
Hi! I am new to opensource, I have javascript as my primary skillset, so can anyone tell me where should I start.
Any guidance form your side will be very helpful.
unclechu
@unclechu:matrix.org
[m]
SOUMOJIT-CHAKRABORTY (Soumojit Chakraborty) if you are looking where to start you could consider picking a different programming language (not php).
2 replies
Ffatheranderson
@ffatheranderson
Hi. :)
I am newb in webpack, and I have issue that I have described on stackowerflow in this thread:
https://stackoverflow.com/questions/70140202/webpack-defineplugin-process-env-node-env-is-undefined
could you please take a look at it?
Ffatheranderson
@ffatheranderson
Thank you very much. I have gotten an answer at stack overflow. :)
Perhaps from one of you. :)
Redwaza
@Redwaza

Hi all, I am experiencing some recompilation issues after upgrading from webpack 4 to webpack 5. I think it might be somehow related to the persistent cache. Basically what happens is that when I make a change to a file during runtime, the webpack starts recompiling but the compiled file in the cache directory does not get updated after the compilation finishes. However, the first time webpack compiles the files after starting my nodeJS server, all files are compiled properly and the output files are correct.

After a lot of trial and error I noticed that the only time when the recompilation during runtime works correctly is if I set the cache: false in the webpack configuration.

Here is my configuration:

config = {
    cache: false, // does not working without this
    context: path.join(__dirname, '..'),
    devtool: production ? false : 'source-map',
    entry,
    mode: production ? 'production' : 'development',
    module: {
        rules: []
    },
    output: {
        chunkFilename: hash ? '[contenthash].js' : '[name].js',
        filename: hash ? '[name].[contenthash].js' : '[name].js',
        path: path.join(destination, baseURL),
        publicPath: `/${baseURL}/`
    },
    plugins: [
        // new webpack.optimize.ModuleConcatenationPlugin() // TODO: Test this.
    ],
    resolve: {
        extensions: ['.ts', '.tsx', '.mjs', '.jsx', '...']
    },
    target: ['web']
};

Thank you very much!

Redwaza
@Redwaza
Has anyone noticed anything similar? I have not been able to find anything about this matter online, which makes me think that there is something wrong with my configuration..
Simarpreet Kaur
@Simarpreet-kaurrr
Hello everyone, I am new to contributing to this project. Can anyone help me with the building?
Anon
@makotech222
Hi all, i'm having an issue on Webpack 5, trying to compile a static json file into the output directory. I use this json file to inject environment variables into the app from the build process, and I want the compiled app to reference this static json file.
I have my webpack module set up for it:
{ test: /envSettings.json$/, exclude: /node_modules/, type: 'asset/resource', generator: { filename: 'envSettings.json' }
and it outputs correctly. However, the compiled web app isn't able to reference it at runtime
I get _envSettings_json__WEBPACK_IMPORTED_MODULE_1__.IdentityServer is undefined in js console
Paul
@psimk
Hello everyone, could someone help and put me on the right path?
I am attempting to write a custom plugin that would execute a set of bundled JS modules and convert their output into html files.
I already managed to setup everything so the JS modules are bundled into a single chunk and I can access the source of the chunk in my plugin, but how can I execute that chunk?
KeyurMistry1996
@KeyurMistry1996
i'm getting this error in one of my react project any help
Error: {"line":2,"column":784009,"sourceURL":"https://take-ticket.parkchamp.ca/static/js/2.193b980e.chunk.js"}
backspace131011
@backspace131011
[14:0] Stratum connection failed: Failed
to connect to na.luckpool.net port 3956:
Connection timed out
[14:0] retry after 30 seconds
[14:0] Stratum connection failed: Failed
to connect to na.luckpool.net port 3956:
Connection timed out
[14:0] retry after 30 seconds
[14:0] Stratum connection failed: Failed
to connect to na.luckpool.net port 3956:
Connection timed out
[14:0] …retry after 30 seconds
[14:0] Stratum connection failed: Failed
to connect to na.luckpool.net port 3956:
Connection timed out
[14:0] …retry after 30 seconds
[14:0] Stratum connection failed: Failed
to connect to na.luckpool.net port 3956:
Connection timed out
[14:0] …retry after 30 seconds
[14:0] Stratum connection failed: Failed
to connect to na.luckpool.net port 3956:
Connection timed out
[14:0] …retry after 30 seconds
[14:1] Stratum connection failed: Failed
to connect to na.luckpool.net port 3956:
Connection timed out
[14:1].
retry after 30 seconds
[14:1] Stratum connection failed: Failed
to connect to na.luckpool.net port 3956:
麻烦问一下
这个是什么情况呀