Webpack 2.0 is getting real

We want to write modular code. But browsers cannot run modularised code, so we need a module bundler. UIs aren't just JavaScript though. Our UI components can also depend on images, fonts, and CSS. Webpack recognises that and with the help of loaders, supercharges the require function so you can explicitly require all of your dependencies.

Webpack uses "loaders" to preprocess files while browserify uses "transforms".

npm init -y

npm i webpack --save-dev

npm i file-loader --save-dev
npm i url-loader --save-dev

npm i css-loader --save-dev
npm i style-loader --save-dev
npm i postcss-loader --save-dev
npm i postcss-cssnext --save-dev

npm i babel-core --save-dev
npm i babel-loader --save-dev

npm i eslint --save-dev
npm i eslint-loader --save-dev
npm i babel-eslint --save-dev

npm i babel-preset-es2015 babel-preset-react --save-dev
npm i babel-preset-react-hmre --save-dev

npm i react react-dom --save

OLD

▶ npm install react --save --save-exact
▶ npm install --save normalize.css
▶ npm install --save-dev babel-loader # Will add webpack also
▶ npm install --save-dev babel-eslint
▶ npm install --save-dev eslint-loader
▶ npm install --save-dev eslint-plugin-react
▶ npm install --save-dev url-loader
▶ npm install --save-dev css-loader
▶ npm install --save-dev style-loader
▶ npm install --save-dev sass-loader
▶ npm install --save-dev postcss-loader
▶ npm install --save-dev autoprefixer-core
▶ npm install --save-dev react-hot-loader
▶ npm install --save-dev extract-text-webpack-plugin
▶ npm install --save-dev webpack-dev-server
▶ npm install --save-dev assets-webpack-plugin
▶ npm install --save camelize

• Why Can’t Anyone Write a Simple Webpack Tutorial?
• Improve React performance with Babel
• Webpack the confusing part
• Reduce your bundle.js file size
• A modern React starter pack based on webpack
• Very nice component library setup
• Backend Apps with Webpack
• Survive JS
• React Webpack Cookbook
• How to test React components using Karma and webpack
• Creating a workflow with WebPack
• React-seed
• React with Webpack
• Webpack Cookbook
• Pete Hunt Webpack Howto
• Webpack presentation
• react-hot-boilerplate
• react-starterkit
• react-kickstart
• Official Webpack's react-starter
• hjs-webpack
• webpack_assets
• Browserify vs Webpack JS Drama
• Browserify for webpack users
• Browserify vs Webpack
• Good issue discussion
• Browserify Handbook
• Single page modules with Webpack
• HMR
• fetch polyfills
• Fetch polyfill with webpack
• Modularity
• react-bare-bones-starter-kit
• react-boilerplate
• Webpack aliases and relative paths

The webpack core can be extended with loaders and plugins.

• react-universal-starter
• starter-project
• Este.js
• react-for-hipsters-boilerplate
• A modern React starter pack based on webpack
• React+Webpack+Express+Redux
• react-redux-starter-kit
• Ultimate hot reloading example
• react-transform-boilerplate
• webpack-express-boilerplate
• front-stack-boilerplate
• react-slingshot
• startupslam-workshop
• react-starter
• react-cdk

• eslint-plugin-react
• eslint-config-airbnb
• eslint-config-rackt

// .eslintignore - from redux examples
**/dist/*
**/node_modules/*
**/server.js
**/webpack.config*.js

The loaders will only kick into action when you try to require something that match the test patterns.

Loaders and plugins are commonly confused with each other, but they are completely different things.

Roughly speaking, loaders deal with each source file, one at a time, as they are "loaded" by webpack during the build process. Plugins in the other hand do not operate on individual source files: they influence the build process as a whole.

Globals?

// See https://gist.github.com/Couto/b29676dd1ab8714a818f
plugins: [
  new webpack.ProvidePlugin({
    'Promise': 'es6-promise',
    'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
  })
]

// Or should we just use babel-polyfill?

• Example
• Example
• React ES6 boilerplate
• From christianalfoni
• Using gulp to inject hashes to HTML?
• React starter kit
• react-boilerplate
• react-way-getting-started
• react-component-boilerplate
• starter-kit

// Here when you compile the code it will be temporarily saved into build/js folder.
// Webpack Dev Server will in turn make that folder's scripts available at the URL /public/assets/js

module.exports = {
  context: path.resolve('js').
  entry: [],
  output: {
    path: path.resolve('build/js/),
    publicPath: '/public/assets/js',
    filename: 'bundle.js'
  },
  
  devServer: {
    contentBase: 'public'
  }
};

Single entry or multiple entries for code splitting.

Webpack is mainly a JavaScript-bundler. Its "native" language is JavaScript and every other source requires a loader which transforms it to JavaScript.

// npm install backbone jquery underscore
resolve: {
  alias: {
    jquery: 'lib/jquery-3',
    underscore: 'lib/lodash'
  }
}

• Smart CSS build with Webpack
• Combine SCSS with Webpack
• React: CSS in JS
• JSS
• See issues#31 for Sass import statement
• Please don't use CSS in JS
• Khan Academy's aphrodite

You divide your modules by folders and include both CSS and JavaScript files in those folders. See entry.

In Webpack, each Sass file is complied in isolation. It means you need to @import dependencies like variables and mixins wherever you use them!?

// header.scss
@import 'config/colors'

.header { color: $red; }

// Loaders will be applied from right to left, piping?
// Use ! to chain loaders
style!css!sass?includePaths[]=

• style-loader - take a string, create a <style> and handed to DOM
• css-loader - returns JavaScript string, resolve @import and url
• sass-loader
• file-loader - for css-loader to include images assets

style-loader injects <style> tag at runtime so it should not work server-side. You can load CSS as just text and then inject it manually.

If include isn't set, Webpack will traverse all files within the base directory. This can hurt performance! It is a good idea to set up include always. There's also exclude option that may come in handy. Prefer include, however.

Deprecated? Replaced by webpack-hot-middleware? webpack-hot-middleware allows you to add hot reloading into an existing server without webpack-dev-server.

A Node.js express server using webpack-dev-middleware to serve webpack bundle.

• Webpack and the Hot Module Replacement
• Live editing
• What exactly is HMR?
• React hot loader
• Don't trigger module reloading when there were errors generating the bundle
• You need to do module.hot at main entry file
• Troubleshooting guide for react-hot-loader issues
• react-transform-hmr -- or just use babel-preset-react-hmr
• React Transform not more?

Without hot loading, the browser essentially refreshes with a flash and loses all states.

If you have this problem:

GET http://localhost:3000/__webpack_hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING

It means you cannot use nodemon to restart server and have HMR working.

If you get this error:

Uncaught (in promise) Error: Aborted because 167 is not accepted(…)

It means you are editing the root component.

• Tree-shaking with Webpack 2 and Babel 6

Run uglify dead-code elimination.

webpack -p -d // source-map in production (minified also)

Especially with lodash or moment.js:

// Don't do this
import { concat, sortBy, map, sample } from 'lodash';

// Instead, require individually
import concat from 'lodash/concat';
import sortBy from 'lodash/sortBy';
import map from 'lodash/map';
import sample from 'lodash/sample';

• assets-webpack-plugin - Emits JSON file
• Loading webpack bundles with hashed filenames
• html-webpack-plugin
• html-loader
• template-html-loader
• Long term caching for vendor files

Use assets-webpack-plugin to access the JSON stats object.

• Welcome to Future of Web App Delivery
• Official example of code splitting and multiple entry points

Webpack allows you to split bundles in various ways. You can even load them dynamically as your application gets executed. This sort of lazy loading comes in handy for large applications. You can load dependencies as you need them.

const login = require('./login'); // will be bundled

login(() => {
  // hints to webpack to split this code out of the bundle
  // but "ensure" that it is available before the callback runs

  require.ensure([], () => {
    // webpack will load this dynamically when needed
    var willNotBeBundled = require('./DashboardPage');
  });
});

• react-rails-webpack
• Building stateless Rails API with React
• Flux/Flummox, React/Router, Immutable, Webpack, Babel on Rails
• How to use webpack with Rails
• Rails with Webpack
• assets-webpack-plugin
• webpack_and_rails
• webpack_rails_demo
• rails-webpack-react-flux
• Setting up webpack with Rails
• React Webpack Rails
• swig-webpack-plugin - Better than assets-webpack-plugin?
• Basic React.js with Rails without react-rails gem
• rails-starter
• react-universal-starter
• hjs-webpack - Helpers/presets for setting up webpack

Use JSON manifest file for production fingerprinting.

1. Forget about Rails Asset Pipeline.
2. Have a folder called "front-end", "fe" or "webpack"
3. Use foreman to start Rails server + webpack watcher
4. Ask webpack to build assets for us and put it directly in /public folder.
5. Generate JSON file with the hashes fingerprinting for Rails view to use. See assets-webpack-plugin
6. Do not commit the generated bundle from webpack! gitignore it also.

• Webpack module bundler
• Advanced Webpack