carloluis / webpack-demo

webpack 4 config. demo :gear:

Webpack 4 Demo · Legato 🎶

Demo project to start using and experiment with Webpack 4

Start

Restore dependencies and start development server:

yarn && yarn dev

Check your browser console at localhost:8080

Features

• entry / output custom config.
• chunk splitting (app | vendors)
• html creation: html-webpack-plugin
• copying files: copy-webpack-plugin
• webpack-dev-server
• Sass support
• Hot Module Replacement

---

Webpack

Install webpack

yarn add webpack webpack-cli --dev

More

This project started with Webpack 4 in beta version:

# add webpack 4 (currently on 4.0.0-beta.2)
yarn add webpack@next webpack-cli --dev

Zero Config (#0CJS)

Entry / Output

No need for explicit specify entry and output properties in the webpack configuration.

In Webpack 4 those fields are defaulted to:

{
    "entry": "./src",
    "output": "./dist"
}

Mode

Webpack mode reduce the required configuration for an useful build:

• development: this mode provide useful error messages and is optimized for speed (unminified bundle)
• production: enables optimizations out of the box (scope hoisting, tree shaking, minification, etc.)

webpack --mode production

There is also another hidden none mode which disables everything (available only inside the configuration object).

Changes

• Dropped Node.js 4 support. Therefore, more benefits from ES6 features (optimizations from V8).
• Sets of defaults with production and development modes.
• Changes on plugins (Some actives depending on mode. CommonsChunkPlugin was removed)
• Optimizations, performance boost and many more...
• Read changeset of Webpack v4.0.0

Articles

• 🚀 webpack 4 beta — try it today! 🚀
• webpack 4: mode and optimization
• webpack 4: import() and CommonJs
• webpack 4: Code Splitting, chunk graph and the splitChunks optimization
• webpack 4: released today!! ✨
• release notes & changelog

License

MIT © Carloluis

webpack-demo's Issues

Webpack Dynamic Imports

Add example for dynamic imports using Webpack.

• es6 dynamic import
• import operator

HMR

Support hot reload using react-hot-loader

Upgrade package dependencies...

Package	Current	Latest Package	Type	URL
babel-loader	7.1.5	8.0.4	devDependencies	https://github.com/babel/babel-loader
babel-plugin-transform-react-remove-prop-types	0.4.13	0.4.19	devDependencies	https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types.git
copy-webpack-plugin	4.5.2	4.5.4	devDependencies	https://github.com/webpack-contrib/copy-webpack-plugin
css-loader	0.28.11	1.0.0	devDependencies	https://github.com/webpack-contrib/css-loader
file-loader	1.1.11	2.0.0	devDependencies	https://github.com/webpack-contrib/file-loader
mini-css-extract-plugin	0.4.1	0.4.4	devDependencies	https://github.com/webpack-contrib/mini-css-extract-plugin
node-sass	4.9.2	4.9.4	devDependencies	https://github.com/sass/node-sass
react	16.5.0	16.6.0	dependencies	https://reactjs.org/
react-dom	16.5.0	16.6.0	dependencies	https://reactjs.org/
resolve-url-loader	2.3.0	3.0.0	devDependencies	https://github.com/bholloway/resolve-url-loader
sass-loader	7.0.3	7.1.0	devDependencies	https://github.com/webpack-contrib/sass-loader
style-loader	0.21.0	0.23.1	devDependencies	https://github.com/webpack-contrib/style-loader#readme
webpack	4.17.2	4.23.1	devDependencies	https://github.com/webpack/webpack
webpack-cli	3.1.0	3.1.2	devDependencies	https://github.com/webpack/webpack-cli#readme
webpack-dev-server	3.1.8	3.1.10	devDependencies	https://github.com/webpack/webpack-dev-server#readme