Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场

webpack

作者头像
小胖
发布于 2018-06-28 04:26:44
发布于 2018-06-28 04:26:44
62500
代码可运行
举报
运行总次数:0
代码可运行

var path = require('path') // 安装完webpack自带的

--dirname代表webpack.config.js文件当前所在的路径

webpack只支持原生js模块的打包,若是要打包html、css、es6语法写的代码转换为es5,则需要使用loaders

模块文件名a.js:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 function toast(msg,time) {
            this.msg = msg;
            this.dismissTime = time||3000;
            this.createToast();
            this.showToast();
        }
     toast.prototype = {
            createToast: function() {
                var tpl = '<div class="toast">'+this.msg+'</div>';
                this.$toast = $(tpl);
                $('body').append(this.$toast);
            },
            showToast: function() {
                var self = this;
                this.$toast.fadeIn(3000,function() {
                    setTimeout(function() {
                        self.$toast.fadeOut(3000,function() {
                            self.$toast.remove();
                        });
                    },self.dismissTime);
                });
            }
        };

        function Toast(msg,time) {
            return new toast(msg,time);
        }
// 因为module.exports等于一个对象,而现在返回的是一个函数,所以要写成如下形式
module.exports.Toast = Toast 

模块文件名b.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 加载a.js模块

var Toast = require('a.js').Toast; // 这么写 ,require('a.js')是对象,加载它的Toast方法

webpack -w // 观察模式,对js代码改动会自动重新打包

