Пора заводить Webpack 2

Пора заводить Webpack 2!

Ефремов Алексей

Webpack is a module bundler for modern JavaScript applications

https://webpack.js.org

4 главные концепции webpack

1. Entry
2. Output
3. Loaders
4. Plugins

Entry

		
		module.exports = {
		  entry: './path/to/my/entry/file.js'
		};
		
	

Output

		
		const path = require('path');
		module.exports = {
		  entry: './path/to/my/entry/file.js',
		  output: {
		    path: path.resolve(__dirname, 'dist'),
		    filename: 'my-first-webpack.bundle.js'
		  }
		};
		
		

Loaders

		
		const path = require('path');
		module.exports = {
		  entry: './path/to/my/entry/file.js',
		  output: {
		    path: path.resolve(__dirname, 'dist'),
		    filename: 'my-first-webpack.bundle.js'
		  },
		  module: {
		    rules: [
				{test: /\.css$/, use: ['style-loader', 'css-loader']}
		    ]
		  }
		};
		
		

Plugins

				
		const webpack = require('webpack'); //to access built-in plugins
		const path = require('path');
		module.exports = {
		  entry: './path/to/my/entry/file.js',
		  output: {
		    path: path.resolve(__dirname, 'dist'),
		    filename: 'my-first-webpack.bundle.js'
		  },
		  module: {
		    rules: [
		      { test: /\.css$/, use: ['style-loader', 'css-loader'] }
		    ]
		  },
		  plugins: [
		    new webpack.optimize.UglifyJsPlugin()		    
		  ]
		};
		
		

Модульность в webpack

Commonjs

			
			var commonjs = require('./_commonjs');

			//_common.js
			module.exports = "Hello Common JS";
		

Amd

			
			var amd = require('./_amd');

			//_amd.js
			define([], function() {
				return "Hello AMD";
			});
		

ES6 modules

			
			import es6 from './_es6';

			//_es6.js
			export default "Hello ES6-modules";
		

require.ensure

			
			var ensurePromise = new Promise(function(resolve) { 
				require.ensure(['./_ensure'], function(require) {
					var data = require('./_ensure');
					resolve(data);
				});
			});

			//_ensure.js
			module.exports = 'Ensure syntax';
		

Async import

			
			const importStatic = import('./_import');

			//_import.js
			export default "Import syntax";
		

require.context

			
			var context = require.context('./', false, /(import|ensure)\.js$/);

			context.keys().forEach(function(key){
				context(key);
			});
		

Dynamic import

			
			const moduleName = '_import';
			const dynamicImport = import('./' + moduleName);
		

1. Поддержка es6 из коробки
2. Tree shaking
3. Улучшенный config `module.loaders` => `module.rules` и т.д.
4. https://webpack.js.org/guides/migrating/