打包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. Install zabbix

    - name: Create dir to keep install file file: path=/opt/pacheage state=directory follow=yes force=ye ...

  2. PHP创建对象的6种方式

    创建对象实例: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 ...

  3. UDP 协议的那点事儿

    最近在回顾计算机网络的知识,以前上课没有认真学,只记得几个高大上的术语,所以趁着这次回顾,把学到的知识用博客的形式记录下来,一来加深自己的印象,二来希望让你对这些基础知识有一个更深入的了解.当然,我会 ...

  4. python3 之 趣味数学题(爱因斯坦)

    爱因斯坦曾出过这样一道有趣的数学题: 有一个长阶梯,若每步上 2 阶,最 后剩 1 阶; 若每步上 3 阶,最后剩 2 阶; 若每步上 5 阶,最后剩 4 阶; 若每步上 6 阶,最后剩 5 阶; 只 ...

  5. 关于.ssh目录下的known_hosts文件的补充

    一.关于.ssh目录下的known_hosts文件的补充 其实一开始是没有注意到的,按照网上的教程一步一步操作,并没有注意到这个文件的生成.直到有一次我试着去查询.ssh目录是否存在时,出现了下面的情 ...

  6. jquery操作css样式的方法

    jquery操作css样式的方法(设置和获取)

  7. EasyCode实现数据库到Swagger全自动化

    简介 EasyCode是基于IntelliJ IDEA开发的代码生成插件,通过自定义生成模板可以完成定制化的 Mapper Service Controller 生成,结合数据库 Comment还可以 ...

  8. 04_seaborn基本使用

    1.seaborn设置整体风格 seaborn提供5中主题风格: darkgrid whitegrid dark white ticks 主要通过set()和set_style()两个函数对整体风格进 ...

  9. NLog日志框架使用探究-2

    目录 前言 自定义参数 日志输出方式 文件 网络传输 数据库 科学使用 参考文档 前言 在一年前,我写过一篇关于NLog入门文章<NLog日志框架使用探究-1>,文章简单的介绍了Nlog的 ...

  10. Django3.0 异步通信初体验

    此前博主曾经写过一篇博文,介绍了Django3.0的新特性,其中最主要的就是加入对ASGI的支持,实现全双工的异步通信. 2019年12月2日,Django终于正式发布了3.0版本.怀着无比的期待,我 ...