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压缩后一样正常运行
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。