Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Configure the URL loader

Reference images on the page

  • The installationnpm i url-loader file-loader -D
  • Open thewebpack.config.jsThe configuration file
{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader? Limit =91560'}// loader to process image paths // limit Specifies the size of the image, in bytes. If the referenced image is greater than the given limit value, it will not be converted to a Base64 string. If the image is less than or equal to the given limit value, it will be converted to a Base64 stringCopy the code

When the image is less than or equal to the given limit value:

When the image is greater than the given limit value :(the address is the hash value)

To save the original image name:

{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader? limit=91560&name=[name].[ext]'}Copy the code

The effect is as follows:

The image path is in the root directory, although we can’t see it in memory

Problem: If you place two images with the same name (one in two images folders), the second image overwrites the first, resulting in two identical images being displayed

Solution: Add a few more hash values to the image URL but keep the original name

{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader? limit=91559&name=[hash:8]-[name].[ext]'}Copy the code

Reference font ICONS on the page

  • referencebootstrap npm i bootstrap -S
  • inmain.jsThe introduction of
/ / introduction of the bootstrap import 'bootstrap/dist/CSS/bootstrap CSS'Copy the code
  • configurationwebpack.config.js
{test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'}
Copy the code

Note: You cannot write comments in the JSON file, and you should restart the terminal after each modification of the configuration file

Babel’s configuration

By default, webPack can only handle some of the new ES6 grammars. For more advanced ES6 or ES7 grammars, WebPack cannot handle Babel

For example, in main.js:

Class Person{static info = {name:' ZS ',age:12}} console.log(person.info);Copy the code
  • Two packages to install loader functionality related to Babel :(both packages!!)
    • npm i babel-core babel-loader babel-plugin-transform-runtime -D
    • npm i babel-preset-env babel-preset-stage-0 -D
  • Open webpack.config.js and add a new matching rule to the rules array under the Module node:
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
Copy the code

Note: When configuring Babel’s rules, you must exclude the node_modules directory for two reasons:

  1. If node_modules is not excluded, Babel will package all third-party JS files in node_modules, which can be very CPU intensive and slow to package

  2. Even if Babel eventually converts all js in node_modules, the project won’t work

  3. In the root directory of the project, create a new Babel configuration file for. Babelrc. This configuration file is in JSON format, so when writing

	{
		"presets":["env","stage-0"],
		"plugins":["transform-runtime"]
	}
Copy the code

An error message is displayed indicating that babel-loader@7 needs to be installed

NPM install @babel/ core@babel /preset-env -d

If an error persists, check the error message:

  • Couldn’t find preset “env” relative to directory

    Solution:npm install babel-preset-env --save-dev
  • Couldn’t find preset “stage-0” relative to directory

    Solution:npm i -D babel-preset-stage-0

Then run it again. The result is as follows