Front-end Basics Notes - WebPack (1)

【 Webpack video 】

【 4.23 】

Webpack introduction and configuration

1, NRM installation, only provides a few domestic mirror address, when using NPM installation package is slow (visit a foreign server), switch the NRM mirror address, and then use the NPM command line installation.

Note ⚠️, this does not mean that NRM is installed and can be installed using the CNPM command by switching to the CNPM image, because NPM I CNPM -g is not executed to install the CNPM command globally.

2. What is Webpack

Is built based on Node.

Front-end automation build tool, can realize resource merge, packaging, compression, obfuscation and so on.

Gulp is good for small builds; Webpack is suitable for building the entire project.

3. Install WebPack

The first type of global installation, which is installed on the computer system, as long as the computer system does not break down, can always be used. The second is to install only for projects.

4. Install JQ in the project

Install using NPM.

NPM init -y displays package.json

NPM I jquery -s node_modules

It is not recommended to refer directly to static resources such as packages or CSS files in the HEAD of HTML, which can cause secondary requests and slow execution.

5. Configuration file webpack.config.js

In the project root directory.

If you do not want to manually specify the path of the packaged file, you can specify the entry [path of the packaged file] and the exit [packaged file path] in the configuration file.

Plugin configuration and use of Webpack

1, dev webpack – – server

You want to listen for JS changes and automatically compile without the developer having to manually execute the webpack command.

Third, the solution is to customize the command in the package.json file scripts and then run NPM run dev on the terminal to run the project.

If NPM run dev shows the following error, delete the node_modules folder and reinstall the dependencies

4. You can’t run webpack-dev-server if you install webpack globally. You must install webpack-dev locally. NPM I webpack -d.

Change figure 1 to Figure 2, import the bundle file in memory, do not need to run the command, change the JS code just save the file, the page will be updated automatically. There is no need to refresh the page.

FIG. 1

Figure 2

2. After modifying package.json, restart the server NPM run dev.

3. Set dev-server parameters

Method 1: Modify the command in package.json

— Open: automatically opens the browser

–port 3000: automatically runs port 3000

ContentBase SRC: automatically hosted directory SRC

–hot: hot reloading [The style modification enables browser reloading without refreshing, reducing unnecessary requests, without generating a new bundle.js every time]

Method 2:

4, HTML-webpack-plugin plugin, HTML in memory

NPM I html-webpack-plugin-d, a plug-in installed in memory to generate HTML pages
Import the plug-in in webpack.config.js and configure it in plugins.
When using the HTmL-webpack-plugin, we no longer need to handle bundle.js references manually because the plugin automatically creates an appropriate script and references the correct path