Instantly share code, notes, and snippets.

Embed
What would you like to do?
Just some notes about my attempt to upgrade to webpack 4

If you enjoyed reading this, I'm intending to do more blogging like this over here: https://cdgd.tech

This is not a complaint about Webpack or v4 in any way. This is just a record of my process trying it out so I could provide feedback to the webpack team

Hmm... I don't see any docs for 4.0 on https://webpack.js.org. I guess I'll just wing it. All I need to do is npm i -D webpack@next, right?

+ webpack@4.0.0-beta.2
added 1 package, removed 20 packages and updated 4 packages in 13.081s

Cool! Ok...

$ npm run buildjs

The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D

Agh! Alright. I'll install that too.

$ npm i -D webpack-cli@next
npm ERR! code ETARGET
npm ERR! notarget No matching version found for webpack-cli@next
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

Oh, maybe it doesn't need '@next'?

$ npm i -D webpack-cli
...
+ webpack-cli@2.0.6
added 209 packages in 39.639s

Ok. Let's try that build again...

Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

Alrighty, it's supposed to be "zero config" now. Let's see what happens when I just take that out. #0CJS #yolo

edits webpack config

But wait, how do I specify the name for my vendor bundle? Well, let's try running it and see what happens.

$ npm run buildjs
...
Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

Oh, that too, eh? Ok.

I'll cut these out, then:

new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    filename: 'vendor.min.js',
    minChunks: module => /node_modules/.test(module.resource)
}),

new webpack.optimize.UglifyJsPlugin({
    compress: {
	unused: false
    }
}),

Ok, now...

$ npm run buildjs
...
Error: Cannot find module 'uglifyjs-webpack-plugin'

Gah.

$ npm i -D uglifyjs-webpack-plugin
...
+ uglifyjs-webpack-plugin@1.2.0
added 1 package, removed 1 package and updated 5 packages in 10.899s

Let's try again...

$ npm run buildjs

...

 10% building modules 1/1 modules 0 active(node:13692) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:13692) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead         Hash: 36f7a2376b4b763b21f0                Version: webpack 4.0.0-beta.2
Time: 8262ms
Built at: 2018-2-22 07:58:12
 1 asset
Entrypoint app =
Entrypoint vendor = player.min.js

...module list...

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

ERROR in chunk app [entry]
player.min.js
Conflict: Multiple assets emit to the same filename player.min.js
webpack-cli 2.0.6
Usage: https://webpack.js.org/api/cli/
Usage without config file: webpack <entry> [<entry>] --output [-o] <output>
Usage with config file: webpack
...entire webpack --help output...

wat.

googles

reads webpack beta article

Ok. I guess I don't need to pass --optimize-minimize anymore. And I need this mode config now. Ok. Oh, and it did say to install webpack-cli first. Duh. Should have googled and read this first.

 DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:3244) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead

Where the hell is this even coming from? I have never seen this before. Whatever...

Why am I getting the webpack help output? Let's get rid of everything but the --config option and see what happens.

$ npm run buildjs

> mmcbuild@2.0.0 buildjs C:\Users\gabric\PhpstormProjects\MMC-TRUNK\player
> cross-env BABEL_ENV=production webpack --config build/webpack.prod.config.js

(node:11724) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
Hash: e0ad5ef31f134fbe2892
Version: webpack 4.0.0-beta.2
Time: 7359ms
Built at: 2018-2-22 08:08:08
 1 asset
Entrypoint app =
Entrypoint vendor = player.min.js
...modules...
    + 473 hidden modules

ERROR in chunk app [entry]
player.min.js
Conflict: Multiple assets emit to the same filename player.min.js
webpack-cli 2.0.6
Usage: https://webpack.js.org/api/cli/
Usage without config file: webpack <entry> [<entry>] --output [-o] <output>
Usage with config file: webpack
...entire help output again...

Right. That didn't help.

Let's just try to add the new config for the CommonsChunkPlugin replacement and see what happens.

I'll use this as a guide, I guess.

reads

Ok, so I just add this to my config, I guess:

splitChunks: {
	cacheGroups: {
		commons: {
			test: /[\\/]node_modules[\\/]
			name: "vendors",
			chunks: "all"
		}
	}
}

