How to configure

When we packed above, the packing order waswebpack main.js .. /dist/bundle.js, we have to set up the entrance and exit of packing every time, it is very troublesome. Is there anything I can do to set exits and entrances so I don’t have to do it every time? Of course you can. Add this file to your project. The file name is fixed: webpack.config.js. This file is the webPack configuration file.Then you can set the Settings in this file. Here is the code for setting the entry/exit:

const path = require("path"); Module.exports ={//CommonJS template entry:"./ SRC /main.js", output:{path:path.resolve(__dirname,"dist"), filename:"bundle.js" } }Copy the code

First of all, WebPack itself needs to be supported by the Node environment, and our Node also supports the CommonJS specification, so when configuring WebPack, we use the CommonJS specification for import and export. Here we export an object with two properties:

  • This is the relative path
  • The output output corresponds to an object whose first property is path, which is required to be an absolute path, and whose second property is filename

Get absolute path

So the question is, how do we get our absolute path? The Node environment has a global variable __dirname, which dynamically retrieves the global path to our current file. Finally, we need to concatenate, because after we get the global path we are in the parent of the configuration file webpack.config.js, and we should go to the parent’s subfolder dist. So we have to splice dist.

Path joining together

Path concatenation uses the resolve method in the PATH module. First we need to import the path module. The Path module is a built-in module of Node. Just like the built-in functions of JS. So do not need to download direct import can be used. Path.resolve (__dirname,”dist”)

Partial installation of webpack

If our project relies on node packages that we know are managed by the NPM tool, we need to initialize the NPM tool first

Initialize the NPM

Initialization command: NPM init, which generates a file, package.json, that NPM manages the Node package in our project. If we need packages in our project, we should execute the command: NPM install bundleName. At this point, the pack.json file is updated, which tells us which packages are installed in our project, divided into development-time dependencies and run-time dependencies based on the commands at install time.

Development-time and run-time dependencies

Development-time dependencies are what I’m going to use when I’m developing a project, and run-time dependencies are what I’m going to rely on when my project goes live and I’m going to run the project. Take webpack for example, it is a packaging tool, package our source code and put it in the dist folder, its mission is completed, after the project online, put the dist folder on the server, run the project, there is no packaging involved. So it’s a development-time dependency. Take another example, vue. We will of course use vUE when we run our project again, so it is a runtime dependency.

How does NPM distinguish between development-time dependencies and run-time dependencies when downloading these packages?

Of course we told it ourselves. Let’s add--save-devIf you open package.json, the package should be placed in devDependenciesAll development-time dependencies will be placed in this location.

To sort out your thoughts:

  • We will use NPM to install webpack locally. So NPM should be initialized,npm initGet the package. The json
  • Local installationNPM install [email protected] - save - dev, get a folder, node_modules, and a file, package-lock.json
  1. Node_modules is the file that holds the packages we depend on for Node. We can find the Webpack package we installed in it

2. Package-lock. json shows the actual version of the dependencies we installed. Why distinguish between actual versions? If you look closely at the image above, there is one in front of the webpack version^, the actual version may not be 3.6.0, but 3.6.0 or later. The exact version is not determined, but the actual version will be determined after you have installed it. So another package-lock.json is generated.

Meaning of webPack local Installation (global vs. local difference)

Why did we install WebPack globally and then install webPack locally? This is because the project itself is based on a version of WebPack. Problems can arise if you use newer or older versions of packaging. So projects usually come with a specific version of WebPack, which is a partial installation of Webpack. Projects are usually packaged with their own local Webpack rather than the global webpack.

How do I package with a local Webpack

Notice if we type in terminalwebpackAlways use the global WebpackSo how do we use the local Webpack?

Start the WebPack package from our locally installed Webpack. Node_modules /.bin/webpack starts webpack packing

  • Package. json scripts can be configured in scripts in package.json, which is a way to alias them.

So here, for example, if I execute,npm run testThis is equivalent to executing the following code, so we can do exactly this: To configure another alias, I enter it in terminalnpm run aaa, will be executedwebpackCommand. But unlike typing webpack directly into the terminal, scripts webpack uses the local webpack by default and then goes to the global webpack