如何解决排除捆绑中的Webpack方法
我最近遵循了一个教程，该教程教会了我使用Webpack捆绑文件的基本知识。通过使用该教程和一些在线搜索，我能够创建一个配置文件，该文件将库中的不同模块捆绑在一起，并将它们输出为以下结构：
dist/node/weather.min.js
dist/web/weather.js
dist/web/weather.min.js
dist/web/weather.min.js.map
我能够使用以下配置文件执行此操作：
const path = require( 'path' );
const UnminifiedWebpackPlugin = require('unminified-webpack-plugin');
const nodeExternals = require( 'webpack-node-externals' );
// Config to bundle files for Web (browser)
const frontEndConfig = {
target: 'web',entry: {
app: [ './weather.js' ]
},mode: 'production',output: {
path: path.resolve( __dirname,'./dist/web' ),filename: 'weather.min.js',},devServer: {
host: '0.0.0.0',// required for docker
publicPath: '/assets/',contentBase: path.resolve( __dirname,'./views' ),watchContentBase: true,compress: true,port: 9001
},devtool: 'source-map',plugins: [
new UnminifiedWebpackPlugin()
]
}
// Config to bundle files for NodeJS
const backEndConfig = {
target: 'node','./dist/node' ),filename: 'weather.min.js'
},externals: [ nodeExternals() ]
}
module.exports = [ frontEndConfig,backEndConfig ];
我以为一切都很好，直到我查看了统一文件，然后在文件顶部看到了几种webpack“ bootstrap”方法。这些方法是否必要？我可以将文件打包而不包含这些方法吗？我一直在尝试在线查找有关此信息，但到目前为止还没有运气。我认为自己是使用错误的关键字进行搜索，还是错过了我的配置中没发现的琐碎内容。任何帮助，我们将不胜感激。
更新： 下面的代码段是未缩小文件开头的内容。如您所见，它是一些webpack引导程序功能，然后做一些工作来最后包含我的库。我希望输出的内容只有我的库，而没有任何webpack函数。
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,/******/ l: false,/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports,name,getter) {
/******/ if(!__webpack_require__.o(exports,name)) {
/******/ Object.defineProperty(exports,{ enumerable: true,get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports,Symbol.toStringTag,{ value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports,'__esModule',{ value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id,require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value,mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns,'default',value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns,key,function(key) { return value[key]; }.bind(null,key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter,'a',getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object,property) { return Object.prototype.hasOwnProperty.call(object,property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module,exports,__webpack_require__) {
module.exports = __webpack_require__(1);
/***/ }),/* 1 */
/***/ (function(module,__webpack_exports__,__webpack_require__) {
"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__,"helpers",function() { return /* binding */ helpers; });
__webpack_require__.d(__webpack_exports__,"OWMClient",function() { return /* binding */ OWMClient; });
// NAMESPACE OBJECT: ./src/helpers/helpers.js
var helpers_namespaceObject = {};
__webpack_require__.r(helpers_namespaceObject);
__webpack_require__.d(helpers_namespaceObject,"celsiusToKelvin",function() { return celsiusToKelvin; });
__webpack_require__.d(helpers_namespaceObject,"celsiusToFahrenheit",function() { return celsiusToFahrenheit; });
__webpack_require__.d(helpers_namespaceObject,"fahrenheitToCelsius",function() { return fahrenheitToCelsius; });
__webpack_require__.d(helpers_namespaceObject,"fahrenheitToKelvin",function() { return fahrenheitToKelvin; });
__webpack_require__.d(helpers_namespaceObject,"kelvinToCelsius",function() { return kelvinToCelsius; });
__webpack_require__.d(helpers_namespaceObject,"kelvinToFahrenheit",function() { return kelvinToFahrenheit; });
__webpack_require__.d(helpers_namespaceObject,"isEmpty",function() { return isEmpty; });
解决方法
您从未压缩文件中观察到的就是WebPack制作捆绑包时发生的情况：首先，它将单个模块收集到一个模块数组中，然后一开始就包括如何使用该数组的说明。
从[1]中，您可以看到WebPack对三个模块（求和，乘法和索引）的相当简单的乘法应用程序的作用：
// the webpack bootstrap
(function (modules) {
// The module cache
var installedModules = {};
// The require function
function __webpack_require__(moduleId) {
// Check if module is in cache
// Create a new module (and put it into the cache)
// Execute the module function
// Flag the module as loaded
// Return the exports of the module
}
// expose the modules object (__webpack_modules__)
// expose the module cache
// Load entry module and return exports
return __webpack_require__(0);
})
/************************************************************************/
([
// index.js - our application logic
/* 0 */
function (module,exports,__webpack_require__) {
var multiply = __webpack_require__(1);
var sum = __webpack_require__(2);
var totalMultiply = multiply(5,3);
var totalSum = sum(5,3);
console.log('Product of 5 and 3 = ' + totalMultiply);
console.log('Sum of 5 and 3 = ' + totalSum);
},// multiply.js
/* 1 */
function (module,__webpack_require__) {
var sum = __webpack_require__(2);
var multiply = function (a,b) {
var total = 0;
for (var i = 0; i < b; i++) {
total = sum(a,total);
}
return total;
};
module.exports = multiply;
},// sum.js
/* 2 */
function (module,exports) {
var sum = function (a,b) {
return a + b;
};
module.exports = sum;
}
]);
正如您将看到的，分隔线之后的行包括特定格式数组的模块，而前几行是有效使用该数组的马达。否则，整个捆绑包就是一段巨大的代码，没有开始也没有结束，没有规则规定从哪里开始以及下一步要去哪里。
除其他外，模块的想法是不重复代码-它表示重用它。就是说，require或import方法用于处理在需要时存在依赖项。您观察到的额外代码可以替代导入或需要功能-采用通用方式。
请查看我的消息来源（归功于Sean Landsman），并阅读整个故事，以更好地理解该主题：
[1] https://medium.com/ag-grid/webpack-tutorial-understanding-how-it-works-f73dfa164f01
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
