webpack-talk



webpack-talk

0 0


webpack-talk

A short introductory presentation about webpack

On Github AbilashK / webpack-talk

All about Webpack!
What is it anyway?
					// webpack.config.js
module.exports = {
	entry: './main.js',
  output: {
    filename: 'bundle.js'
  }
};
					
Webpack isA Module bundlerA Task runnerA Build system
What does it have?
					if (window.location.pathname === '/feed') {
  showLoadingState();
  require.ensure([], function() { // On demand load
    hideLoadingState();
    require('./feed').show();
  });
} else if (window.location.pathname === '/profile') {
  showLoadingState();
  require.ensure([], function() {
    hideLoadingState();
    require('./profile').show(); // Code splitting
  });
}
					
Webpack canHot reload modulesSplit codeLoad scripts on demand
But it doesn't end there...
// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    path: './build',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.css$/, loader: 'style-loader!css-loader' },
    // inline base64 URLs for <=8k images, direct URLs for the rest
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
    ]
  }
};
					
Webpack is extremelyModularSmart
LoadersTeach webpack what it does not know out of the boxLoad all the things!CSS, Images...
PluginsInjects into the build process
Feature FlagsEnable or disable parts of your app using global variables and environments
Handle common codeIdentify common code and load them as a separate bundle automatically
Async loadingLoad scripts only when they are needed with require.ensure()
May your bundles "Live long and prosper" /abilashk/abi1ity
All about Webpack!