Where communities thrive

Join over 1.5M+ people
Join over 100K+ communities
Free without limits
Create your own community

Explore more communities

webpack/webpack

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

People

Repo info

Activity

12:28

webpack-bot labeled #12522
12:28

webpack-bot unlabeled #12522
12:27

sibiraj-s synchronize #12522
12:25

webpack-bot labeled #12522
12:05

webpack-bot labeled #12523
12:05

dependabot-preview[bot] review_requested #12523
12:05

dependabot-preview[bot] on npm_and_yarn

chore(deps-dev): bump mini-css-… (compare)
12:05

dependabot-preview[bot] labeled #12523
12:05

dependabot-preview[bot] opened #12523
12:04

webpack-bot labeled #12522
12:04

sibiraj-s opened #12522
10:54

dependabot-preview[bot] synchronize #12423
10:54

dependabot-preview[bot] on npm_and_yarn

chore(deps-dev): bump typescrip… (compare)
10:54

dependabot-preview[bot] edited #12423
10:52

dependabot-preview[bot] edited #12423
10:52

webpack-bot synchronize #7075
10:52

webpack-bot on master

chore(deps-dev): bump eslint-pl… Merge pull request #12511 from … (compare)
10:52

webpack-bot on npm_and_yarn

(compare)
10:52

webpack-bot closed #12511
10:51

webpack-bot labeled #12511

Alex Barker

@kwhat

import it twice?

will webpack not pack jquery into jquery.js and datatables.js ?

Evilebot Tnawi

@evilebottnawi

Do you use CMS? WordPress include own jquery

Alex Barker

@kwhat

No this is a laravel project which is another great example of more junk tooling

They use a webpack abstraction called mix

Peter Müller

@Munter

Have you used provideplugin? https://webpack.js.org/plugins/provide-plugin/#usage-jquery

Alex Barker

@kwhat

@Munter yes, sir. I tried this

.autoload({
    jquery: ['$', 'jQuery', 'window.jQuery', 'window.$'],
})

Peter Müller

@Munter

These are all artifacts from quite old ways of doing modules through the global scope. That does indeed require quite some extra legwork

Alex Barker

@kwhat

and this

mix.webpackConfig({
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            'window.$': 'jquery'
        }),
    ]
});

What is "old?" We talking < 3 months?

Peter Müller

@Munter

10+ years

Evilebot Tnawi

@evilebottnawi

Why you add .autoload({ jquery: ['$', 'jQuery', 'window.jQuery', 'window.$'], })?

Alex Barker

@kwhat

Sorry, this stuff changes more regularly than my underpants and all these things I have tried are the only answers/docs I could find.

Evilebot Tnawi

@evilebottnawi

You need only ProvidePlugin

Alex Barker

@kwhat

is this ProvdePlugin different from

