Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Dec 05 19:18
    webpack-bot synchronize #7075
  • Dec 05 19:18

    webpack-bot on master

    chore(deps): [security] bump se… Merge pull request #10085 from … (compare)

  • Dec 05 19:18

    webpack-bot on npm_and_yarn

    (compare)

  • Dec 05 19:18
    webpack-bot closed #10085
  • Dec 05 19:17
    webpack-bot labeled #10085
  • Dec 05 19:02
    webpack-bot labeled #10085
  • Dec 05 19:02
    dependabot-preview[bot] labeled #10085
  • Dec 05 19:02

    dependabot-preview[bot] on npm_and_yarn

    chore(deps): [security] bump se… (compare)

  • Dec 05 19:02
    dependabot-preview[bot] labeled #10085
  • Dec 05 19:02
    dependabot-preview[bot] opened #10085
  • Dec 05 18:43
    webpack-bot labeled #10084
  • Dec 05 18:24
    opl- synchronize #10084
  • Dec 05 18:13
    webpack-bot labeled #10084
  • Dec 05 18:13
    opl- opened #10084
  • Dec 05 10:58
    webpack-bot labeled #10080
  • Dec 05 10:58
    webpack-bot unlabeled #10080
  • Dec 05 10:43
    sokra synchronize #10080
  • Dec 05 10:43

    sokra on cjs-tree-shaking

    fix Errors for require.parent/m… (compare)

  • Dec 05 09:48
    webpack-bot labeled #10083
  • Dec 05 09:33
    webpack-bot labeled #10083
Gregory Danko
@g-style
@johnmarinelli I need the hash name because of cache on prod. Every time we update production server, dynamically imported chunks needs to be updated on our clients machines but it doesn't happens because of cache.
Diego Gullo
@bizmate
Maybe not a webpack specific question but wondering if anyone can point me in the right direction. i am running yarn encore, ... components do import react, such as import React from 'react';
How can i make it a dependency without importing it so i can require it from a cdn and keep my scripts lean?
George Maged
@grgops_gitlab

Hi guys, I'm new to webpack, and I'm developing an npm chat package. I can't figure out the correct to make an external dependency. I tried the following for the styled-components package.

externals: { "styled-components": { commonjs: "styled-components", commonjs2: "styled-components" } }

However, when I try importing the package to my main react app. styled-components is not found in my package build file. I made sure styled-components is installed on my main react app

John Marinelli
@johnmarinelli
@g-style ahh i see. i think we had that same issue, so we use our own thing for that. we were using this plugin: https://github.com/soundcloud/chunk-manifest-webpack-plugin (webpack v3)
@rm-rf-etc try running webpack with --debug and --display-error-details; https://webpack.js.org/api/cli/#debug-options
yellow1912
@yellow1912
Hi guys, is there a way to completely disable url resolving when using the sass loader? Due to the way my project is setup, all the images, fonts paths inside the scss are already resolved before passing to webpack, so running resolve again will always result in error.
I was reading about resolve-url-loader but I don't see how it can help with the problem. Basically I want no url resolving at all
Anon Ymous
@burnt.orange.cap_gitlab

Hi guys,
Presently I am writing an es6 module which I am planning to bundle with webpack. The codebase which I am working on has a large frontend es5 codebase which is bundled outside webpack. I need to be able to use the es6 modules bundled by webpack in the existing es5 codebase.

Is there a way to export modules from webpack bundles to the global namespace?

I know we can use output.library: 'MyModule' for this, but if I have 3 modules A, B and C then using MyModule.A, MyModule.B,... seems a bit clunky.

