1. Image processing
(1) Install the Loader
Download and install file-loader
npm install –save-dev file-loader
(2) Configure the Config file
(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”