Nope. That's got a syntax error.

fixes

splitChunks: {
	cacheGroups: {
		commons: {
			test: /[\\/]node_modules[\\/]/,
			name: "vendors",
			chunks: "all"
		}
	}
}

Sweet big-ass red error, Batman!

$ npm run buildjs

> cross-env BABEL_ENV=production webpack --display-modules --progress --colors --config build/webpack.prod.config.js

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'splitChunks'. These properties are valid:
   object { mode?, amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, loader?, module?, name?, node?, output?, optimization?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack 2 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           splitChunks: ...
         }
       })
     ]

What do you mean splitChunks is unknown?

googles

Nothing helpful...

checks webpack beta article again

Ok, so that says optimization.splitChunks, let's try this, then:

(Edit: oh, duh, it actually says config.optimization.splitChunks in the warning about CommonsChunkPlugin... Durrrr)

    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendors",
                    chunks: "all"
                }
            }
        }
    },

Why am I still getting this webpack help output? How the heck do I fix this error?

ERROR in chunk app [entry]
player.min.js
Conflict: Multiple assets emit to the same filename player.min.js

Where are the docs for the config options for 4.0?

Maybe I'll just check the source... There's a potentially relevant example in there, but it's not really clear if it does what I need to do, as it's not really documented.

Hmm.. Actually, this example makes a little more sense. Looks like I need to change output.filename to use '[name]' instead of the explicit name I had before.

$ npm run buildjs

> cross-env BABEL_ENV=production webpack --display-modules --progress --colors --config build/webpack.prod.config.js

 10% building modules 1/1 modules 0 active(node:7716) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:7716) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead          Hash: 73c0f51bb0e7ea4f011a                Version: webpack 4.0.0-beta.2
Time: 15589ms
Built at: 2018-2-22 08:38:10
        Asset     Size  Chunks                    Chunk Names
vendor.min.js  474 KiB       0  [emitted]  [big]  vendor
   app.min.js  502 KiB       1  [emitted]  [big]  app
Entrypoint app [big] = vendor.min.js app.min.js
...shitload of modules...

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  vendor.min.js (474 KiB)
  app.min.js (502 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (975 KiB)
      vendor.min.js
      app.min.js


WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

Oh, shit. Did that actually work? Yes!

Wait, but now I have app.min.js and vendor.min.js. Oh, I see. I need to rename my entry to have that used as the filename.

edits config

Hash: 9f00b0adf58d23d3596a                Version: webpack 4.0.0-beta.2
Time: 12777ms
Built at: 2018-2-22 08:41:44
        Asset     Size  Chunks                    Chunk Names
vendor.min.js  474 KiB       0  [emitted]  [big]  vendor
player.min.js  502 KiB       1  [emitted]  [big]  player
Entrypoint player [big] = vendor.min.js player.min.js

There we go!

Oh, wait, is it doing the minimization? Yeah, must be. This article says it's on by default in production mode now. Ok, cool.

Webpack 3.11 build

$ time npm run buildjs

> cross-env BABEL_ENV=production webpack --optimize-minimize --display-modules --progress --colors --config build/webpack.prod.config.js

Hash: e7e52a3df71a5bc44924
Version: webpack 3.11.0
Time: 19783ms
        Asset    Size  Chunks                    Chunk Names
player.min.js  495 kB       0  [emitted]  [big]  app
vendor.min.js  491 kB       1  [emitted]  [big]  vendor
...modules...

real    0m23.698s
user    0m0.046s
sys     0m0.477s

Output file sizes:

player.min.js	491274
vendor.min.js	491988

total		983262

Webpack 4.0.0.beta.2 build

$ time npm run buildjs

> cross-env BABEL_ENV=production webpack --display-modules --progress --colors --config build/webpack.prod.config.js

 10% building modules 1/1 modules 0 active(node:13084) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:13084) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead         Hash: 9f00b0adf58d23d3596a                Version: webpack 4.0.0-beta.2
Time: 8430ms
Built at: 2018-2-22 08:52:15
        Asset     Size  Chunks                    Chunk Names
