Webpack is a module bundler and it takes custom files or npm installations and generates static assets.
It takes a fully dynamic applications or npm packages and turn them into static files that you can deploy to your server.
So If you're building a complex Front End application with many non-code static assets such as CSS, images, fonts, etc, then yes, Webpack will give you great benefits.
Why Webpack and NOT Grunt, Gulp etc...
Webpack puts your static assets (and source code) in a true dependency graph. Grunt and Gulp are only tools for working with files, and have no concept of a dependency graph.
What is dependency graph
Any time one file depends on another, webpack treats this as a dependency. This allows webpack to take non-code assets, such as images or web fonts, and also provide them as dependencies for your application.
When webpack processes your application, it starts from a list of modules defined on the command line or in its config file. Starting from these entry points, webpack recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles - often, just one - to be loaded by the browser.
Example
First of all we download webpack globally
Then we will go to our favorite code editor and we will create an index.html file, one directory with the name of dist and inside of It we will create a file with the name of bundle.js and one directory that will be called js with two files inside with the name of index.js and people.js. Also we will create a directory with the name src with a style.css file.
Then after we create a file with the name webpack.config.js we go to our cmd and we type npm init because we want npm to autogenerate the package.json file for us.
After that we type npm install css-loader --save and after that npm install style-loader --save
Loaders are transformations that are applied on a resource file of your app. For example, you can use loaders to tell webpack to load CoffeeScript or Typescript.
This is the final structure:
First of all we have to go to index.html and add this:
<script type="text/javascript" src="dist/bundle.js"></script>
and after we go to people.js and we add:
let people = [ {name: 'John Doe'}, {name: 'Steve Smith'}, {name: 'Carol Williams'} ]; module.exports = people; [/code]
We go to style.css file and we add this line: body{background:red;}
So now we can go to index.js and add the following code:
require('../css/style.css'); let people = require('./people.js'); console.log(people[0].name); [/code]
Compiling index.js
We are going to our command line again and we press the following command:
webpack index.js bundle.js
with the following output:
Now if we will go to our page (by default the webpack server is called in localhost:8080) and we open the console of the browser we will see the first name of people.js: John Doe.
Config File
There is another way to compile our files more automatic. We can go to the file that we created earlier(webpack.config.js)
and we will add the following code:
const webpack = require('webpack');
const config = {
entry: './src/js/index.js',
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
},
module:{
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
}
module.exports = config;
and on our package.json we add the following lines on "scripts" line:
"start": "webpack-dev-server --entry ./src/js/index.js --output-filename ./dist/bundle.js",
"build": "webpack"
Now if we will go to out command line and we will hit: npm install -g webpack-dev-server
npm will download a development server that provides live reloading.
So If we press npm start or cmd on our project's directory the output of the console will be like this :
Conclusion
I hope to find this mini tutorial usefull and if you want the full code then go here: https://github.com/frontdead/Webpack-Tutorial
Σχόλια
Δημοσίευση σχολίου