Javascript 排除捆绑包中的Web包方法
我最近学习了一个教程,该教程教我如何将文件绑定到webpack。通过使用该教程和一些在线搜索,我能够创建一个配置文件,将库中的不同模块捆绑在一起,并将它们输出到以下结构中:Javascript 排除捆绑包中的Web包方法,javascript,node.js,web,webpack,bundle,Javascript,Node.js,Web,Webpack,Bundle,我最近学习了一个教程,该教程教我如何将文件绑定到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 unnifiedwebpa
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 unnifiedwebpackplugin=require('unnified-webpack-plugin');
const nodeExternals=require('webpack node externals');
//为Web(浏览器)绑定文件的配置
const frontEndConfig={
目标:“网络”,
条目:{
应用程序:['./weather.js']
},
模式:"生产",,
输出:{
path:path.resolve(uu dirname,'./dist/web'),
文件名:“weather.min.js”,
},
开发服务器:{
主机:“0.0.0.0”,//docker需要
publicPath:“/assets/”,
contentBase:path.resolve(uu dirname,'./views'),
watchContentBase:是的,
是的,
港口:9001
},
devtool:'源映射',
插件:[
新的未nifiedWebPackPlugin()
]
}
//配置以绑定NodeJS的文件
const backEndConfig={
目标:'节点',
条目:{
应用程序:['./weather.js']
},
模式:"生产",,
输出:{
path:path.resolve(uu dirname,'./dist/node'),
文件名:“weather.min.js”
},
外部:[nodeExternals()]
}
module.exports=[frontEndConfig,backEndConfig];
我认为一切都很好,直到我看了看我的未缩小的文件,发现文件顶部有几个网页包“引导”方法。这些方法有必要吗?我是否可以捆绑我的文件而不包括这些方法?我一直试图在网上找到这方面的信息,但到目前为止没有运气。我想我不是在用错误的关键字搜索,就是在配置中遗漏了一些我没有发现的琐碎内容。这里的任何帮助都将不胜感激
更新:
下面的代码片段是我的未统一文件的开头。正如您所看到的,这是一些webpack引导函数,然后它做了一些工作,在最后包括我的库。我希望输出只有我的库,没有任何网页包函数
/*******/(函数(模块){//webpackBootstrap
/******///模块缓存
/******/var installedModules={};
/******/
/******///require函数
/******/功能uu网页u需要uu(模块ID){
/******/
/******///检查模块是否在缓存中
/******/if(已安装的模块[moduleId]){
/******/返回已安装的模块[moduleId]。导出;
/******/ }
/******///创建一个新模块(并将其放入缓存)
/******/变量模块=已安装的模块[moduleId]={
/******/i:模块ID,
/******/l:错,
/******/导出:{}
/******/ };
/******/
/******///执行模块函数
/******/模块[moduleId]。调用(module.exports、module、module.exports、\uuu网页包\uu require\uuuu);
/******/
/******///将模块标记为已加载
/******/module.l=真;
/******/
/******///返回模块的导出
/******/返回模块。导出;
/******/ }
/******/
/******/
/******///公开modules对象(\uuuu webpack\u modules\uuuu)
/******/\uuuu网页包\u需要\uuuuu.m=模块;
/******/
/******///公开模块缓存
/******/\uuuu webpack\u require\uuuuu.c=已安装的模块;
/******/
/******///定义协调导出的getter函数
/******/\uuuu webpack\u require\uuuuu.d=函数(导出、名称、getter){
/******/如果(!\uuuu网页需要(导出,名称)){
/******/defineProperty(导出,名称,{enumerable:true,get:getter});
/******/ }
/******/ };
/******/
/******///定义导出上的uu esModule
/******/\uuuu webpack\u require\uuuuu.r=函数(导出){
/******/if(符号类型!==“未定义”&&Symbol.toStringTag){
/******/defineProperty(导出,Symbol.toStringTag,{value:'Module'});
/******/ }
/******/defineProperty(导出,'.\u esModule',{value:true});
/******/ };
/******/
/******///创建一个假名称空间对象
/******///模式&1:值是模块id,需要它
/******///模式&2:将值的所有属性合并到ns中
/******///模式&4:已存在ns对象时返回值
/******///模式&8 | 1:按要求行事
/******/\uuuu webpack\u require\uuuuu.t=函数(值、模式){
/******/if(mode&1)值=\uuuuu网页\uu需要\uuuuuu(值);
/******/if(模式&8)返回值;
/******/if((mode&4)&&typeof value=='object'&&value&&value.\uu esModule)返回值;
/******/var ns=Object.create(null);
/******/_uuu网页uuu require uuuuuuu.r(ns);;
/******/defineProperty(ns,'default',{enumerable:true,value:value});
/******/if(mode&2&&typeof value!=“string”)for(var key in value)uu webpack_urequire_uu.d(ns,key,function(key){return value[key];}.bind(null,key));
/******/返回ns;
/******/ };
/******/
/******///getDefaultExport函数与非harmony模块兼容
/******/\uuuu webpack\u require\uuuuu.n=功能(模块){
/******/var getter=模块和模块?
/******/函数getDefault(){返回模块['default'];}:
/******/函数getModuleExports(){return module;};
/******/需要的网页(getter,'a',getter);
/******/回程吸气剂;
/******/ };
/******/
/******///Object.prototype.hasOwnProperty.call
/******/_uuwebpack_urequire_uuu.o=函数(对象,属性){return object.prototype.hasOwnProperty.call(对象,属性);};
/******/
/******///\u网页包\u公共路径__
/******/_uuu网页包_uurequire_uuu.p=“”;
/******/
/******/
/******///加载输入模块并返回导出
/******/再
// 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, exports, __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;
}
]);