vendor.min.js  474 KiB       0  [emitted]  [big]  vendor
player.min.js  502 KiB       1  [emitted]  [big]  player
Entrypoint player [big] = vendor.min.js player.min.js

real    0m12.717s
user    0m0.137s
sys     0m0.325s

Output file sizes:

player.min.js	513680
vendor.min.js	484936

total		998616

Summary

Took a while to figure out how to update my config properly, but it works.

57% faster build, 1.5% larger total bundle size (weird, but not a deal-breaker).

Final config

var webpack = require('webpack');

// use resolve() to normalize paths between unix/windows environments
var path = require('path');

function resolve (dir) {
    return path.join(__dirname, '..', dir)
}

module.exports = {

    mode: 'production',

    entry: {
        player: resolve('app/main/index.js'),

        // code splitting: we take all of our vendor code and put it in a separate bundle (vendor.min.js)
        // this way it will have better caching/cache hits since it changes infrequently
        vendor: [
            // local packages
            'clipboard',
            'jquerynotify'

            // npm packages are added to vendor code separately in splitChunks config below
        ]
    },

    output: {
        path: resolve('app/'),
        filename: '[name].min.js'
    },

    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendor',
                    chunks: 'all'
                }
            }
        }
    },

    module: {
        rules: [
            {
                test: /\.css$/,
                loader: 'style!css'
            },
            {
                test: /\.html$/,
                use: 'raw-loader'
            },
            {
                test: /^(?!.*\.{test,min}\.js$).*\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    },

    resolve: {
        modules: [
            resolve('app'),
            resolve('app/css'),
            'node_modules'
        ],

        alias: {
            // external libraries
            jquerynotify: resolve('app/js/jquery.notify.min'),
            clipboard: resolve('app/js/clipboard.min'),

            // directory alias to shorten template paths
            templates: resolve('app/templates')
        }
    },

    plugins: [
        // ensure that we get a production build of any dependencies
        // this is primarily for React, where this removes 179KB from the bundle
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': '"production"'
        })
    ]

};
@Yayuro

This comment has been minimized.

Yayuro commented Feb 26, 2018

Good one, and it made me laugh a little bit :) Thx a bunch!

@gustavomassa

This comment has been minimized.

gustavomassa commented Feb 26, 2018

Good! I'm facing the same issues LOL. Thx :)

@meefox

This comment has been minimized.

meefox commented Feb 26, 2018

