1. Image processing

(1) Install the Loader

Download and install file-loader

npm install –save-dev file-loader

(2) Configure the Config file

{

test:/\.(png|jpg|gif|jpeg)$/,
use:[{
loader:’file-loader’,
options:{
name:'[name]liang.[ext]’,
outputPath:’/imgs’
}
}]
},

(3) Option configuration

Configuration options:

Name: Configures custom file name templates for your files (default [hash].[ext])

Context: The context in which the custom file is configured. The default is webpack.config.js

PublicPath: Configure a custom public publishing directory for your files

OutputPath: Configures a custom output directory for your files

[ext] : resource extension

[name] : indicates the basic name of the resource

[path] : indicates the path of the resource relative to context

[hash] : Hash value of the content



2. Font file processing

(1) Download font files

Take the bootstrap font file as an example

Boostrap font file download address: v3.bootcss.com/getting-sta…

(2) Bootstrap. CSS is introduced in index.js and bootstrap font icon is used in HTML

(3) Configure the Config file



3. Third-party JS library processing

Take the jquery library as an example

(1) Local import

Writing configuration files:

The webpack.ProvidePlugin parameter is in the form of key-value pairs. The key is the name of the variable used in our project, and the value is the library to which the key points. The webpack.ProvidePlugin first looks for libraries that match the NPM installation package.

If Webpack has the resolve.alias option configured, the webpack.ProvidePlugin will follow the set path

You need to import WebPack before using webpack.ProvidePlugin



(2) NPM installation module

Install jquery library:

npm install jquery –save-dev

Import is introduced directly in JS

The Import $from “jquery”