Learn webpack by sample, each of the samples contains a readme.md file that indicates the purpose of the sample plus an step by step guide to reproduce it.
Learn webpack by sample, each of the samples contains a readme.md
file that
indicates the purpose of the sample plus an step by step guide to reproduce it.
The Lemoncode Frontend Master Students are working on a review process, if you want to cooperate in this process or add more useful samples don't hesitate to contact us, fork the project and asking for PR once ready.
In this sample we are going to setup a web project that can be easily managed by webpack.
We will setup an initial npm project, give support to ES6, and install webpack.
We will create a hellword.js
sample.
Summary steps:
package.json
(npm init)In this sample we are going to start working with ES6 modules (import).
We will start from sample 00 Intro/00 Boilerplate and add a new JavaScript service that will hold a simple algorithm to calculate the average of an score array.
We will use this JavaScript array into the main students.js
file by importing
it.
Summary steps:
averageService.js
students.js
students.js
students.js
code.index.html
In this sample we are going to enter into "dev mode". Working with files service
is not ideal when you are developing a web application, we will learn how to launch
a lite web server, how deploy our bundle into a dist folder (including index.html
)
, how to debug our es6 code directly into the browser debugger and minify
our bundle.js
.
We will start from sample 00 Intro/01 Import, install webpack-dev-server
, setup our config
to deploy on config folder and support maps (debug), then we will minify
our bundle.js
file via webpack cli params.
Summary steps:
package.json
.In this sample we are going to setup a dist folder where the webpack bundle and main HTML page will be copied to.
We will start from sample 00 Intro/02 Server,
Summary steps:
bundle.js
) to "dist" folder.index.html
file to "dist" folderbundle.js
script into the index.html
file.bundle.js
.So far we have made good progress on our journey... but we are lacking one of the basic pillars of web development, consuming third party libraries.
In this demo we will install a legacy library (jquery) via npm, define it as global, and use it. Finally we will end up creating a separate bundle for libraries.
We will start from sample 00 Intro/03 Output.
Summary steps:
app.js
and vendor.js
.Let's get started working with styles.
In this demo will create a custom CSS file (it will contain a simple css class that will setup a background color to red).
We will start from sample 00 Intro/04 JQuery.
Summary steps:
In this demo we will install and configure webpack to import the well known Bootstrap CSS library.
We will start from sample 01 Styles / 01 Custom CSS.
Summary steps:
In this demo we rename our css file to scss extension and add a simple SASS variable. We will learn how to add a loader that can make the SASS preprocess and then chain it to our css / style pipe.
We will start from sample 01 Styles/02 Import Bootstrap.
Summary steps:
mystyles.css
to scss.webpack.config.js
).In this demo we are going to include images in our project in two flavours: via JavaScript and via HTML. On the JavaScript side we will see it's something straightforward (using the same plugins we used for fonts), for the HTML we will use a new loader: html-loader.
We will start from sample 01 Styles/03 SASS.
Summary steps:
In this demo we will install and configure webpack to import the Google framework Materialize.
We will start from sample 01 Styles / 01 Custom CSS.
Summary steps:
In this demo we will add support for TypeScript.
We will start from sample 01 Styles/03 SASS, install TypeScript locally, configure a tsconfig file, add some ts like, install awesome-typescript-loader and apply it to webpackconfig.
Summary steps:
webpack.config.js
In this demo we will add support for React.
We will start from sample 01 Styles / 03 SASS, install React locally, update students.js
to students.jsx
and include some basic rendering.
Summary steps:
students.js
to students.jsx
and update its content accordingly.jsx
extensions and point out that the entry point has changed.webpack.config.js
to support jsx
.In this sample we are going to create a simple Angular 1.x sample (es6 based).
We will start from sample 01 Styles/03 SASS.
Summary steps:
In this sample we are going to setup a basic Angular 2 app with Webpack.
We will start from sample 02 Fx/00 TypeScript.
Summary steps:
In this sample we are going to introduce Linting. This is a technique which you can analyse code for potential errors, so that can help you to make less mistakes.
We will start from sample 01 Styles/03 SASS.
Summary steps:
In this demo we are going to isolate different scss files using same css class names. We will learn how to configure it and how to deal with external css class provided by third libraries like Bootstrap.
We will start from sample 02 Fx/01 React.
Summary steps:
webpack.config.js
with CSS Modules config.In this demo we are going to configure Hot Module Replacement. This feature is great for productivity in development environment, allowing us to update the app code without having to redeploy the whole files or refresh our browser to get the changes updated.
We will start from sample 03 Environments/02 CSS Modules.
Summary steps:
webpack.config.js
with HMR config.react-hot-loader
.student.jsx
file.index.jsx
file.In this demo we are going to create different builds for each environment. We will learn how to configure it and how to reduce bundle file sizes.
We will start from sample 03 Environments/03 HMR.
Summary steps:
On of the most interest features that ships Webpack 2 and it has Webpack 3 too, is Tree Shaking: this allows to remove from a destination bundle the exports that are not in use by the project, reducing dramatically the site of our bundle.
We will start from sample 01 Styles/03 SASS and we are going to create a simple sample in ES6:
A calculator module where we create an export per basic operation (sum, substract, mul, div..).
A main.js
file that will import this calculator module and use only sum operation.
We will use webpack's 2 tree shaking and check that we end up having a bundle that doesn't contain the code for substract, mul, and div
On of the most interest features that ships Webpack 2 and it has Webpack 3 too, is Tree Shaking: this allows to remove from a destination bundle the exports that are not in use by the project, reducing dramatically the site of our bundle.
We will start from sample 02 Fx/00 TypeScript and we are going to create a simple sample in TypeScript:
A calculator module where we create an export per basic operation (sum, substract, mul, div..).
A main.js
file that will import this calculator module and use only sum operation.
We will use webpack's 2 tree shaking and check that we end up having a bundle that doesn't contain the code for substract, mul, and div
In this demo we are going to play with the build time speed with Webpack and TypeScript. For that, we are going to configure awesome-typescript-loader
options.
We will start from sample 04 Performance/02 Tree shaking TypeScript.
Summary steps:
useCache
flag.In this demo we are going to play with the build time speed installing autodll-webpack-plugin
.
We will start from sample 04 Performance/03 Reduce TypeScript build time.
Summary steps:
autodll-webpack-plugin
.In this demo we will learn how to split our application in different bundles and how does Webpack manage to do so with the CommonsChunkPlugin. We will also learn some tips and tricks.
We will start from sample 02 Fx/00 TypeScript.
Summary steps:
In this demo, we will see how can we do a basic usage of environment variables to enable the production mode of Angular
We will start from sample 02 Fx/03 Angular 2.
Summary steps:
This demo shows how to have alternative API_URL for development and production
Starts from sample 03 Environments/04 Production Configuration.
Summary steps:
Do you want to create a library? This example is for you.
We will start from scratch in here
Summary steps:
Here we try our new shiny library
We start from sample 02 Fx/00 TypeScript.
Summary steps:
We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.
Basefactor, consultancy by Lemoncode provides consultancy and coaching services.
Lemoncode provides training services.
For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend