This tutorial is for webpack beginners. This is also some notes I put together for newbies as I learn webpack myself.
I. What is webpack?
- CSS import
- Images url
- Es module
webpack bundles all modules together and makes them run.
II. Important concepts
Let’s first highlight a few of the relatively important and most commonly used things.
The entry point is where webpack starts its work, a js file. webpack collects other module files through imports in this file, collects other dependencies through import statements in other module files, and finally packages all the module files together to form a single runnable code. The default entry file is
The output is the file that is formed after webpack has been packaged through the build process. The default output folder is the
dist/ folder in the root directory.
loaders are some third-party extension packages that help webpack handle loading various types of files. For example, there are loaders for handling css and image files. webpack itself does not support css files without loaders.
plugins are also third-party plugins that change the way webpack works, for example some plugins can set webpack’s environment variables.
There are two ways webpack works: development (development mode) and production (production mode). The main difference is that in production mode, the resulting bundle (file) is smaller and stripped of extraneous comments, spaces, etc. at runtime. This speeds up the loading of code by the user.
1. Initializing the project
Now, let’s understand the working process of webpack step by step by doing. First create a new directory and initialize the project with
npm init -y.
Open the package.json you just created and add the following content.
and install the following dependencies.
Then execute the start command you just added.
There is an error running. When we execute the start command webpack gives us an error: Module not found: Error: Can’t reolve ‘. /src’ . Don’t be afraid, remember what we mentioned before about importer file, the reason for this error is that the importer file was not found. All we need to do is add the entry file. Create the src folder and add the index.js file to the src folder with the following input.
Then execute the start command again, you can see that webpack runs normally and generates a dist folder, the dist file is the output file of webpack, the location of the entry file and the output file can be changed by configuration. Because our start command does not specify the mode of webpack, webpack will run in production mode. We modify the start command to change the mode to development by modifying the start command in package.json.
Run the start command again and webpack will run in development mode.
2. webpack configuration file, specifying input and output
As mentioned earlier, we can change the configuration of webpack. In order to configure webpack, we need to create a webpack.config.js file in the root directory. This is a js file, so we can write any runnable js code in it. First change the entry and exit files.
The entry field can be used to modify the entry file, the above code changes the webpack entry file to
src/main.js. The output field can be used to modify the output file location, we will change the output file directory to
build/. Rename the
index.js file in the src directory to
main.js and run the start command to see the webpack output directory build.
3. Adding html pages
In order to embed webpack packaged files into html documents with script tags, we need to use a third-party plugins extension: html-webpack-plugin. The plugin is a third-party extension that changes the way webpack works, as described above. What html-webpack-plugin does is to change the way webpack works, so that webpack can add packaged js files to the
<script> tags of html pages, so that when we open the html, we can run our js scripts. First, install the plugin.
Then, change the webpack.config.js file.
The above code instructs webpack to load
public/index.html, so create the public directory and add the index.html file with the following content.
yarn start and see the results. At this point, an index.html file will appear in our
build directory with the following contents.
Compared to the original html file, a
<script> tag has been added, and the content of the tag is the webpack packaged js file.
So, we can know what html-webpack-plugin does.
- load the html file.
- Add the webpack-packaged js file to the html file via the script tag.
4. Start local service by webpack
As a developer, you will definitely use local services. webpack provides development server, which can easily start a local service for developers to do development work. First we need to install the webpack-dev-server package.
Careful friends have noticed that I add
--dev field when installing these ku, indicating that these packages are only used in development mode to facilitate development work, and do not work in production environment. After installing this package, it is possible to use it directly, first we change the command in
package.json as follows.
After the change, the package command is changed to
buildDev and the start local server command is
yarn start. This will start a local service on local port 8080. Open
http://localhost:8080, which will display the index.html page.
5. Loading css
In order to load css, we need to use webpack loaders . webpack loaders are designed to handle a wide variety of modules and files. In order to load css files, we need to install at least two loaders as follows:
- css-loader : allows us to import css files using import statements.
- style-loader : inserts css styles into html dom.
To configure webpack.config.js, we need to add the module field and add rules, module means the plugin deals with various module files (ts, css, less, etc.) and rules corresponds to different file types using different loaders.
To test if the loaders work, we add the
style.css file to the src directory.
main.js file and import
Start the webpack server service, open
localhost:8080 and you can see that our word turns green, indicating that the css file was successfully loaded.
Note: The order of loaders is important. webpack loads loaders in right-to-left order, so the following loaders configuration is invalid.
Because style-loader is responsible for inserting styles into html, the program always executes the js code first, so the first thing executed is the import of css, so the order is wrong.
Similarly, we can add SASS files, just add sass-loader, and leave this for you to try later.
6. Load es modules
The most important feature of webpack is loading es modules. By now you should know that to load es modules, we should also need to add the corresponding loaders, but in fact webpack already comes with the function to load es modules. We can use it directly. Create a new
src/component.js file and write the following code.
Start the service and open the browser console with the following output, indicating that the webpack es modules are loading properly.
7. Production mode
As mentioned earlier webpack has two modes: development and production. We can specify the way webpack is packaged by modifying the scripts field in package.json.
Execute the build command and the packaged file will remove redundant comments and spaces for deployment to the production environment.
This tutorial, with not much content, can be learned in about an hour, and is intended to introduce some basic concepts of webpack. webpack has more content, so you can check official documentation and Baidu for problems, and slowly get familiar with and learn it in practice.