<>DLL plugin Packaging steps
.dll A file with a suffix is called a dynamic link library , A DLL can contain functions and data called by other modules
Package the basic modules separately and put them in a separate DLL
When the module to be imported is in the DLL , The module cannot be repackaged , And get it from the dynamic link library
DllPlugin plug-in unit ： Used to package dynamic link libraries
DllReferencePlugin: Introduce in configuration file DllPlugin DLL with packaged plug-ins
1, Define configuration files and commands
"build:dll": "webpack --config build/webpack.dll.config.js --mode=development"
webpack.dll.config.js Configuration processing
/* * @description: * @author: steve.deng * @Date: 2020-09-25 12:53:31 *
@LastEditors: steve.deng * @LastEditTime: 2020-09-25 13:24:27 */ const path =
require("path"); // const DllPlugin = require("webpack/lib/DllPlugin"); const
webpack= require('webpack') const ParallelUglifyPlugin = require(
'webpack-parallel-uglify-plugin') module.exports = { entry: { vendor: [
'vue/dist/vue.esm.js', 'element-ui/lib/element-ui.common.js', 'wangeditor',
'mathjs', 'echarts', 'html2canvas', 'vue-router', 'vuex'] }, output: { path:
path.resolve(__dirname, "../static/js"), filename: "[name].dll.js",
//vendor.dll.js library: "_dll_[name]_library",// The name of the library is _dll_[name]_library decided
vendor.dll.js The name of the library // vendor.dll.js Global variable name exposed in . // Mainly for DllPlugin In name use , //
So here we need to talk to each other webpack.DllPlugin In `name: '[name]_library',` bring into correspondence with . }, plugins: [ new
webpack.DllPlugin({ // context: path.join(__dirname, '../'), name:
"_dll_[name]_library", // decided .manifest Inside name name and above library corresponding path: path.join(
__dirname, '../static/js', '[name]-manifest.json'), }), // new
ParallelUglifyPlugin({ // cacheDir: '.cache/', // uglifyJS: { // output: { //
comments: false // }, // compress: { // warnings: false // } // } // }) ], };
// It's usually in the production configuration Development environment is not recommended such as vue Some of the library's error messages are omitted when they are packaged , The development environment is not friendly ,
webpack.prod.conf.js
plugins: [ // Reference plug in new webpack.DllReferencePlugin({ // The context here is related to dllplugin bring into correspondence with
// context: path.join(__dirname, '../'), manifest: require(
'../static/js/vendor-manifest.json') }) ]
html Introducing packaged packages
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport"
content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <
link rel="shortcut icon" href="static/images/favicon.ico"> </head> <body> <div
id="app"></div> <!-- built files will be auto injected --> <script> </script> <
script type="text/javascript" src="/static/js/vendor.dll.js"></script> </body> <
/html>
principle
xx.manifest.json
name It refers to the corresponding dll library name
Describes which modules were typed in dll It's over , Use module name as id Mark it It's probably a list of modules
xxx.dll.js Is the source of the module
xxx.dll.js Is the source code collection of each module adopt key（ modular id）–> value Find out
The above documents In fact, it is one global variable var _dll_react = xxxx;
that webpack How to find the packaged module ? There is no need to pack repeatedly
1, such as index.js Introduced react
import React from 'react'; //./node_modules/[email protected]@react/index.js
console.log(React);
2, He will go mainfest.json Find module id In fact, it is react Keyword splicing version number + index.js form id Go find the module
Namely ‘./node_modules/’+’[email protected]@react’+ ‘/index.js’ Composed of id
3, If you find a module , No more packing
It's packed bundle.js It will be directly introduced into the package above dll library ,dll The library exposes a global variable _dll_react
* bundle.js inside There will be a definition key “dll-reference _dll_react” corresponding
Packaged global variables , Corresponding is all packaged third-party modules /***/ (function(module, __webpack_exports__,
__webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ =
__webpack_require__(/*! react */ "./node_modules/[email protected]@react/index.js")
; /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default =
/*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); console.
log(react__WEBPACK_IMPORTED_MODULE_0___default.a); /***/ }), /***/
"dll-reference _dll_react": /*!*****************************!*\ !*** external
"_dll_react" ***! \*****************************/ /*! no static exports found */
/***/ (function(module, exports) { module.exports = _dll_react; /***/ })
/******/ });
* index.js In fact, it introduces react
bundle.js It's in there
“./src/index.js”: webpack_require(/*! react */
“./node_modules/[email protected]@react/index.js”); /***/ "./src/index.js":
/*!**********************!*\ !*** ./src/index.js ***! \**********************/
/*! no exports provided */ /***/ (function(module, __webpack_exports__,
__webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ =
__webpack_require__(/*! react */ "./node_modules/[email protected]@react/index.js")
; /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default =
/*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); console.
log(react__WEBPACK_IMPORTED_MODULE_0___default.a); /***/ }),
* and webpack_require(/*! react */
“./node_modules/[email protected]@react/index.js”); It actually points to the global variable just now
“./node_modules/[email protected]@react/index.js" namely "dll-reference
_dll_react" One of them key read
So you can go through it (webpack_require(/*! dll-reference _dll_react */ “dll-reference
_dll_react”))(”./node_modules/[email protected]@react/index.js") You can read it react The code is out
/***/ "./node_modules/[email protected]@react/index.js":
/*!********************************************************************************************!*\
!*** delegated ./node_modules/[email protected]@react/index.js from dll-reference
_dll_react ***!
\********************************************************************************************/
/*! no static exports found */ /***/ (function(module, exports,
__webpack_require__) { module.exports = (__webpack_require__(/*! dll-reference
_dll_react */ "dll-reference _dll_react"))(
"./node_modules/[email protected]@react/index.js"); /***/ }),
That's about the process
Technology