webpack -p // 压缩打包js代码

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.03.29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
webpack 学习小结
IMWeb前端团队
2017/12/29
6890
webpack 学习小结
webpack学习(二):先写几个webpack基础demo
一、先写一个简单demo1 1-1安装好webpack后创建这样一个目录: 1-2:向src各文件和dist/index.html文件写入内容: <!DOCTYPE html> <html lang=
柴小智
2018/04/10
6520
webpack学习(二):先写几个webpack基础demo
5月末跟大家讲讲webpack(生日篇)
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
用户10216580
2022/12/06
3080
Webpack的异步加载原理及分包策略(深度好文,建议收藏)
webpack ensure 有人称它为异步加载,也有人称为代码切割,他其实就是将 js 模块给独立导出一个.js 文件,然后使用这个模块的时候,再创建一个 script 对象,加入到 document.head 对象中,浏览器会自动帮我们发起请求,去请求这个 js 文件,然后写个回调函数,让请求到的 js 文件做一些业务操作。
winty
2020/12/07
4.8K0
Webpack的异步加载原理及分包策略(深度好文,建议收藏)
带你秒懂 Webpack 原理
它是一个将一切资源(如scripts / images / styles/ assets)都当成模块的模块化打包工具。
前端bubucuo
2022/09/16
6090
带你秒懂 Webpack 原理
手撸webpack基础原理
根目录下创建src目录,./src/目录下创建index.js、a.js、b.js、c.js
刘嘿哈
2022/10/25
2550
模块化的一些小研究
我们知道最常见的模块化方案有CommonJS、AMD、CMD、ES6,AMD规范一般用于浏览器,异步的,因为模块加载是异步的,js解释是同步的,所以有时候导致依赖还没加载完毕,同步的代码运行结束;CommonJS规范一般用于服务端,同步的,因为在服务器端所有文件都存储在本地的硬盘上,传输速率快而且稳定。
lhyt
2022/09/21
3740
手摸手实现一个webpack
在平时的工作和学习过程中,webpack 是一个重要的知识点,本文通过分析 webpack 的打包原理,最终带大家实现一个简易版的 webpack。
astonishqft
2022/05/10
4430
Webpack 原理—如何实现代码打包
👆 这是第 122 篇不掺水的原创,想要了解更多,请戳上方蓝色字体:政采云前端团队 关注我们吧~ 本文首发于政采云前端团队博客:Webpack 原理—如何实现代码打包 https://zoo.team/article/webpack-reason 前言 作为一个前端“攻城狮”,Webpack 再熟悉不过了,Webpack 能做的事太多了,可以将所有资源(包括 JS,TS,JSX,图像,字体和 CSS 等)打包后置于依赖关系中,使你可以按照需求引用依赖来使用资源。Webpack 很出色的完成了转译前端多
政采云前端团队
2021/11/19
6340
webpack基本打包配置流程
项目搭建以及webpack打包配置流程 创建文件夹EC(文件夹和文件名根据需求自定义) 在EC文件夹下新建文件夹APP 在APP文件夹下新建入口文件index.js 和运行该入口文件的index.html文件 在APP文件夹下新建两个js文件:a,js   b.js   (当项目级别如react项目,可以根据需求创建components文件夹等等,用于更好地管理模块化项目)       APP/index.html <!DOCTYPE html> <html> <head> <meta charse
用户1148399
2018/01/09
9310
webpack基本打包配置流程
由浅至深了解webpack异步加载背后的原理
1、module:我们源码目录中的每一个文件,在 webpack 中当作module来处理(webpack 原生不支持的文件类型,则通过 loader 来实现)。module组成了chunk。
ACK
2020/02/08
1.7K0
由浅至深了解webpack异步加载背后的原理
webpack模块化的原理
在webpack中既可以书写commonjs模块也可以书写es模块,而且不用考虑浏览器的兼容性问题,我们来分析一下原理。
gogo2027
2022/10/31
5560
Vue系列- - -Webpack深度讲解
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
叶秋学长
2022/10/31
6120
Vue系列- - -Webpack深度讲解
《Webpack实战 入门、进阶与调优(第2版)》- 第一章 webpack简介之打包代码分析
用户6256742
2024/06/22
2340
【webpack】流行的前端模块化工具webpack初探
从开发文件到生产文件 有一天我突然意识到一个问题,在使用react框架搭建应用时,我使用到了sass/less,JSX模版以及ES6的语法在编辑器下进行开发,使用这些写法是可以提高开发的效率。可是浏览
啦啦啦321
2018/01/03
1.2K0
【webpack】流行的前端模块化工具webpack初探
1. 构建前后产物对比分析webpack做了些什么?
通过一个demo带你深入进入webpack@4.46.0源码的世界,分析构建原理,专栏地址,共有十篇。
tinyant
2022/11/16
9230
1. 构建前后产物对比分析webpack做了些什么?
模块化的一些小研究0.前言1.script标签引入2.AMD与CMD3.CommonJS与ES64.循环依赖5.webpack是如何处理模块化的
我们知道最常见的模块化方案有CommonJS、AMD、CMD、ES6,AMD规范一般用于浏览器,异步的,因为模块加载是异步的,js解释是同步的,所以有时候导致依赖还没加载完毕,同步的代码运行结束;CommonJS规范一般用于服务端,同步的,因为在服务器端所有文件都存储在本地的硬盘上,传输速率快而且稳定。
lhyt
2018/10/31
1.3K0
如何实现自己的webpack
webpack是一个工具,是一个致力于做前端构建的工具。简单的理解:webpack就是一个模块打包机器,它可以将前端的js代码(不管ES6/ES7)、引用的css资源、图片资源、字体资源等各种资源进行打包整合,最后按照预设规则输出到一个或多个js模块文件中,并且可以做到兼容浏览器运行。图1-1是一个经典的阐述webpack是什么的一张官方图。
丁涛
2019/08/29
2.4K1
如何实现自己的webpack
webpack打包出来的文件都是啥
删除掉没用到的 __webpack_require__.d、__webpack_require__.r、 __webpack_require__.t、__webpack_require__.n 、__webpack_require__.o 、 __webpack_require__.p,剩下的代码如下:
用户1515472
2019/07/24
1.3K0
webpack4.x常用配置
yarn init -y yarn add webpack webpack-cli -D
FinGet
2020/01/13
2K0
webpack4.x常用配置
相关推荐
webpack 学习小结
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档