Webpack

module.exports = {
entry: './app.js',
output: {
filename: 'bundle.js'
}
};

Webpack vs Gulp (using Example)

'use strict';

var Gulp = require('Gulp');
var sass = require('Gulp-sass');

Gulp.task('sass', function () {
return Gulp.src('./sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(Gulp.dest('./css'));
});

Gulp.task('sass:watch', function () {
Gulp.watch('./sass/**/*.scss', ['sass']);
});
const ExtractTextPlugin = require('extract-text-Webpack-plugin');const extractSass = new ExtractTextPlugin({
filename: "[name].[contenthash].css",
disable: process.env.NODE_ENV === "development"
});
module.exports = {

module: {
rules: [{
test: /\.scss$/,
use: extractSass.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}],
// use style-loader in development
fallback: "style-loader"
})
}]
},
plugins: [
extractSass
]
};

Bundling

Code-Splitting

Entry Points

webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- /src
|- index.js
+ |- another-module.js
|- /node_modules
import _ from 'lodash';console.log(
_.join(['Another', 'module', 'loaded!'], ' ')
);
const path = require('path');module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
+ another: './src/another-module.js',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
...
Asset Size Chunks Chunk Names
another.bundle.js 550 KiB another [emitted] another
index.bundle.js 550 KiB index [emitted] index
Entrypoint index = index.bundle.js
Entrypoint another = another.bundle.js
...

Dynamic Imports

source: https://lecstor.com/code-tree-webpack/

import loadable from '@loadable/component';const Page1 = loadable(() => import('./page1'));
const Page2 = loadable(() => import('./page2'));
const Page3 = loadable(() => import('./page3'));
...export default App;
dist/
├── [161K] main.bundle.js
├── [ 441] pages-page1.bundle.js
├── [ 441] pages-page2.bundle.js
└── [ 304] pages-page3.bundle.js

Why Are Developers Using Webpack Instead of Gulp?

◉ Code Splitting in React using create-react-app

🔘 import()

import { add } from './math';console.log(add(16, 26));
import("./math").then(math => {
console.log(math.add(16, 26));
});

🔘 React.lazy

import OtherComponent from './OtherComponent';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
import React, { Suspense } from 'react';const OtherComponent = React.lazy(() => import('./OtherComponent'));function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
</div>
);
}
import React, { Suspense } from 'react';const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<section>
<OtherComponent />
<AnotherComponent />
</section>
</Suspense>
</div>
);
}

🔘 Error boundaries

import React, { Suspense } from 'react';
import MyErrorBoundary from './MyErrorBoundary';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
const MyComponent = () => (
<div>
<MyErrorBoundary>
<Suspense fallback={<div>Loading...</div>}>
<section>
<OtherComponent />
<AnotherComponent />
</section>
</Suspense>
</MyErrorBoundary>
</div>
);

🔘 Route-based code splitting

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));
const App = () => (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
</Switch>
</Suspense>
</Router>
);

🔘 Named Exports

// ManyComponents.js
export const MyComponent = /* ... */;
export const MyUnusedComponent = /* ... */;
// MyComponent.js
export { MyComponent as default } from "./ManyComponents.js";
// MyApp.js
import React, { lazy } from 'react';
const MyComponent = lazy(() => import("./MyComponent.js"));

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.