I am new to webpack (and JS, haven't really worked on the frontend before)
March Works
@MarchWorks

I would like to send build progress to browser (through webpack-dev-middleware to eventSource) but I don't know how

compiler.apply(new webpack.ProgressPlugin(function(percentage, msg) {

}));
const devMiddleware = require('webpack-dev-middleware')(compiler, {
   logLevel: 'silent',
   publicPath: '/somePath/'
})

in the browser

const sse = new EventSource('/somePath/') // not sure what I should put here
sse.addEventListener('message', event => onSseMessage(event))
Tiago Martinho
@tiagosmartinho

hello,

I am trying to load the fonts through vue.config.js. However I am not getting it.

scss

@include font-face(Lato, '/fonts/lato/latoThin', 100, normal, eot woff2 woff svg ttf);

vue.config.js

     ....
     rules: [{
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [{
                    loader: 'file-loader',

                    options: {
                        name: 'lato/[name].[ext]',
                        outputPath: 'fonts/'
                    }
                }]
            },

if I remove the first slash from the source path, fonts/lato/latoThin it loads the fonts, but in compile this error appears

* ./fonts/lato/latoThin.eot? in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-3-1!./node_modules/postcss-loader/src??ref--8-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-3-3!./node_module s/resolve-url-loader!./src/styles/global.scss

and put the bar back in the font path and it works - /fonts/lato/latoThin

Any solution?

Gregory Danko
@g-style
@johnmarinelli I have found a solution. Actually there is an option for this: output.chunkFilename. So I set it to [name].[chunkhash].js and it works like a charm. Thank you anyway :)
Rob
@rm-rf-etc
@johnmarinelli thanks, that helped a bit. I have a better sense of the problem now but I'm not sure why this is happening. When I try to run a build process that isolates what I'm trying to build, it seems that webpack tries to import files that don't exist and I didn't ask it to import. Here's the error output.
ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/rchristian/Company/assets'
resolve './src' in '/Users/rchristian/Company/assets'
    using description file: /Users/rchristian/Company/assets/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/rchristian/Company/assets/package.json (relative path: ./src)
        no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/rchristian/Company/assets/src is not a file
        .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /Users/rchristian/Company/assets/src.wasm doesn't exist
        .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /Users/rchristian/Company/assets/src.mjs doesn't exist
        .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/rchristian/Company/assets/src.js doesn't exist
        .json
        Field 'browser' doesn't contain a valid alias configuration
        /Users/rchristian/Company/assets/src.json doesn't exist
        as directory
        existing directory
            using path: /Users/rchristian/Company/assets/src/index
            using description file: /Users/rchristian/Company/assets/package.json (relative path: ./src/index)
                no extension
                Field 'browser' doesn't contain a valid alias configuration
                /Users/rchristian/Company/assets/src/index doesn't exist
                .wasm
                Field 'browser' doesn't contain a valid alias configuration
                /Users/rchristian/Company/assets/src/index.wasm doesn't exist
                .mjs
                Field 'browser' doesn't contain a valid alias configuration
                /Users/rchristian/Company/assets/src/index.mjs doesn't exist
                .js
                Field 'browser' doesn't contain a valid alias configuration
                /Users/rchristian/Company/assets/src/index.js doesn't exist
                .json
                Field 'browser' doesn't contain a valid alias configuration
                /Users/rchristian/Company/assets/src/index.json doesn't exist
{
    mode: 'production',
    module: {
        rules: [{
            test: /\.s[ac]ss$/i,
            use: ['sass-loader'],
        }],
    },
}
ivan-vilches
@ivan-vilches
hello folks
i am looking for the chats for webpack community , is this active?
Rob
@rm-rf-etc
Why would sass-loader output a main.js file?
{
    mode: 'production',
    entry: [
        path.join(__dirname, './src/stylesheets/postcss.scss'),
        path.join(__dirname, './src/stylesheets/google_fonts.scss'),
    ],
    output: {
        path: path.join(__dirname, './dist/stylesheets'),
        publicPath: './dist/stylesheets',
    },
    plugins: [
        new CopyPlugin([{
            from: 'src/images/',
            to: path.join(__dirname, './dist/images/'),
        }, {
            from: 'src/fonts/',
            to: path.join(__dirname, './dist/fonts/'),
        }]),
    ],
    module: {
        rules: [{
            test: /\.s[ac]ss$/i,
            use: [
                'css-loader',
                'sass-loader',
            ],
        }],
    },
}
dist/stylesheets/main.js -> contents look like minified CSS
Rob
@rm-rf-etc
So, after adding filename: 'styles.css',, the file is suddenly readable (indented correctly), and I can see webpack bundler code, plus stuff...
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {

exports = module.exports = __webpack_require__(0)(false);
// Module
exports.push([module.i, "/*!\n *  Font Awesome 4.4.0 by @davegandy ...
How do I get sass to compile to a regular css file?
Rob
@rm-rf-etc
Found something. "It is not trivial to compile an SCSS file with Webpack, which is not included in the JS file, into its own CSS file. This post shows you how to do that." https://florianbrinkmann.com/en/sass-webpack-4240/
Obviously it should be trivial
Charles Guo
@CharlesGC
hello
Egor Baranov
@goganchic

Hello!

I'm exploring source codes of webpack and mini-css-extract-plugin and I have a question: why two different structures Dependency and Module were introduced? Why Module structure is not enough? If I'm not mistaken Dependency has only information about what should be built and Module has all algorithms about building, caching and so on. Am I correct? In this case in mini-css-extract-plugin CssDependency looks a bit strange, because it does all receives prepared contents from loader and CssModule only exposes prebuilt sources.

harshit786
@harshit786
Hello we are getting problem while running webpack
The changes in the src folder of main.scss
we are changing but nothing reflects
please help us out
Here at stack also we have added the problem
harshit786
@harshit786
Could you provide the path where the files are running ?
Is there anybody?
harshit786
@harshit786
Please reply anybody I am stucking from three days
harshit786
@harshit786
😞
Rogan Louwrens
@hallucinarium
@harshit786 Have you tried importing into index.js (or whatever your entry point is)?
One of my CSS imports via webpack is into index.js is import "./assets/css/base.css";
Tiago Martinho
@tiagosmartinho

hello,

I am trying to load the fonts through vue.config.js. However I am not getting it.

scss

@include font-face(Lato, '/fonts/lato/latoThin', 100, normal, eot woff2 woff svg ttf);

vue.config.js

     ....
     rules: [{
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [{
                    loader: 'file-loader',

                    options: {
                        name: 'lato/[name].[ext]',
                        outputPath: 'fonts/'
                    }
                }]
            },

if I remove the first slash from the source path, fonts/lato/latoThin it loads the fonts, but in compile this error appears

* ./fonts/lato/latoThin.eot? in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-3-1!./node_modules/postcss-loader/src??ref--8-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-3-3!./node_module s/resolve-url-loader!./src/styles/global.scss

and put the bar back in the font path and it works - /fonts/lato/latoThin

Any solution?

Rogan Louwrens
@hallucinarium
Have you tried using the url-loader?
Alternatively, try './fonts/lato/latoThin'
Tiago Martinho
@tiagosmartinho

Alternatively, try './fonts/lato/latoThin'

already tried this way

Have you tried using the url-loader?

Not yet, I'll try

harshit786
@harshit786

Encore.addStyleEntry('styles.min', './src/css/main.scss');

/**
 * JavaScript Entry Point
 */
Encore.addEntry('main.min', './src/js/main.js');

@ Rogan

these two files
Rogan Louwrens
@hallucinarium
@harshit786 Which framework are you using?
harshit786
@harshit786
This is simple
html files
webpack is running through scripts package.json