


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:
nbsp;html> <meta> <title>third party</title> <script></script>
Then, use jquery
in module.js
, the reference code is as follows:
require('./module.css'); module.exports = function() { $(document.body).append('<h1 id="hello-webpack">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 id="concat-arr">' + _.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 id="concat-arr">' + _.concat(arr, '~') + '</h1>'); $(document.body).append('<h1 id="concat-arr">' + _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 id="concat-arr">' + _.concat(arr, '~') + '</h1>'); // $(document.body).append('<h1 id="concat-arr">' + _concat(arr, '~') + '</h1>'); $(document.body).append('<h1 id="concat-arr">' + __.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!

Vue是一款优秀的JavaScript框架,它可以帮助我们快速构建交互性强、高效性好的Web应用程序。Vue3是Vue的最新版本,它引入了很多新的特性和功能。Webpack是目前最流行的JavaScript模块打包器和构建工具之一,它可以帮助我们管理项目中的各种资源。本文就为大家介绍如何使用Webpack打包和构建Vue3应用程序。1.安装Webpack

区别:1、webpack服务器启动速度比vite慢;由于vite启动的时候不需要打包,也就无需分析模块依赖、编译,所以启动速度非常快。2、vite热更新比webpack快;vite在HRM方面,当某个模块内容改变时,让浏览器去重新请求该模块即可。3、vite用esbuild预构建依赖,而webpack基于node。4、vite的生态不及webpack,加载器、插件不够丰富。

随着Web开发技术的不断发展,前后端分离、模块化开发已经成为了一个广泛的趋势。PHP作为一种常用的后端语言,在进行模块化开发时,我们需要借助一些工具来实现模块的管理和打包,其中webpack是一个非常好用的模块化打包工具。本文将介绍如何使用PHP和webpack进行模块化开发。一、什么是模块化开发模块化开发是指将程序分解成不同的独立模块,每个模块都有自己的作

在vue中,webpack可以将js、css、图片、json等文件打包为合适的格式,以供浏览器使用;在webpack中js、css、图片、json等文件类型都可以被当做模块来使用。webpack中各种模块资源可打包合并成一个或多个包,并且在打包的过程中,可以对资源进行处理,如压缩图片、将scss转成css、将ES6语法转成ES5等可以被html识别的文件类型。

Webpack是一款模块打包工具。它为不同的依赖创建模块,将其整体打包成可管理的输出文件。这一点对于单页面应用(如今Web应用的事实标准)来说特别有用。

配置方法:1、用导入的方法把ES6代码放到打包的js代码文件中;2、利用npm工具安装babel-loader工具,语法“npm install -D babel-loader @babel/core @babel/preset-env”;3、创建babel工具的配置文件“.babelrc”并设定转码规则;4、在webpack.config.js文件中配置打包规则即可。

随着现代Web应用程序的复杂性不断增加,构建优秀的前端工程和插件系统变得越来越重要。随着SpringBoot和Webpack的流行,它们成为了一个构建前端工程和插件系统的完美组合。SpringBoot是一个Java框架,它以最小的配置要求来创建Java应用程序。它提供了很多有用的功能,比如自动配置,使开发人员可以更快、更容易地搭建和部署Web应用程序。W

随着Web应用程序开发的日益复杂和需要的交互性越来越高,使用前端框架和后端框架已经变得非常普遍。在此过程中,集成前端框架和后端框架也成为必不可少的步骤,以确保应用程序的顺畅运行和高效性能。本文将重点介绍在PHP中如何进行前端框架和后端框架的集成。前端框架和后端框架概述前端框架是一个通用的术语,它指的是应用程序的用户界面和交互功能。HTML,CSS和Java


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

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

WebStorm Mac version
Useful JavaScript development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

SublimeText3 Chinese version
Chinese version, very easy to use

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

Dreamweaver Mac version
Visual web development tools