plus half of the plugins stop working :(

@wxchee

This comment has been minimized.

wxchee commented Feb 27, 2018

hi, I am also struggling to use webpack 4.0.0 last night. But I think they solved a few problem by now. I try either webpack@next or webpack (4.0.1) and they both works. All I did is create a src folder, and
$ npm init

$ npm i -D webpack@next webpack-cli
or
$ npm i -D webpack webpack-cli

$npm run build
(my build script is only "build": "webpack")

and tadah~ dist/main.js directory+file is generated

@eltonlam

This comment has been minimized.

eltonlam commented Feb 27, 2018

Thanks man, this helped me a lot.

@ermik

This comment has been minimized.

ermik commented Feb 27, 2018

Can I hire you to fix the issues I'm having with flushChunks and react-universal-component 🤣

@rjv

This comment has been minimized.

rjv commented Feb 27, 2018

This is excellent! Any chance you could provide the full modified webpack.config.js file?

@atilkan

This comment has been minimized.

atilkan commented Feb 28, 2018

you might provide your config.

@ajmajma

This comment has been minimized.

ajmajma commented Feb 28, 2018

Can you please show your working config? Thanks!

@jozcar

This comment has been minimized.

jozcar commented Feb 28, 2018

Thanks this was very helpful, this help me get rid of the errors, however, I still to figure out, how to include React inside the vendor[1] file, do you have a suggestion on how to accomplish this, here is my final webpack.config.js file

` var webpack = require('webpack');
var path = require('path');

module.exports = {
entry: {
vendor1: ["./vendor1"],
app: './src/app.js'

},
output: {
    path: path.join(__dirname, 'build'),
    filename: '[name].bundle.js'
},
module: {
    rules: [
        {
            test: /.js?/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['es2015', 'react']
            }
        },

        {
            test: /\.css$/, loader: 'style-loader!css-loader'
        }

    ]
},

optimization: {
    splitChunks: {
        cacheGroups: {
            vendor1: {
                name: "vendor1",
                test: "vendor1",
                enforce: true
            },
            vendor2: {
                name: "vendor2",
                test: "vendor2",
                enforce: true
            }
        }
    }
}

};`

@pavelloz

This comment has been minimized.

pavelloz commented Mar 1, 2018

holy $H!7 this new splitting api sucks... after so many tries i still cant recreate simple commonchunksplit config... 1 vendor.js, 1 bootstrap.js, 1 app.js... geez...

@akhayoon

This comment has been minimized.

akhayoon commented Mar 2, 2018

good stuff thanks man.

@Irosshipaz

This comment has been minimized.

Irosshipaz commented Mar 2, 2018

Thank you

@jeanpaulpollue

This comment has been minimized.

jeanpaulpollue commented Mar 5, 2018

best migration guide out there, should be the official.

@ozguruksal

This comment has been minimized.

ozguruksal commented Mar 7, 2018

thx man!

@sideroff

This comment has been minimized.

sideroff commented Mar 7, 2018

after a very frustrating hour I googled "what the fck webpack 4 config" and this popped up, nice to see I'm not the only one struggling

@palnes

This comment has been minimized.

palnes commented Mar 8, 2018

awesome stuff. thanks for this, the webpack people just talk about the feature instead of actually documenting it, making webpack 4 absolutely useless for any reasonably sized project. 😠

@AlyssonN

This comment has been minimized.

AlyssonN commented Mar 12, 2018

Very Thanks!!!

@spbroom

This comment has been minimized.

spbroom commented Mar 12, 2018

thanks, this is very useful!

@benpriebe

This comment has been minimized.

benpriebe commented Mar 13, 2018

well said, I can't understand releasing such a major change and not having adequate documentation, and migration guides. I'm now on my 4th full day trying to migrate a moderately complex configuration and still unable to replicate the named chunk functionality i need

@iheartrachie

This comment has been minimized.

iheartrachie commented Mar 15, 2018

This helped a lot. Thanks! 🎉

@allenevans

This comment has been minimized.

allenevans commented Mar 17, 2018

Brilliant! Thank you

@Nadeeshyama

This comment has been minimized.

Nadeeshyama commented Mar 19, 2018

Thanks for writing this. 👍

@gricard

This comment has been minimized.

Owner

gricard commented Mar 19, 2018

Wow. Sorry, I didn't see the notifications on this. I added my config to the gist.

Please don't take this as me railing on webpack in any way. I wrote this to provide feedback to the webpack team for the beta of webpack 4.

@finch001

This comment has been minimized.

finch001 commented Mar 19, 2018

the webpack doc is suck, this helped a lot, thx man.

@martinpinto

This comment has been minimized.

martinpinto commented Mar 19, 2018

Similar experience here! Good read!

@henriquecarv

This comment has been minimized.

henriquecarv commented Mar 19, 2018

Pretty much how I felt over the weekend when I was trying to update my boilerplate repo lol. Good one, man!

@shakna-israel

This comment has been minimized.

shakna-israel commented Mar 19, 2018

@gricard The webpack team have seen it, 0. They admitted they've dropped the ball on this, and seem to be working hard to fix the docs.

@shelldandy

This comment has been minimized.

shelldandy commented Mar 19, 2018

@gricard does that mean after you apply all of the tweaks you also have to add a script in your index with the vendor bundle or does that happen automatically? :O

@gricard

This comment has been minimized.

Owner

gricard commented Mar 20, 2018

@shakna-israel, they were the first to see it, actually. I wrote this up for Sean Larkinn when I was testing the beta.

@mike3run, yes. We have two script tags to load the vendor code and then our product code.

@gknapp

This comment has been minimized.

gknapp commented Mar 21, 2018

Thanks for posting, had a similar experience. Needed some info on the splitChunks config, and had to switch out extract-text-webpack-plugin for mini-css-extract-plugin and optimize-css-assets-webpack-plugin as I was seeing:

(node:2112) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:2112) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
(node:2112) UnhandledPromiseRejectionWarning: Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by 
instanceof Entrypoint instead

See this PR to the docs for config hints.

@mariuslazar93

This comment has been minimized.

mariuslazar93 commented Mar 21, 2018

Thanks for the post. I've been through something similar. I've also tried to set up SASS compilation to CSS plus autoprefixer and had some issues with while developing. Seems like because of the mini-css-extract-plugin, the webpack-dev-server doesn't detect changes to your SCSS files. The workaround was to add the style-loader for development. The working solution for me:

{
        test: /\.scss$/,
        use: [
          (isLocal ? 'style-loader' : MiniCssExtractPlugin.loader),
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              minimize: !isLocal,
              sourceMap: isLocal,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [precss(), autoprefixer()],
            },
          },
          'sass-loader',
        ],
      },

See this issue on mini-css-extract-plugin for updates.

@shivkoirala

This comment has been minimized.

shivkoirala commented Mar 27, 2018

Such huge changes , with out any document , repent putting all my build using webpack all prod builds failing.

@idessignflo

This comment has been minimized.

idessignflo commented Mar 28, 2018

hey
i have the same problem with webpack@4.3.0
when i run webpack i have the following error

C:\Idessign>webpack
Hash: 18bc2fd105d4883da519
Version: webpack 4.3.0
Time: 114ms
Built at: 2018-3-28 13:44:12

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

ERROR in Entry module not found: Error: Can't resolve './src' in 'C:\Idessign'

look my webpack.config.js

const webpack = require('webpack'),
path = require('path'),
ExtractTextPlugin = require("extract-text-webpack-plugin"),
nodeExternals = require('webpack-node-externals'),
srcPath = path.resolve(__dirname, "./src/"),
distPath = path.resolve(__dirname, './src/build/');
const HTMLPlugin = require('html-webpack-plugin');

const BUILD_DIR = path.resolve(__dirname , "./src/build/");
const APP_DIR = path.resolve(__dirname, "./src/");
const IMG_DIR = path.resolve(__dirname, './public/images');

