打包JS

Step1:在新建的文件夹下新建一个sum.js文件,一个app.js文件

sum.js

//es module
export default function(a,b){
return a+b;
}

minus.js

//CommmonJS
module.export = function(a,b){
return a+b
}

app.js引入sum模块

//es module
import sum from './sum'
//commonJS
var minus = require('./minus') console.log('sum(23,24) =' , sum(23,24));

打包运行,app.js是需要打包的函数,而bundle.js是打包之后生成模块的文件,webpack 版本更改后有一点不一样(后续更新)

webpack app.js bundle.js

webpack学习3.1由浅入深-打包JS的更多相关文章

  1. webpack学习(六)打包压缩js和css

    打包压缩js与css 由于webpack本身集成了UglifyJS插件(webpack.optimize.UglifyJsPlugin)来完成对JS与CSS的压缩混淆,无需引用额外的插件, 其命令we ...

  2. webpack学习(七)打包压缩图片

    使用插件webpack-spritesmith生成雪碧图 1.安装webpack-spritesmith:npm install --save-dev webpack-spritesmith 2.配置 ...

  3. webpack学习2.1 模块化开发(JS模块化&CSS模块化)

    一.JS模块化 命名空间,COMMONJS,AMD/CMD/UMD,ES6 module 1.什么是命名空间 库名.类别名.方法名 弊端:在命名空间重复生命,要记住完整的路径名(而且很长) var N ...

  4. 简单学习【1】——打包JS

    webpack entry <entry> output webpack --config webpack.conf.js Step1:新建一个文件,里面有一个app.js 一个sum.j ...

  5. webpack学习(一)安装和命令行、一次js/css的打包体验及不同版本错误

    一.前言 找了一个视频教程开始学习webpack,跟着视频学习,在自己的实际操作中发现,出现了很多问题.基本上都是因为版本的原因而导致,自己看的视频是基于webpack 1.x版,而自己现在早已是we ...

  6. webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件

    一 .webpack学习环境准备: 1:window系统 2:安装node.js  官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...

  7. 使用webpack打包js文件(隔行变色案例)

    使用webpack打包js文件(隔行变色案例) 1.webpack安装的两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令 在项目根目录中运行 ...

  8. 配置webpack中externals来减少打包后vendor.js的体积

    在日常的项目开发中,我们会用到各种第三方库来提高效率,但随之带来的问题就是打包后的vendor.js体积过大,导致加载时空白页时间过长,给用户的体验太差.为此我们需要减少vendor.js的体积,从本 ...

  9. webpack打包js,css和图片

    1.webpack打包默认配置文件webpack.config.js 2.打包js文件:有这个文件并配置可以直接在cmd上webpack打包,没有这个文件要在cmd上输入 webpack main.j ...

随机推荐

  1. beta week 2/2 Scrum立会报告+燃尽图 01

    此作业要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/9954 一.小组情况 队名:扛把子 组长:孙晓宇 组员:宋晓丽 梁梦瑶 韩昊 ...

  2. 胜利点组——“萌猿填词”微信小程序评价

    此作业要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/9860 1.根据(不限于)NABCD评论作品的选题; (1).你的创意解决了 ...

  3. 设计模式之美学习(九):业务开发常用的基于贫血模型的MVC架构违背OOP吗?

    我们都知道,很多业务系统都是基于 MVC 三层架构来开发的.实际上,更确切点讲,这是一种基于贫血模型的 MVC 三层架构开发模式. 虽然这种开发模式已经成为标准的 Web 项目的开发模式,但它却违反了 ...

  4. 2019/12/1 智能硬件实验室(ROS方向)

    浅谈安装ubuntu与ros感想 ubuntu 以前看电脑软件安装管家上的教程尝试在另一台电脑上安装ubuntu(虚拟机上),但是后面遇到了无法解决的问题,放弃了.这次因为选的ros方向,所以昨天在学 ...

  5. SpringMVC 前端传递list到后台

    ---恢复内容开始--- 1.前端获取传入后台的list 2.ajax写法: $.ajax({ type: 'post', url: url, async:false, dataType:" ...

  6. fsockopen以Socket方式模拟HTTP下载文件

    fsockopen 的功能很强大,比如前面模拟 HTTP 访问,模拟 POST/GET 请求,什么的,这里再举一个例子,那就是下载东西.比如下载 http://www.nowamagic.net//l ...

  7. 生成n个随机数,要求n个数的和等于100

    // 生成n个随机数,要求n个数的和等于100 function lessANumber(n, v) { var i, s = 0, r = [], x = v; for (i = 1; i < ...

  8. 下一代容器架构已出,Docker何去何处?看看这里的6问6答!!

    我猜很多人一看这个标题已经感觉很懵逼了,什么?下一代容器都出来了,我还没学Docker呢!!! 咳咳~~在这里我给大家做一个保证,下一代容器目前也只是各个公司在测试阶段,Github上面也有很多Iss ...

  9. NoSql中的CAP原则

    C:一致性 .A:可用性.P:分区容错性 Partition tolerance(分区容错性): 大多数分布式系统都分布在多个子网络.每个子网络就叫做一个区(partition).分区容错的意思是,区 ...

  10. 转:Spring事务管理

    spring是SSH中的管理员,负责管理其它框架,协调各个部分的工作.今天一起学习一下Spring的事务管理.Spring配置文件中关于事务配置总是由三个组成部分,分别是DataSource.Tran ...