Front end world has an incredible evolution speed. Especially for the tooling, new kids jump out everyday. Webpack is one of them and seems it will dominate for a while. You may hear its complexity and how it is going to replace your current toolchain. Today, let’s bundle webpack like it bundle scripts for us xD
Roughly speaking, it is a tool for bundling your codes. You give it many files, it return you as one file. But it is much more than that, let’s continue.
There are several differences:
- It heavily relies on its configuration file. Not like gulp or grunt you need to code. Here you just need to fill in the blanks. But you can code as well.
- It has a built-in pipeline, so you don’t need to tell webpack the orders as you usually do in gulp.
- It contains all the common features you need and more. It even get a local server.
Yes and no, you need to know all the properties to use it well, but you can start using it just by introducing just a few properties. Let’s take a look at a what does this
webapck.config.js looks like.
Since you will dealing with the configuration file all the time when you need to interact with webpack. Let’s take a look at it first.
It feels… pretty easy, right? xD The next section will tell you how can these properties match with your work flow.
I will not go into every single properties in this section, I will show you just the very properties you need to up and running. And yes, this is not the actual procedure when the code is running, it is just a way to make sense of the configuration by mapping the running stage.
When webpack starts to executing, it will : (all the keywords below are the names of the properties)
entry, to see which file or files to start.
module.loaderto understand the relations between file extension and loader. For instance, if you declare to load css, which loader should it use.
pluginsto see if there are more functionalities you want to extend to.
outputto see the where does it need to put the final bundle file.
- Start to bundle.
Let’s look at the above sample again, does it make more sense now?
It is easy, just add a property
Yes, it can. I have worked with a project which I import lots of modules. Some modules imported in the entry file, some of them imported in another file. Webpack can bundle all of them. You don’t need to worry it.
Now I strongly suggest to check the official site for more detail, because now you have a clear picture on how the configuration file works, you can understand the documents as well. And they are all well written.
Furthermore, There are two ways to go: