webpack/webpack

For questions please post on Stack Overflow and use the 'webpack' tag (http://stackoverflow.com/tags/webpack).

aliasflavius

@aliasflavius

Even though there are a lot more people having issues with Webpack

But maybe that's why the description of this channel is For questions please post on Stack Overflow and use the 'webpack' tag (http://stackoverflow.com/tags/webpack).

So not sure what this channel is for

NickWoodward

@NickWoodward

Hi Guys, how do I reference a hashed img into the final build dist/index.html to be like <img src="logo.2342sdasd.png"> ?
What I'm doing right now is I'm hardcoding the logo image like this <img src="logo.png"> but when I build webpack it gets with the same name without hashing, of course because I'm hardcoding it inside src/index.html which is the htmlWebpackPlugin template.

Use a rule that tests for the image and uses a file-loader that specifies the file name with a hash

                test: /\.(png|jpeg|jpg|gif)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[hash:5].[ext]',
                        outputPath: './images/'
                    }
                }
            },

Not sure why it's quoted me @mahmoudZakaria90

3 replies

Angus Hollands

@agoose77

@aliasflavius thanks, I ought to have read that -.-

udayrajMT

@udayrajMT

Hi everyone, pretty new here so help if this is already answered before-

I'm trying to lazy load a component, but I want only one chunk file created for that component. Webpack is apparently creating multiple chunks even for stuff that is imported inside that component.

Any way to create one bundle for that component ?(given it doesn't use something common with rest of the application)

udayrajMT

@udayrajMT

Also, if it helps, I have library:"umd" in the config :

  output: {
    path: Dir.DIST,
    publicPath: "http://localhost:8765/",
    ecmaVersion: 5,
    filename: `${COMPONENT_DIRECTORY_NAME}/[name]/${COMPONENTS_DRAFT_VERSION}/${INDEX_FILE}.js`,
    chunkFilename: `${CHUNKS_DIRECTORY_NAME}/[name].[chunkhash].chunk.js`,
    libraryTarget: "umd",
    library: [COMPONENTS_LIBRARY_NAME, "[name]"]
  },

hoppingninja666

@hoppingninja666

How do I import jQuery without binding it to the window object? I want to add my app to an WordPress page and don't want to face multiple versions of jQuery conflicting situation.

talkthetalk_walkthewalk

@LysKing

Hello, I want to ask a question, if the output filename is configured and Contenthash is added, when is the hash value generated during the compilation and build of WebPack? Will the hash values be recalculated from the contents of module and Chunk during the build process? If I extract the common module in the mode of 'initial' with splitchunks, when is the common chunkId generated? Looking forward to your reply~

chandrakanthi07

@chandrakanthi07

Hi anyone knows why latest webpack doesnot compile successfully. it stops after [2] ./src/assets/css/bootstrap.min.css 80 bytes {0} [built]

    + 1 hidden module

iamSamaritan

@imSamaritan

Hey guys.... Firstly I have this problem of wanting to avoiding compiling my JS file to folder build or dist while that is located to a root folder of project ...I want all of my build or dist JS files to go inside another folder "public" that will be located to my root project folder .... YES it can be done but a strange thing is that I can't or no longer able to use webpack-dev-server... By that it's does run my files but my index page inside my public folder doesn't get auto reload is that a nature of webpack live server... How can I overcome this because I wanna work with structure that is similar on working with webpack using TS ... I wanna separate all my folder src when I work and I want all my assets(index.html, build/dist, css, images) to be inside public similar framework like but using ES6 ...The goal is to build a PWA ...

My second problem is to config webpack to compile two files app.js as entry point which will take all my modules bundle them to dist or build but also I want webpack and Babel to aware that I want to run another file of JS from src to public that will be my service worker sw.js so my goal is avoid writing inside public but work on src folder only using app.js for DOM and all interaction but also be able to create sw.js to be compiled to public also because all of my scope project that will be deployed will be inside a public folder...I can't use sapper or ReactNative or angular to avoid those suggestions THANK YOU

Enchufadoo

@Enchufadoo

Hi guys, does anyone know how to remove TerserPlugin from my production build? according to this documment it's enabled by default. FML I can't remove it, I have managed to modify some of it's options but not to make it dissappear

https://webpack.js.org/configuration/mode/#mode-production

Tom Hacohen

@tasn

Hey, I built a library that has some optional dependencies. It works great when I use this library in node or in react-native (Metro bundler), but when I use this library in a Webpack project I get the "module not found" error. The require is surrounded with a try/catch, so I thought it would work. I looked online and can't find a solution. Editing the client's webpack config is not an option, as that would be terrible usability for users. Any idea? Thanks!

__non_webpack_require__ is not an option either because that breaks the metro bundler (react-native)

Daniel Florey

@dflorey

Hi all! Is this the right place to get some insights regarding the webpack5 module federation with dynamic remotes?

aliasflavius

@aliasflavius

Does Webpack also have a Slack group?

aliasflavius

@aliasflavius

How can I get an invite to the Slack group?

April Arcus

@AprilArcus

can I condition a loader on the name of mainField?

i.e. I would like to pass node_modules through babel if their mainField is module

but ignore them if their mainField is main

Dimitrii

@DimaIpatii

Hi there! Guys, I've gote a problem with file-loader. I can't understand why my settings in one project where I uploaded images works fine, and in another doesn't. Here are my settings from the project where everything works well, and the folder with images is added to "dist":

This is 'webpack.comon.js'

'webpack.prod.js'

'webpack.dev.js'

Dimitrii

@DimaIpatii

terminal

I didn't write 'import' in my index.js adn it works perfectly.

And here is my recent project I'm working in. I prepare my workflow and testing and I can't add the image folder to 'dist'. Here're the screenshots:

Dimitrii

@DimaIpatii

package.json

'webpack.common.js'

'webpack.dev.js'

terminal

How can I add folder to 'dist' with all images inside?) Thanks a lot, and sorry for this bunch of screenshots.)

