webpack打包非模块化js的方法
本文主要记录了非模块化js如何使用webpack打包
模块化打包实现方式
webpack是模块打包工具,通过入口文件递归遍历其依赖图谱,绝对是打包神器。
bar.js
exportdefaultfunctionbar(){ // }
foo.js
importbarfrom'./bar'; bar();
通过如下,webpack配置很快实现打包。通过插件我们还可以实现文件压缩,开发态我们还可以配置sourceMap进行代码调试(chrome浏览器支持sourcemap调试)。
module.exports={ entry:'./foo.js', output:{ filename:'bundle.js' }, devtool:"source-map", plugins:[ //compressjs newwebpack.optimize.UglifyJsPlugin({ sourceMap:true }) ] }
非模块化文件打包压缩
这里我们可以使用webpack可以配置多入口文件及ExtractTextPlugin插件将非模块文件压缩到一个文件中。
m1.js
functona(){ console.log('m1file') }
m2.js
functonb(){ console.log('m2file') }
webpack配置文件
varwebpack=require('webpack') varpath=require('path') module.exports={ entry:{ 'app':[ './src/a.js', './src/b.js' ] }, output:{ path:path.resolve(__dirname,"dist"), filename:"[name].js" } }
打包后,发现我去不能运行??原因是webpack打包会将每个文件内容放入闭包函数中,我们去调用闭包中的函数,当然不行啦。
/******/(function(modules){//webpackBootstrap /******///Themodulecache /******/varinstalledModules={}; /******/ /******///Therequirefunction /******/function__webpack_require__(moduleId){ /******/ /******///Checkifmoduleisincache /******/if(installedModules[moduleId]){ /******/returninstalledModules[moduleId].exports; /******/} /******///Createanewmodule(andputitintothecache) /******/varmodule=installedModules[moduleId]={ /******/i:moduleId, /******/l:false, /******/exports:{} /******/}; /******/ /******///Executethemodulefunction /******/modules[moduleId].call(module.exports,module,module.exports,__webpack_require__); /******/ /******///Flagthemoduleasloaded /******/module.l=true; /******/ /******///Returntheexportsofthemodule /******/returnmodule.exports; /******/} /******/ /******/ /******///exposethemodulesobject(__webpack_modules__) /******/__webpack_require__.m=modules; /******/ /******///exposethemodulecache /******/__webpack_require__.c=installedModules; /******/ /******///definegetterfunctionforharmonyexports /******/__webpack_require__.d=function(exports,name,getter){ /******/if(!__webpack_require__.o(exports,name)){ /******/Object.defineProperty(exports,name,{ /******/configurable:false, /******/enumerable:true, /******/get:getter /******/}); /******/} /******/}; /******/ /******///getDefaultExportfunctionforcompatibilitywithnon-harmonymodules /******/__webpack_require__.n=function(module){ /******/vargetter=module&&module.__esModule? /******/functiongetDefault(){returnmodule['default'];}: /******/functiongetModuleExports(){returnmodule;}; /******/__webpack_require__.d(getter,'a',getter); /******/returngetter; /******/}; /******/ /******///Object.prototype.hasOwnProperty.call /******/__webpack_require__.o=function(object,property){returnObject.prototype.hasOwnProperty.call(object,property);}; /******/ /******///__webpack_public_path__ /******/__webpack_require__.p=""; /******/ /******///Loadentrymoduleandreturnexports /******/return__webpack_require__(__webpack_require__.s=0); /******/}) /************************************************************************/ /******/([ /*0*/ /***/(function(module,exports,__webpack_require__){ __webpack_require__(1); module.exports=__webpack_require__(2); /***/}), /*1*/ /***/(function(module,exports){ /***/}), /*2*/ /***/(function(module,exports){ functionb(){ console.log('bfile') } /***/}) /******/]); //#sourceMappingURL=app.js.map
怎么办呢?我们可以对我们当前代码进行修改,让所有函数或属性都能通过window对象调用即可。
(function(Demo){ Demo.module1={ msg:function(){ return'HelloWorld'; } } })(window.Demo=window.Demo||{})
所以我们对于上面闭包形式且所有对象都挂在window对象这种类型代码,不会出现函数调用不到现象。通过webpack压缩后一样正常运行
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。