1. Write in front

From the basics of the blog in the first two chapters, we know that if you want to package and compile a project, you can run the NPX webpack command, and webpack will package and compile the project according to the configuration file webpack.config.js. But now we may encounter the following needs:

  • Instead of calling webpack.config.js, the webpack configuration file is called webpack.config.allen.js
  • Use the NPX webpack command every time you pack and compile. I don’t like this command, change it to yarn build for me
  • .

These may seem like unreasonable requirements, but they are really something we need to consider when building projects. With that said, this blog post is about how to meet both of these requirements.

2. Specify the WebPack configuration file

First let’s look at how to specify a webPack configuration file.

As mentioned earlier, to package and compile the project, we need to run the NPX webpack command, and webpack will be packaged and compiled according to the webpack.config.js file. The NPX webpack command can specify some parameters. For example, if we wanted to specify webpack configuration file as webpack.config.allen.js, we could do the following:

npx webpack --config webpack.config.allen.js
Copy the code

With the above instructions, we can use webpack.config.allen.js as the webPack configuration file to package and compile the project.

3. Customize script commands

Now let’s address the second requirement: how to package and compile the project using the YARN build command.

In a previous blog, I mentioned the usefulness of package.json files, one of which is to customize scripts and then run them using NPM run or yarn to execute the defined commands. Here we can use this method to package and compile custom scripts.

Creating a script is as simple as creating the scripts property in the package.json file. The property is an object, and you can create the script by adding a property key value pair to the object. To meet the second requirement above, you can configure it like this:

{
  "name": "webpack-learning"."version": "1.0.0"."main": "index.js"."license": "MIT"."scripts": {
    "build": "webpack --config webpack.config.allen.js"
  },
  "devDependencies": {
    "webpack": "^" 4.32.2."webpack-cli": "^ 3.3.2 rainfall distribution on 10-12"
  }

Copy the code

Now that the custom script has been created, you can use NPM run build or yarn build to execute webPack compilation commands.

4. Afterword.

This blog focuses on how to create custom scripts to help you manage your project. This blog only shows how to create scripts that are packaged and compiled by WebPack. Other scripts are very similar and will be covered in future blogs.

Come on, everybody!

Start a WebPack project

Install and configure the WebPack development server