Amir Reza Mehrbakhsh

@AmirRezaM75

Hi everyone, I don't know the basic knowledge of webpack and JS bundles so I ran into a problem.

I installed Swiper plugin using npm install swiper

I'm using laravel-mix and below is my config file

How and where I should import my swiper file?

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss')
const destination = 'dist';

mix.setPublicPath(path.normalize(destination));
mix.js([
    'node_modules/jquery/dist/jquery.js',
    'resources/js/script.js'
], destination + '/js/ketabuzz-front.js')
    .sass('resources/css/app.scss', destination + '/css/ketabuzz-front.css')
    .options({
        processCssUrls: false,
        postCss: [tailwindcss('tailwind.config.js')],
    })
    .copyDirectory('resources/fonts', destination + '/fonts')
    .copyDirectory('node_modules/font-awesome/fonts', destination + '/fonts/font-awesome');

Amir Reza Mehrbakhsh

@AmirRezaM75

script.js

// Cannot use import statement outside a module
import Swiper from 'swiper';

$(document).ready(function () {


    // Swiper is undefined
    new Swiper(".js-swiper-books", {
        slidesPerView: 6,
        slidesPerGroup: 5,
        });

});

Matt Marsh

@marshmn

Hi all; I'm building a Node.js web application and as part of that there will be some browser side assets that I'd like to use Webpack to process (TypeScript and SCSS mainly). I'm wondering how I should structure my sources so that Webpack operates on the browser-side stuff and doesn't try to operate on the server-side stuff? Of course the output for the browser-side stuff will need to end up in a location that the Node.js can then serve it

I was wondering if there's an example of how to lay out a project like this? I'm sure I'm not the first person doing something similar!

vamshia03

@vamshia03

Hello. We have a custom webpack module written for our company using the webpack. When I run "node --trace-deprecation node_modules/webpack/bin/webpack.js" I receive an error "ERROR in Entry module not found: Error: Can't resolve './src' in ..." with a path to my module at the end.

When I ran "webpack --display-error-details", it gives the error details as below:

Field 'browser' doesn't contain a valid alias configuration
using description file: "path to package.json" (relative path: ./src)
no extension
Field 'browser' doesn't contain a valid alias configuration
"path to parent dir/src" doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
"path to parent dir/src.wasm" doesn't exist

And same type of lines for .mjs, .js .json, similar to .wasm above.

Kawther1997

@Kawther1997

Hi i am using webpack in my node project but i have hbs pages and I dont know how i use it for them ..i hope find the solution

Where communities thrive

People

Repo info

Activity