打包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. 在React旧项目中安装并使用TypeScript的实践

    前言 本篇文章默认您大概了解什么是TypeScript,主要讲解如何在React旧项目中安装并使用TypeScript. 写这个的目的主要是网上关于TypeScript这块的讲解虽然很多,但都是一些语 ...

  2. 一文带你深入了解 redis 复制技术及主从架构

    主从架构可以说是互联网必备的架构了,第一是为了保证服务的高可用,第二是为了实现读写分离,你可能熟悉我们常用的 MySQL 数据库的主从架构,对于我们 redis 来说也不意外,redis 数据库也有各 ...

  3. Electron存储简单数据和用户首选项推荐用electron-store

    electron-store1可以用来保存Electron应用程序或模块的简单数据持久性-保存和加载用户首选项,应用程序状态,缓存等. 1https://github.com/sindresorhus ...

  4. win10 下安装zookeeper+Kafka 的详细步骤(2)

    Win10 下要使用Kafka需要经过以下三个步骤: 1.安装JDK(需要安装依赖java JDK) 2.安装zookeeper(资源协调,分配管理) 3.使用Kafka开发 ============ ...

  5. Slickflow.Graph 开源工作流引擎快速入门之四: 图形编码建模工具使用手册

    前言: 业务人员绘制流程时,通常使用图形GUI界面交互操作来完成,然而对于需要频繁操作或者管理较多流程的系统管理用户,就需要一款辅助工具,来帮助他们快速完成流程的创建和编辑更新.Slickflow.G ...

  6. 使用WireMock进行更好的集成测试

    无论您是遵循传统的测试金字塔还是采用诸如"测试蜂窝"这样的较新方法,都应该在开发过程中的某个时候开始编写集成测试用例. 您可以编写不同类型的集成测试.从持久性测试开始,您可以检查组 ...

  7. centos7 安装wps

    # cat /etc/redhat-release CentOS Linux release 7.6.1810 (Core) # cat /proc/version Linux version 3.1 ...

  8. Thinkphp5——数据库表名的大小写问题

    ThinkPHP5中数据库的表名如果是驼峰命名法,会被转换成小写加下划线,解决方法如下: 1.表名全部小写,因为数据库的表名区分大小写的. 2.使用Db::table("表名"), ...

  9. Android实现图片一边的三角形边框

    在每一个图片的某一侧都可以展示出一个三角形的边框视图,就是咱们的三角形标签视图.这个视图在电商类APP当中比较常用,使用过ebay的同学应该都还记得有些商品的左上角或者右上角都会显示一个三角形的边框, ...

  10. ruby传参之引用类型

    ruby是完全面向对象语言,所有的变量所储存的,其实是对象的引用. 所以ruby方法的参数,也都是引用类型.即使是基本的类型,比如布尔,整数,小数等,也是一样. class MyObject attr ...