mix.webpackConfig({ plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', 'window.$': 'jquery' }), ] });

Peter Müller

@Munter

Do you have any way of seeing what your tool abstraction around webpack generates as its configuration for webpack? That would be useful

Alex Barker

@kwhat

When I try that webpackConfig ProviderPlugin I get "Uncaught ReferenceError: $ is not defined". Not really, not that I am aware of... This is the best you get: https://github.com/JeffreyWay/laravel-mix/tree/master/src

There is also this: https://laravel-mix.com/docs/4.1/quick-webpack-configuration

Evilebot Tnawi

@evilebottnawi

I think reproducible test repo help to solve problem

Alex Barker

@kwhat

Yah, I think going back to C is probably a better long term solution. The last 3 years have really just destroyed everything I have ever enjoyed about development.

It seems to just get more and more complex with a lot of on paper benefits that never materialize. You guys seem to enjoy this stuff, so please keep it. It makes the rest of us want to kill ourselves.

Peter Müller

@Munter

Dude, the reason this is hard is that you are using libraries from before the dependency graph era. Everybody struggles getting 10 year old tech to work

Peter Müller

@Munter

@kwhat This work for me:
https://github.com/Munter/jquery-datatables
https://awesome-lewin-57c799.netlify.com/

The need for the amd override surprised me

Harimau melaya

@HarimauApapap_twitter

afrozMT

@afrozMT

I am using speed-measure plugin to investigate long build time taken by webpack.
Unable to figure what is it which is taking time. Here is the snapshot of timing returned by speed measure plugin:

`
SMP ⏱
General output time took 61,459 ms

SMP ⏱ Plugins
HtmlWebpackPlugin took 1,492 ms
CircularDependencyPlugin took 510 ms
DefinePlugin took 1 ms

SMP ⏱ Loaders
modules with no loaders took 56,412 ms
median = 296 ms
mean = 306 ms
s.d. = 298.099 ms
range = (0 ms --> 3,023 ms)
module count = 3538
/Users/afrozalam/Code/mt-coaching-ui/node_modules/@mindtickle/mt-ui-components/src/Icon/icon.config.json = 3,023 ms
/Users/afrozalam/Code/mt-coaching-ui/node_modules/rc-tween-one/es/plugin/StylePlugin.js = 2,795 ms
/Users/afrozalam/Code/mt-coaching-ui/node_modules/rc-calendar/lib/date/DateTHead.js = 2,728 ms
/Users/afrozalam/Code/mt-coaching-ui/node_modules/rc-calendar/lib/date/DateTBody.js = 2,726 ms
/Users/afrozalam/Code/mt-coaching-ui/node_modules/@babel/runtime/helpers/toConsumableArray.js = 2,508 ms
/Users/afrozalam/Code/mt-coaching-ui/node_modules/@babel/runtime/helpers/objectWithoutProperties.js = 2,503 ms
/Users/afrozalam/Code/mt-coaching-ui/node_modules/whatwg-fetch/fetch.js = 2,286 ms
/Users/afrozalam/Code/mt-coaching-ui/node_modules/@babel/runtime/helpers/slicedToArray.js = 2,208 ms
/Users/afrozalam/Code/mt-coaching-ui/node_modules/intersection-observer/intersection-observer.js = 2,057 ms
/Users/afrozalam/Code/mt-coaching-ui/node_modules/styled-components/dist/styled-components.browser.esm.js = 1,908 ms
/Users/afrozalam/Code/mt-coaching-ui/node_modules/store/src/util.js = 1,889 ms
/Users/afrozalam/Code/mt-coaching-ui/node_modules/redux-batched-actions/lib/index.js = 1,889 ms
/Users/afrozalam/Code/mt-coaching-ui/node_modules/react/cjs/react.development.js = 1,393 ms
/Users/afrozalam/Code/mt-coaching-ui/node_modules/html-entities/lib/html5-entities.js = 1,354 ms
/Users/afrozalam/Code/mt-coaching-ui/node_modules/html-entities/lib/html4-entities.js = 1,333 ms
/Users/afrozalam/Code/mt-coaching-ui/node_modules/@sentry/utils/misc.js = 1,333 ms
/Users/afrozalam/Code/mt-coaching-ui/node_modules/html-entities/lib/xml-entities.js = 1,330 ms
/Users/afrozalam/Code/mt-coaching-ui/node_modules/core-js/modules/_array-species-constructor.js = 1,308 ms
/Users/afrozalam/Code/mt-coaching-ui/node_modules/core-js/modules/_is-object.js = 1,272 ms
/Users/afrozalam/Code/mt-coaching-ui/node_modules/react-intl/locale-data/tr.js = 1,270 ms
/Users/afrozalam/Code/mt-coaching-ui/node_modules/react-intl/locale-data/ts.js = 1,269 ms
/Users/afrozalam/Code/mt-coaching-ui/node_modules/react-intl/locale-data/to.js = 1,267 ms
/Users/afrozalam/Code/mt-coaching-ui/node_modules/ramda/es/whereEq.js = 1,265 ms
/Users/afrozalam/Code/mt-coaching-ui/node_modules/ramda/es/without.js = 1,264 ms
/Users/afrozalam/Code/mt-coaching-ui/node_modules/ramda/es/zip.js = 1,263 ms
/Users/afrozalam/Code/mt-coaching-ui/node_modules/ramda/es/xprod.js
`

I am using latest webpack version. I am unable to infer what it is for webpack for load a module when there is no loader/plugin involved.

Evilebot Tnawi

@evilebottnawi

A lot of modules without loaders took 56,412 ms

afrozMT

@afrozMT

Yes, thats what i am trying to undestand

when there is no loader involved, what is it webpack taking time then ?

Evilebot Tnawi

@evilebottnawi

on parsing import/export/require/module.exports

afrozMT

@afrozMT

OKay, so what could be reason(s) for such erroneous time. Any pointer ?

Evilebot Tnawi

@evilebottnawi

Maybe a lot of dependencies, hard to say without source

afrozMT

@afrozMT

/Users/afrozalam/Code/mt-coaching-ui/node_modules/@mindtickle/mt-ui-components/src/Icon/icon.config.json

this file is just a static map of constants:

{ "ADD": "add", "ADD2": "add2", "ADDCOMMENT": "addComment", "ALERT": "alert", "ANALYTICS": "Analytics", "ANNOUNCEMENT": "announcement", "ARROWUPDOWN": "arrowUpDown", "ARROWUPRIGHT": "arrowUpRight", "ASSET": "Asset", "ATTACHEMENT": "attachement", "ATTACHMENT": "attachment", "AUDIO": "audio", }

still it took 3,023 ms

Evilebot Tnawi

@evilebottnawi

maybe :smile:

afrozMT

@afrozMT

overall build time has increased, which justifies this :\

Evilebot Tnawi

@evilebottnawi

maybe you use import { something } from 'my.json'?

afrozMT

@afrozMT

yes we use this :
import ICON_MAP from './icon.config.json';

Evilebot Tnawi

@evilebottnawi

I mean named import: import { name } from 'something'

afrozMT

@afrozMT

nope we never did that.

just one instance if import

Evilebot Tnawi

@evilebottnawi

hm, need profile, it is easy and allow to solve problem fast

afrozMT

@afrozMT

do you mean CPU profile ?

Evilebot Tnawi

@evilebottnawi

no, code

will be great to look on configuration

afrozMT

@afrozMT

here is my webpack config if you want to have quick glance:
http://dpaste.com/0CJQZW5

babelrc :
http://dpaste.com/0H3PKEB

Evilebot Tnawi

@evilebottnawi

maybe using cache-loader for css-loader can decrease compilation time (solved in webpack@5)

afrozMT

@afrozMT

Intresting part is build time is drastically reduced when using babel6 . this problem came when i updared it to babel 7