Web Front-end
JS Tutorial
How to introduce third-party libraries with webpack and precautions (code examples)
How to introduce third-party libraries with webpack and precautions (code examples)
The content of this article is about the methods and precautions (code examples) for introducing third-party libraries in webpack. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
Under normal circumstances, we don’t have to worry about the third-party libraries used, which can’t be found in the npm management repository.
If you need a certain library, such as jquery, you can directly run the npm install jquery script command to install the dependencies required for this project;
Then, in the module file using jquery, pass Import $ from 'jquery' or var $ = require('jquery') to introduce.
This is a common way to introduce third-party libraries into projects built with webpack.
Note: In order to better demonstrate the sample code, the example is based on the nodemon article.
However, in different scenarios, there are different requirements for projects built by webpack:
The size of the project is small enough (cdn)
If it is the processing method of webapck, you can refer to the article webapck - Minimizing the Build Output.
Use non-webapck processing methods, such as CDN.
The operation is also very simple. If you use html-webpack-plugin, directly introduce a third-party library (such as: jquery) on a certain CDN (such as: boot CDN) into the template file template/index.html. , the reference code is as follows:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>third party</title> </head> <body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> </body> </html>
Then, use jquery in module.js, the reference code is as follows:
require('./module.css');
module.exports = function() {
$(document.body).append('<h1>hello webpack</h1>')
}Finally, run npm run test. After the build is completed, you will see the words hello webpack in the browser with a red page effect in the background.
Use third-party libraries (provide-plugin or imports-loader) in the global environment
In order to avoid using third-party libraries every time, you need to use import or require( ) refers to them and can be defined as global variables.
The built-in plug-in of webpack's ProvidePlugin can solve this problem. For details, please refer to the introduction of ProvidePlugin.
To avoid conflicts with jquery referenced by cdn, lodash is used here.
First, install lodash dependency, the command is as follows:
yarn add lodash --dev
Then, in webpack.config.js, add the following code:
new webpack.ProvidePlugin({
_: 'lodash'
}),Secondly, in module.js Add the following code:
...
var arr = [1, 2, 3, 4, 5 ,6];
// provide-plugin
$(document.body).append('<h1>' + _.concat(arr, '~') + '</h1');
...Finally, run the npm run test script command. After the build is completed, you can add 1,2,3,4,5,6,~ to the browser page.
If you want to specify that a certain tool function of lodash can be used globally, such as: _.concat,
First, modify webapck.config.js as follows, the code is as follows:
...
new webpack.ProvidePlugin({
// _: 'lodash',
_concat: ['lodash', 'concat']
}),
...Then, modify module.js, the code is as follows:
...
var arr = [1, 2, 3, 4, 5 ,6];
// provide-plugin
// $(document.body).append('<h1>' + _.concat(arr, '~') + '</h1');
$(document.body).append('<h1>' + _concat(arr, '~') + '</h1');
...If you don’t like to use plug-ins, you can also consider using import-loader, which can also achieve the same purpose.
In order to avoid unnecessary interference, you can use underscore to demonstrate.
First, install the imports-loader dependency, the command is as follows:
yarn add imports-loader --dev
Then, install the underscore dependency, the command is as follows:
yarn add underscore
Secondly, add in webapck.config.js The following code:
...
module: {
rules: [
{
test: require.resolve('underscore'),
use: 'imports-loader?_=underscore'
},
...
]
},
...Note: Both underscore and lodash are developed using the singleton model. The names of their instantiated constructors are both _. In order to distinguish them, one of them needs to be changed. . It is a bit difficult for imports-loader to alias this logo, but provide-plugin does not have this problem and can set a personalized alias.
Modify webpack.config.js, the code is as follows:
new webpack.ProvidePlugin({
// _: 'lodash',
// _concat: ['lodash', 'concat'],
__: 'lodash'
}),Can be distinguished between lodash defined as __ and underscore_.
Then, modify module.js, the code is as follows:
...
// provide-plugin
// $(document.body).append('<h1>' + _.concat(arr, '~') + '</h1');
// $(document.body).append('<h1>' + _concat(arr, '~') + '</h1');
$(document.body).append('<h1>' + __.concat(arr, '~') + '</h1');
...Finally, save all the files, you can see similar results in the browser (after saving, nodemon will automatically start the browser) .
cdn and externals
I encountered some problems with externals before. Why do I need to explain them in detail because many people don’t understand what they are used for.
Scene reproduction:
Before, there was a project that used jquery. Because this library is relatively classic, it is frequently referenced in various modules of the application. The method of use is as follows:
import $ from 'jquery'
or
var $ = require('jquery')The result is that after the build is completed, the file is relatively large. Then consider using a CDN, as described above. In this way, you need to delete the import or require references and delete the installed jquery dependency. However, because the project structure is relatively messy and there are many modules, in order to avoid the problem of less or missed changes, it will cause application errors. what can we do about it?
Some people say that if the jquery dependency is not deleted, the purpose of using cdn will be meaningless. Using external can solve this problem.
You can add the following code to the module.js file:
...
var $ = require('jquery')
...Then, save the file and find that the build output prompts the following error:
ERROR in ./module.js Module not found: Error: Can't resolve 'jquery' in 'E:\workspace\me\webpack-play\demo\example-1' @ ./module.js 3:0-23 @ ./main.js @ multi (webpack)-dev-server/client?http://localhost:8080 ./main.js
in module module.js jquery cannot be parsed.
Next, add the following code to webpack.config.js:
externals: {
jquery: 'jQuery',
jquery: '$'
},where jquery represents jquery in require('jquery'), and jQuery and $ represent jquery The library itself provides instantiation identifiers. CDNization of other libraries, modifications similar to jquery.
However, if you decide to use cdn at the beginning of the project, do not use var $ = require('jquery') or import $ from 'jquery'; in a module that uses jquery, although this will not cause an error. , but if for some reason, jquery dependency may be introduced later, then you must use var $ = require('jquery') or import $ from 'jquery';.
The above is the detailed content of How to introduce third-party libraries with webpack and precautions (code examples). For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
PHP and Vue: a perfect pairing of front-end development tools
Mar 16, 2024 pm 12:09 PM
PHP and Vue: a perfect pairing of front-end development tools. In today's era of rapid development of the Internet, front-end development has become increasingly important. As users have higher and higher requirements for the experience of websites and applications, front-end developers need to use more efficient and flexible tools to create responsive and interactive interfaces. As two important technologies in the field of front-end development, PHP and Vue.js can be regarded as perfect tools when paired together. This article will explore the combination of PHP and Vue, as well as detailed code examples to help readers better understand and apply these two
Questions frequently asked by front-end interviewers
Mar 19, 2024 pm 02:24 PM
In front-end development interviews, common questions cover a wide range of topics, including HTML/CSS basics, JavaScript basics, frameworks and libraries, project experience, algorithms and data structures, performance optimization, cross-domain requests, front-end engineering, design patterns, and new technologies and trends. . Interviewer questions are designed to assess the candidate's technical skills, project experience, and understanding of industry trends. Therefore, candidates should be fully prepared in these areas to demonstrate their abilities and expertise.
C# development experience sharing: front-end and back-end collaborative development skills
Nov 23, 2023 am 10:13 AM
As a C# developer, our development work usually includes front-end and back-end development. As technology develops and the complexity of projects increases, the collaborative development of front-end and back-end has become more and more important and complex. This article will share some front-end and back-end collaborative development techniques to help C# developers complete development work more efficiently. After determining the interface specifications, collaborative development of the front-end and back-end is inseparable from the interaction of API interfaces. To ensure the smooth progress of front-end and back-end collaborative development, the most important thing is to define good interface specifications. Interface specification involves the name of the interface
Is Django front-end or back-end? check it out!
Jan 19, 2024 am 08:37 AM
Django is a web application framework written in Python that emphasizes rapid development and clean methods. Although Django is a web framework, to answer the question whether Django is a front-end or a back-end, you need to have a deep understanding of the concepts of front-end and back-end. The front end refers to the interface that users directly interact with, and the back end refers to server-side programs. They interact with data through the HTTP protocol. When the front-end and back-end are separated, the front-end and back-end programs can be developed independently to implement business logic and interactive effects respectively, and data exchange.
Exploring Go language front-end technology: a new vision for front-end development
Mar 28, 2024 pm 01:06 PM
As a fast and efficient programming language, Go language is widely popular in the field of back-end development. However, few people associate Go language with front-end development. In fact, using Go language for front-end development can not only improve efficiency, but also bring new horizons to developers. This article will explore the possibility of using the Go language for front-end development and provide specific code examples to help readers better understand this area. In traditional front-end development, JavaScript, HTML, and CSS are often used to build user interfaces
How to implement instant messaging on the front end
Oct 09, 2023 pm 02:47 PM
Methods for implementing instant messaging include WebSocket, Long Polling, Server-Sent Events, WebRTC, etc. Detailed introduction: 1. WebSocket, which can establish a persistent connection between the client and the server to achieve real-time two-way communication. The front end can use the WebSocket API to create a WebSocket connection and achieve instant messaging by sending and receiving messages; 2. Long Polling, a technology that simulates real-time communication, etc.
Django: A magical framework that can handle both front-end and back-end development!
Jan 19, 2024 am 08:52 AM
Django: A magical framework that can handle both front-end and back-end development! Django is an efficient and scalable web application framework. It is able to support multiple web development models, including MVC and MTV, and can easily develop high-quality web applications. Django not only supports back-end development, but can also quickly build front-end interfaces and achieve flexible view display through template language. Django combines front-end development and back-end development into a seamless integration, so developers don’t have to specialize in learning
Combination of Golang and front-end technology: explore how Golang plays a role in the front-end field
Mar 19, 2024 pm 06:15 PM
Combination of Golang and front-end technology: To explore how Golang plays a role in the front-end field, specific code examples are needed. With the rapid development of the Internet and mobile applications, front-end technology has become increasingly important. In this field, Golang, as a powerful back-end programming language, can also play an important role. This article will explore how Golang is combined with front-end technology and demonstrate its potential in the front-end field through specific code examples. The role of Golang in the front-end field is as an efficient, concise and easy-to-learn
