Please enable JavaScript.
Coggle requires JavaScript to display documents.
Webpack (Support for ES6 (If using ES6 => need to convert to vanilla…
Overview
-
-
-
Alternatives to Webpack
-
-
-
-
Webpack V Gulp
Gulp is not a module bundler it is a task runner
- Gulp and Webpack can be used together
- Don't really need Gulp as you can do it in Webpack unless some unit tests and linting
Webpack V Browserify
- Webpack is a faster bundler (40% quicker)
- When it comes to delivering optimized final bundle Browserify can be 40% smaller than similar Webpack bundle
Loaders
Why we need loaders
Webpack its can only understand .js files - therefore we need a way to transform things like images and CSS into Javascript modules => Loaders
Webpack doesn't come with any pre-configured loaders => you have to install the ones you need for your project (best way as there are so many)
Chaining
Loaders can be chained together
- this allows you to convert SCSS files to CSS before converting CSS to Javascript
- Can also create your own loaders - but there are loads so probably don't need to
How to
-
Load CSS
-
Add to Config
module.exports = {
...
module:{
loaders:[
{
test:/.css$/,
exclude: /node_modules/,
loader: "style!css"
}
],
}
Config File
2 important principles
Everything can be a module - including JS files, CSS, images and HTML
- As a result any artefact may be divided into small manageable chunks for resuse
Webpack only needs what you need - when you need it (Others combine all modules to generate a single. large bundle.js) These bundle.js can be huge (15MB)
- Webpack generates several smaller bundle files which allow it to load parts of an app asynchronously
Basic example
-
With these 2 files created you can run the following command in console: webpack ./entryjs bundle.js
- Webpack will create a
bundle.js file and use the entry file to create it
Defining A Config File
-
A config file is a common.js module where you can store all of the vital information about your build
Create
Create a config file: webpack.config.js and insert the following:
module.exports = {
entry: "./entry.js",
output: {
filename: "bundle.js"
}
}
2 Principles
Entry Point
Entry point is the name of the top level file or array of files that you need for your build => entry.js
-
Once setup config file => in console (and in root of project) type: webpack - this command looks for webpack.config.js and runs it
Watching for changes
-
-
Methods
-
Configure Watch Mode which monitors the project directory whenever the webpack command is run
- Add
watch: true to the object
Plugins
Difference from Loaders
Loaders are not the same as plugins
- Loaders operate at the individual file level during or before bundle generation
- Plugins operate at the "chunk" level at the end of the process.
Useful Loaders
-
extract-text-webpack-plugin => Gathers all CSS into a single location and then extracts it into a external styles.css file
-
Support for ES6
-
-
Webpack 1 requires the following to be installed:
npm install --save-dev babel-loader babel-core babel-preset-es2015
Webpack 1 requires this to be added to config:
module.exports = {
module: {
loaders: [
{
test: /.js$/,
exclude: /node_modules/,
loader: "babel",
query:{
presets: ["es2015"]
}
}
],
}
};
The module loader is an array that searches for specified files to run through a loader.
- In the example config => telling Webpack to look for files outside of the
node_modules directory and end in .js and then run them through the babel loader - which will use the es2015 preset
Dev Server
Webpack can create a handy dev server so that you can review your code.
- The server automatically recognises changes and updates the browser whenever the bundle is compiled
-
Optimising Output
-
To minify bundles you can execute this command:
Minification gets rid of unnecessary characters in your source code to make things run more efficiently