const browserConfig = {
entry :
APP_DIR + 'client/index.js',

  output : {
  path : BUILD_DIR,
  filename : "[name] bundle.js",
  publicPath:BUILD_DIR,
},

module : {
    rules : [
        {
            test : /\.(js|jsx)$/,
            include : APP_DIR,
            loader : 'babel-loader',
            exclude: /node_modules/,
            query : {
            presets:[ 'react', 'es2015'],
          }
       ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
       new HTMLPlugin(),
  ]

};
help please

@LiranBri

This comment has been minimized.

LiranBri commented Apr 2, 2018

+999999999

@gricard

This comment has been minimized.

Owner

gricard commented Apr 2, 2018

@idessignflo it says

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

Add in mode: 'production' or mode: 'development' in your config's top level. Look at mine in the gist as an example.

@gregdeane

This comment has been minimized.

gregdeane commented Apr 4, 2018

Very helpful. Thanks!!

@mkastner

This comment has been minimized.

mkastner commented Apr 5, 2018

You just saved me lots of otherwise wasted hours and propably even days.

@allancarait

This comment has been minimized.

allancarait commented Apr 6, 2018

Thanks! Really helpful!

@vuchan

This comment has been minimized.

vuchan commented Apr 8, 2018

I don't know what helps me, but it's all right things.

@gricard

This comment has been minimized.

Owner

gricard commented Apr 9, 2018

For those using Jest for testing, I found that I had to follow the advice on https://github.com/mwolson/jest-webpack-alias and convert to using https://github.com/tleunen/babel-plugin-module-resolver to resolve my webpack aliases. I ended up making a separate list of them in my .babelrc as mentioned in the Getting Started section of their README.

@doberkofler

This comment has been minimized.

doberkofler commented Apr 10, 2018

very amusing ;-)

@mrchief

This comment has been minimized.

mrchief commented Apr 18, 2018

This rant is very similar to the experience I'm having. Thanks for the laughs.

Using webpack 4 resulted in larger bundles (in production mode) so I don't know where the magic isn't happening. Lack of docs and the fact the 3.0 docs are being masqueraded as 4.0 docs just add to the confusion. Half (or maybe more) of the ecosystem (plugins, loaders) is yet to catch up. Plus webpack 5 may make some of them obsolete leaving very less incentive for the authors to even spend the time to upgrade them.

The more I read into webpack 4, the more it feels like the Windows Vista release of webpacks. I'll just wait for the Windows 7 release I guess. :)

@nobleach

This comment has been minimized.

nobleach commented Apr 21, 2018

I found my larger bundles were due to running webpack in prod mode, but forgetting to explicitly set NODE_ENV=production which used my dev mode from my .babelrc.

@mrchief

This comment has been minimized.

mrchief commented Apr 27, 2018

@nobleach I'm doing that and I still get non-minified bundles. I wonder if it has anything to do with mode flag.

@jozefcipa

This comment has been minimized.

jozefcipa commented May 7, 2018

Man, you are genius ! ❤️

@quodos

This comment has been minimized.

quodos commented May 9, 2018

Thanks man ❤️ this made the transition nearly a breeze!

@eliseumds

This comment has been minimized.

eliseumds commented May 15, 2018

Nice, thank you very much!

@deepfriedbrain

This comment has been minimized.

deepfriedbrain commented May 20, 2018

I jumped from Webpack 1x straight to 4x and my bundles are now larger by about 4% (which is quite significant). I'm not sure if I'm missing something.

UPDATE: I figured out that the increase was due to inclusion of CSS and JS comments. After excluding those, the bundle size was about 7KB smaller.

@jandresampaio

This comment has been minimized.

jandresampaio commented May 25, 2018

Great post, with same results.
I guess they talk that crap about smaller bundles when they have a sample app with 2 components.
What about real apps ? Just don't understand...
Everything above 400kb is big ??? Wtf ? Is this a college app build tool ?

@ideaspring-cp

This comment has been minimized.

ideaspring-cp commented Jun 6, 2018

So as a newbie to Webpack (and to these types of build tools for JS), I thought I'd start "simple" by following along with countless tutorials available online. Little did I know that starting with Webpack 4 was going to ruin my entire day. At first I was "excited" because one usually learns by overcoming challenges, not just typing-along with tutorials. But man this is crazy-making!

Everything was humming along until getting to CSS/SCSS transforms. I can't seem to find a clear answer (and nothing I'm doing seems to work) for this. Issues like the docs stating "extract-text-plugin" should be replaced with "mini-css-extract-plugin" ... neither of which worked regardless of how many different configs I found online, and tweaks I tried to make. But if you're new to Webpack, there's no way to even guess and what to try since there's nothing to fall back on.

Is it better to change the dependencies to use Webpack 3 and wait-it-out? Or is it better to just use different build tools (e.g., Grunt, Gulp, etc.) Or use other build-tools in addition to Webpack (e.g., do Sass transforms first with another tool, then use Webpack to just deal with JS aspects)?

@tomm1996

This comment has been minimized.

tomm1996 commented Jun 22, 2018

@ideaspring-cp better use anything but webpack for compiling Sass until the CssWebpackPlugin is finished. The current workflow is kind of awkward and the compile times are unconscionable once you have more than 4000 lines of Sass.

@gauravgrover95

This comment has been minimized.

gauravgrover95 commented Jul 26, 2018

awesome post. :) Thanks for writing this.

@lsycxyj

This comment has been minimized.

lsycxyj commented Jul 31, 2018

Did any one solve the larger size problem? I found that codes bundled by webpack 4 contains some declarations about Symbol while code bundled by webpack 3 doesn't.

@thargenediad

This comment has been minimized.

thargenediad commented Aug 4, 2018

Thank you so much for this!

@codyromano

This comment has been minimized.

codyromano commented Sep 2, 2018

Thanks for the thorough write-up! Extremely helpful

@gricard

This comment has been minimized.

Owner

gricard commented Sep 11, 2018

If you enjoyed this, I’m going to continue doing more write-ups like this here: https://cdgd.tech

@thevaleriemack

This comment has been minimized.

thevaleriemack commented Sep 22, 2018

👍

@tuz1k

This comment has been minimized.

tuz1k commented Nov 15, 2018

Best answer :) made me laugh, thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment