The phrase “New Year, New Skills” is not just another buzzword, it is a critical aspect for every professional, also for me. I have already create a list of skills that I will try to gain into 2018 and I wish to achieve my target. I wish the same for you, too.
Firstly in my list is no other than Webpack 2. It is true that I’ve been avoided it for long enough, as I had been using Gulp in my daily workflow. Therefore, I found out it could do the same things as Gulp does. Even though Webpack can do almost the same things as Gulp does, the main difference is that Webpack can bundle javascript assets into a single, deliverable file. However, since its release it has been evolved into a manager of all front-end code. As a consequence, Webpack give me the ability to make the build process easier by passing dependencies through Javascript.
My Basic Webpack Workflow
Open up a terminal/command prompt, cd into the ‘webpack-starter’ directory and run
$npm init –y
The `-y` answers yes to all the questions npm asks during setup. This creates a `package.json` file in the root directory.
Now install ‘webpack’ and ‘webpack-dev-server’
$npm i -D webpack webpack-dev-server
‘webpack-dev-server’ is similar to ‘gulp-webserver’ in the sense that it creates a server to test on. Open the package.json file and add a new line in the scripts section to run the ‘webpack-dev-server’;
"scripts": {
"test":"echo \"Error: no test specified\" && exit 1",
"build": "webpack-dev-server",
"build:prod": "webpack -p"
}
This allow you to start the server by typing ‘npm run build’ in the terminal. If you work with different teams and across projects, maybe there are different webpack versions installed. Adding the –p flag and typing ‘npm run build:prod’ set the local version of webpack in production mode and run uglifies/minifies scripts.
Once you have webpack installed, you’ll need to create at the root folder a webpack configuration file,named webpack.config.js, as following:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
entry: ["./src/js/index.js"],
output: {
filename: "js/index.js",
path: path.join(__dirname, "dist")
},
module: {
rules: [
{
test:/\.html$/,
use:['html-loader']
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
The most important points of the Webpack configuration file are:
entry: it’s our main Javascript file where all of the application’s code gets imported
output: it’s the resulting Javascript file, bundled by Webpack
module and rules: it’s the place where you configure the loaders
plugins: it’s the place where you configure which plugins Webpack will use
A list of most-common loaders and plugins is the following:
| Loaders | Plugins |
|---|---|
| babel-loader | HtmlWebpackPlugin |
| style-loader | ExtractTextPlugin |
| css-loader | CleanWebpackPlugin |
| sass-loader | |
| html-loader | |
| file-loader |
To get started, my personal Github repo for this article is webpack-starter.
I hope that all the aforementioned are a helpful starting point to those who are hesitant to move away from Gulp and try Webpack. It true that it can take a little time to understand how to use webpack’s configuration, loaders and plugins but learning how it works you make the development process rapid and easy.
Finally, for further reading you can check the following resources:
Thanks for reading!!!
Continue reading >>
