webpack打包非模块化js
本文主要记录了非模块化js如何使用webpack打包
模块化打包实现方式
webpack是模块打包工具,通过入口文件递归遍历其依赖图谱,绝对是打包神器。
bar.js
export default function bar() {//
}
foo.js
import bar from './bar';bar();
通过如下,webpack配置很快实现打包。通过插件我们还可以实现文件压缩,开发态我们还可以配置sourceMap
进行代码调试(chrome浏览器支持sourcemap调试)。
module.exports = {entry: './foo.js',output: {filename: 'bundle.js'},devtool: "source-map", plugins: [// compress jsnew webpack.optimize.UglifyJsPlugin({sourceMap: true})]
}
非模块化文件打包压缩
这里我们可以使用webpack可以配置多入口文件及ExtractTextPlugin 插件将非模块文件压缩到一个文件中。
m1.js
functon a() {console.log('m1 file')
}
m2.js
functon b() {console.log('m2 file')
}
webpack配置文件
var webpack = require('webpack')
var path = 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
/******/ // 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, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // 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__) {__webpack_require__(1);
module.exports = __webpack_require__(2);/***/ }),
/* 1 */
/***/ (function(module, exports) {/***/ }),
/* 2 */
/***/ (function(module, exports) {function b() {console.log('b file')
}/***/ })
/******/ ]);
//# sourceMappingURL=app.js.map
怎么办呢?我们可以对我们当前代码进行修改,让所有函数或属性都能通过window对象调用即可。
(function(Demo) {Demo.module1 = {msg:function() {return 'Hello World';}}
})(window.Demo = window.Demo || {})
所以我们对于上面闭包形式且所有对象都挂在window对象这种类型代码,不会出现函数调用不到现象。通过webpack压缩后一样正常运行
转载于:https://www.cnblogs.com/winfred/p/6959128.html
webpack打包非模块化js相关推荐
- nginx禁止浏览器直接打开webpack打包后的js文件
应公司安全测试要求,webpack打包后的js文件不能直接在浏览器打开. 解决方法:通过nginx配置文件过滤,跳转到403页面,代码如下: location / {set $flag 0;if ($ ...
- php项目webpack打包,利用node.js对webpack打包
本篇文章主要介绍了webpack打包node.js后端项目的方法,现在分享给大家,也给大家做个参考. 本文介绍了webpack打包node.js后端项目的方法,分享给大家,具体如下: 安装依赖npm ...
- webpack打包出的js 如何引入到index.hml并输出
一.首先js注入到index.html HtmlWebpackPlugin:该插件会创建一个html文件并将打包后的js文件以script标签引入,我们可以通过属性inject配置script标签的位 ...
- [one day one question] webpack打包压缩 ES6 js、.vue报错
问题描述: 报错: ERROR in js/test.js from UglifyJs Unexpected token punc ?(?, expected punc ?:? [js/test.js ...
- JS逆向之webpack打包网站实战
前言 最近学习的进度有点缓慢,前段时间研究了下极验的滑动验证的js,怎么说呢,难度还是可以的,之后会写关于极验的一个流程跟加密破解的过程,在这之前呢,我们先了解下另一个知识点---webpack,会对 ...
- webpack 打包
webpack 中每个模块有一个唯一的 id,是从 0 开始递增的. 整个打包后的 bundle.js 是一个匿名函数自执行. 参数则为一个数组.数组的每一项都为个 function. functio ...
- webpack+vue+vueRouter模块化构建完整项目实例详细步骤-入门篇
新建项目 开始(确认已经安装node环境和npm包管理工具) 1.新建项目文件名为start_vuedemo 2.npm init -y 初始化项目,我的win7系统,工程在d盘的vue_test_p ...
- webpack5打包普通html项目,webpack打包其他资源
webpack打包其他资源文件 图片打包 file-loader的使用 css内引入图片资源 安装 npm install file-loader -D outputPath:图片文件打包的放在哪个文 ...
- webpack打包css image,webpack 打包CSS 引入图片
加载css 安装style-loader, css-loader npm install style-loader css-loader --save-dev 配置webpack.config.js文 ...
- webpack中loader加载器(打包非js模块)
通过loader打包非js模块 我这儿用VScode为编辑器 在实际开发过程中,webpack默认只能打包处理以.js后缀名结尾的模块,其他非. js后缀名结 尾的模块,webpack 默认处理不了, ...
最新文章
- 重构当当网交易系统!
- libgdx和android界面结合,Android游戏引擎libgdx使用教程5:常用UI类与舞台
- html需要顺序阅读吗,前端知识:HTML5所有的标签-按顺序排列 | 前端面试题
- python代码案例详解-Python实现电视里的5毛特效实例代码详解
- 怎么查看电脑多少内核和多少逻辑处理器?
- TCP和UDP套接字编程
- 华为海思MPP媒体处理软件开发学习(基础)
- CCNA学习指南第十一章
- 学习笔记(08):Python网络编程并发编程-实现服务端可以对多个客户端提供服务
- Linux CAN 驱动实验
- java 一次CPU占用过高问题的排查及解决,java基础面试笔试题
- 那些激动人心的React,Webpack,Babel的新特性对于我们开发体验带来哪些提升
- BZOJ——3343: 教主的魔法 || 洛谷—— P2801 教主的魔法
- 【Hadoop】新旧Java MapReduce API的差异
- STM32-RTC实时时钟-毫秒计时实现
- java swing 圆形图标_java swing 圆形按钮
- 【pygame】Python_game-master打飞机demo,并打包exe
- 超级鸡马虚拟服务器,超级鸡马按键操作图文教程_超级鸡马怎么玩_牛游戏网
- 测试环境的搭建和维护_软硬件测试环境
- 压缩短视频的软件哪个好?视频压缩软件免费版哪个好?最好的视频压缩工具
热门文章
- SurfaceView浅析
- .ajax 上传图片,ajax图片上传并预览
- 工频干扰频谱测量_力参数传感器的电阻应变测量系统
- Android 5.1 memory leak,Android 性能优化之使用MAT分析内存泄露问题
- excel使用教程_办公软件excel表格制作教程
- celery英语_图文海涛英语 分类记单词第112天:中止cease天花板ceiling
- vivado中交织模块_Adalm Pluto SDR主动学习模块让您拥有完善的无线电RF射频实验室...
- 安卓日记本设计内容介绍_天一 | 教你捷径,使用VB开发安卓程序!
- linux nginx 添加插件,linux安装nginx1.9.9实录
- 微信小程序左右菜单mysql_微信小程序tab左右滑动切换功能的实现代码