Generally, we don't have to worry about the third-party library used, which can't be found in the npm management warehouse.
If you need a library, such as jquery, you can directly run the npm install jquery script command to install the dependencies required by the project;
Then, in the module file using jQuery, import $from 'jQuery' or var $= require ('jquery ').
This is a common way to introduce third-party libraries into projects built by webpack.
Note: for a better demonstration of the sample code, the example is in nodemon This article is based on the operation.
However, in different scenarios, there are different requirements for projects built by webpack:
The size of the project is small enough (cdn)
For webapck processing method, please refer to Webappck -- minimize build output This article.
Use non webapck processing methods, such as CDN.
The operation is also very simple. If you use HTML webpack plugin, you can directly enter it in the template file template / index HTML introduces a third-party library (such as jquery) on a cdn (such as boot CDN). 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, 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 construction, you will see the words hello webpack in the browser with a red background.
Use the third-party library (provide plugin or imports loader) in the global environment
To avoid using third-party libraries every time, you need to refer to them with import or require(), which can be defined as global variables.
The webpack's ProvidePlugin built-in plug-in can solve this problem. For details, please refer to ProvidePlugin The introduction of this article.
To avoid jquery conflicts with cdn references, 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 construction is completed, you can add 1,2,3,4,5,6, ~.
If you want to specify a tool function of lodash, it can be used globally, such as: concat，
First, modify webappck. Com as follows config. JS, the code is as follows:
...
new webpack.ProvidePlugin({
// _: 'lodash',
_concat: ['lodash', 'concat']
}),
...
Then, modify the 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 using plug-ins, you can also consider using import loader, which can 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, in webapck config. JS, add the following code:
...
module: {
rules: [
{
test: require.resolve('underscore'),
use: 'imports-loader?_=underscore'
},
...
]
},
...
Note: both underscore and lodash are developed in singleton mode, and the names of their instantiated constructors are, In order to distinguish, one of them needs to be changed. It is a little difficult for the imports loader to alias this identity, but the provide plugin does not have this problem. You can set a personalized alias.
Modify webpack config. JS, the code is as follows:
new webpack.ProvidePlugin({
// _: 'lodash',
// _concat: ['lodash', 'concat'],
__: 'lodash'
}),
lodash can be defined as__ With underscore_ Make a distinction.
Then, modify the 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 and you can see similar results in the browser (nodemon starts the browser after saving).
cdn and externals
I have encountered some external problems before. Why to say it in detail is because many people don't understand what it is used for.
Scene reproduction:
Previously, there was a project that used jquery. Because this library is classic, it is frequently referenced in various modules of the application. The method of use is as follows:
import $ from 'jquery'
perhaps
var $ = require('jquery')
The result is that after the build, the file is relatively large. Then consider using CDNs, as described above. In this way, you need to delete the reference of import or require and delete the installed jquery dependency. However, due to the chaotic project structure and many modules, in order to avoid the problem of less or missing changes, application errors will be caused. What should I do?
Some people say that the purpose of using cdn is meaningless without removing jquery dependencies. external can solve this problem.
It can be found in module JS file, add the following code:
...
var $ = require('jquery')
...
Then, save the file and find the following error prompted by the build output:
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
Module jquery in JS cannot be resolved.
Then, in webpack config. JS, add the following code:
externals: {
jquery: 'jQuery',
jquery: '$'
},
JQuery represents jQuery in require('jquery '), while jQuery and $represent instantiated identifiers provided by the jQuery library itself. Other libraries are cdn ed, and the modification is 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 the module using jQuery;, Although no error will be reported in this way, if jQuery dependency may be introduced later due to some considerations, you must use VaR $= require ('jquery ') or import $from' jQuery ';.