Webpack 4 tutorial: All You Need to Know, from 0 Conf to Production Mode

The webpack team is working hard on the next generation of the popular module bundler: . webpack 4 The following post is a living, breathing . I’ll update it as soon as new info will come in. for more! introduction to webpack 4 Stay tuned on my blog webpack 4 as a zero configuration module bundler webpack is powerful and has a lot of unique features but one of its pain point is the . configuration file Providing a configuration for webpack is not a big deal in medium to bigger projects. You can’t live without one. Yet, for smaller ones it’s kind of annoying, especially when you want to kickstart some toy app. That’s why . Parcel gained a lot of traction Sean and the webpack team are going to change that: ! webpack 4 doesn’t need a configuration file by default Let’s try that out. Create a new directory and move into it: mkdir webpack-4-quickstart && cd $_ Initialize a package.json by running: npm init -y Now let’s pull webpack 4 in. npm i webpack --save-dev We need also, which lives as a separate package: webpack-cli npm i webpack-cli --save-dev Now open up and add a build script: package.json "scripts": {"build": "webpack"} Close the file and save it. Try to run: npm run build and see what happens: ERROR in Entry module not found: Error: Can't resolve './src' in '~/webpack-4-quickstart' webpack 4 is looking for an entry point in ! If you don’t know what that means go check out my previous article on . ./src switching from Gulp to webpack In brief: the is the file webpack looks for to start building your bundle. entry point Javascript In the previous version of webpack the entry point has to be defined inside a configuration file named webpack.config.js. But starting from : it will take as the default! webpack 4 there is no need to define the entry point ./src/index.js Testing the new feature is easy. Create : ./src/index.js console.log(`I'm a silly antry point`); and run the build again: npm run build You will get the bundle in . ~/webpack-4-quickstart/dist/main.js What? Wait a moment. There is no need to define the output file? Exactly. In . webpack 4 there is no need to define neither the entry point, nor the output file I know that for a lot of people that’s not so exciting. Webpack’s main strength is code splitting. But trust me, having a zero configuration speeds things up. tool So here is the first news: . webpack 4 doesn’t need a configuration file It will look in as the default entry point. Moreover, it will spit out the bundle in . ./src/index.js ./dist/main.js In the next section we’ll see another nice feature of webpack 4: . production and development mode webpack 4: production and development mode Having 2 configuration files is a common pattern in webpack. A tipical project may have: a , for defining webpack dev server and other stuff configuration file for development a , for defining , sourcemaps and so on configuration file for production UglifyJSPlugin While bigger projects may still need 2 files, in webpack 4 you can get by without a single line of configuration. How so? webpack 4 introduces and mode. production development In fact if you pay attention at the output of you’ll see a nice warning: npm run build The ‘mode’ option has not been set. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for this environment. What does that mean? Let’s see. Open up and fill the script section like the following: package.json "scripts": {"dev": "webpack --mode development","build": "webpack --mode production"} Now try to run: npm run dev and take a look at . What do you see? Yes, I know, a boring bundle… not minified! ./dist/main.js Now try to run: npm run build and take a look at . What do you see now? A ! ./dist/main.js minified bundle Yes! enables all sorts of optimizations out of the box. Including minification, scope hoisting, tree-shaking and more. Production mode Development mode on the other hand is optimized for speed and does nothing more than providing an un-minified bundle. So here is the second news: webpack 4 introduces and mode. production development In webpack 4 you can get by without a single line of configuration! Just define the flag and you get everything for free! --mode Stay tuned! More coming soon… This is a living, breathing introduction to webpack 4. Stay tuned on my blog for more! webpack 4: resources A Github repo for the tutorial => webpack-4-quickstart I know there’s already an awesome webpack list but here’s mine: a list of awesome resources about webpack 4 => awesome-webpack-4 Originally published at www.valentinog.com on January 19, 2018.