1. Write at the front
Now we are ready to learn about Webpack. Webpack helps us package and compile projects, so before we start, we need to initialize a WebPack-based project.
In this blog, the following topics will be covered:
- Initialize a WebPack-based project
- Experience webPack’s default packaging Settings
- Customize the packaging configuration file for WebPack
2. Initialize a WebPack-based project
This step is simple, we can use NPM or YARN package management tools to help us quickly initialize a project, I believe many front-end practitioners are familiar with both tools. So here’s a closer look at both tools.
I am used to yarn, so I can create a new folder and initialize a project by running the yarn init command on the terminal. This step may ask you to enter some basic information about the project, as follows:
Question name (test): question version (1.0.0): question description: question entry point (index.js): question repository url: question author: question license (MIT): question private:Copy the codeYou can type it as you want, or press Enter, which will initialize the project using the default options.
After initialization, a package.json file will be generated in this folder, which records the basic information of the project, as well as any third-party packages we install later. In a later project, we can also define some scripts to help us manage the project, which will be covered in a later blog post.
Once the project is initialized, we need to install two packages, WebPack and webPack-CLI, which are used to package and compile the project. The installation procedure is simple. Run the following yarn command on the TERMINAL:
yarn add webpack webpack-cli -D
Copy the codeNote: the -d option in the above command indicates that these two packages are development dependencies and are not required for project launch.
With these two packages installed, the WebPack-based project is ready to move on.
3. Feel the default packaging Settings for WebPack
Once the project is created, we can use it without configuring WebPack, because WebPack has its own default configuration. Let’s take a look at its default configuration.
Create a SRC directory in the project directory to hold the project code. Create an index.js file in this directory. Note that this must be the name, which is required by the default webPack configuration. In this file, we use node syntax to import another file named.js as follows:
let myName = require("./name.js")
console.log(myName);
Copy the codeThe code in the name.js file is as follows:
module.exports = "Allen Feng"
Copy the codeThe node.js syntax used above will not render successfully if you use a browser to render directly. At this time, we can use Webpack to package and compile, directly run the command NPX webpack in the terminal, and wait for a while to package successfully.
After the package is complete, if you look in the project directory, you can see that there is an extra folder dist. Click there and you can see the packaged file main.js. If you create an HTML file in the dist folder at this point, import the main.js file with the script tag and see Allen Feng printed out in the browser console.
This is what you get packaged with webPack’s default configuration. To summarize, in webPack’s default configuration:
- The SRC directory must have the index.js file, which is the entry file specified in the default configuration
- After WebPack is packaged and compiled, the final code is placed in the dist folder. If not, the folder is created
- The default packaging mode for WebPack is production mode, which means that the packaged and compiled code is compressed.
4. Customize the packaging configuration file for WebPack
Above we have packaged and compiled the project using the default configuration of WebPack, but we may encounter a requirement like this:
- I don’t want webpack to start packing from the index.js file, but from the app.js file
- The packaged and compiled code is not placed in the dist directory, but in another directory
- Package compiled code and do not compress it
- .
At this point, we can customize the webPack configuration to achieve the desired effect. The procedure is simple: create a new webpack.config.js file in the project’s home directory (the same level as package.json), which is the webPack configuration file. In this file, you can configure WebPack by writing the following code:
let path = require("path");
module.exports = {
mode: "development".entry: "./src/index.js".output: {
filename: "index.js".path: path.resolve(__dirname, "dist")}}Copy the codeAs shown in the code, we can specify the webPack packaging mode, packaged entry files, packaged exit files, and so on in the configuration file. The following describes the three configuration options:
1) mode: configuration mode of Webpack
Webpack has two configuration modes: Production and Development. The default is production mode, where packaged and compiled code is compressed to save volume.
If you choose development mode, the final file will not be compressed and the size of the file will be slightly larger.
2) Entry: entry file for webpack
For webPack to be packaged and compiled, there must be a specified entry file, which can be specified through this property. The default entry file is the index.js file. If you want to change it to another file, modify this property. Note that this property can be specified using a relative path.
3) Output: Export file of Webpack
This property specifies where the compiled code is packed by WebPack. When configuring this property, specify the name and path of the export file. The default path is the index.js file in the dist folder. To change the path and file name to another one, modify this attribute. Note that the exit file path configuration uses an absolute path, as I wrote above.
5. Afterword.
Now that we have covered the configuration of webPack’s three basic options, we can configure them according to our own needs. Additional option configurations are described later. Come on, everybody!