创建入口文件 app.js

// es6 module 规范
import sum_d from './sum.js'
import {sum_e} from './sum.js' // commcon js 规范
var minus = require('./minus.js') console.log('sum_d(4,6)= ', sum_d(4,6))
console.log('sum_e(9,3)= ', sum_e(9,3)) console.log('minus(8,2)= ', minus(8,2))

方法一: es6 module 规范
/* sum.js */
export default function (a, b) {
return a + b
} // import 导入时要加 {name} name为 export name
export function sum_e (a, b) {
return a + b
}

方法二:commcon js 规范
/* minus.js */
module.exports = function(a, b) {
return a -b
}

执行 Webpack 命令打包 webpack <entry> [<entry>] <output>(webpack 4+ 后不支持了

webpack app.js bundle.js

呃呃呃额额

打包 ERROR in Entry module not found: Error: Can't resolve 'app.js' in  The 'mode' option has not been set,错误提示

查了一下官方文档才得知,webpack的打包cli命令已经更改:
webpack <entry> [<entry>] -o <output>

webpack app.js -o bundle.js

打包成功,得到了 bundle.js啦

使用 node 执行 bundle.js

Webpack 一,打包JS的更多相关文章

  1. 前端工程化-webpack(打包JS)(二)

    一.第一种打包方式 webpack entry<entry> output 假设目录结构如下: index.html是入口文件 打包app.js为bundle.js如下 app.js 当使 ...

  2. webpack提取公共js代码

    webpack打包js代码与提取公共js代码分析 webpack提取公共js代码示例 一.分析 webpack默认打包js代码时,是将从入口js模块开始,将入口js模块所依赖的js以及模块逐层依赖的模 ...

  3. 总结Vue第三天:模块化和webpack模块化打包:

    总结Vue第三天:模块化和webpack模块化打包: 一.❀ 模块化 [导入import-----导出export] 1.为什么需要模块化? JavaScript 发展初期,代码简单地堆积在一起,只要 ...

  4. Vue.js中用webpack合并打包多个组件并实现按需加载

    对于现在前端插件的频繁更新,所以多多少少要对组件化有点了解,下面这篇文章主要给大家介绍了在Vue.js中用webpack合并打包多个组件并实现按需加载的相关资料,需要的朋友可以参考下.   前言 随着 ...

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

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

  6. webpack学习3.1由浅入深-打包JS

    打包JS Step1:在新建的文件夹下新建一个sum.js文件,一个app.js文件 sum.js //es module export default function(a,b){ return a ...

  7. webpac4k运行webpack .\src\main.js .\dist\bundle.js打包出错

    打包的命令格式:webpack 要打包的文件的路径  打包好的输出文件的路径 运行webpack .\src\main.js .\dist\bundle.js 提示错误,错误信息如下: WARNING ...

  8. webpack打包js,css和图片

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

  9. webpack 单独打包指定JS文件

    背景 最近接到一个需求,因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改.因此,需要用webpack单独打包指定文件. CommonsChun ...

随机推荐

  1. 机器学习之路--Matplotlib

    1.绘制折线图 在pandas里面有一种数据类型为datatime ,可以将不规范的日期改为:xxxx-xx-xx import pandas as pd import numpy as np a = ...

  2. 「洛谷P1343」地震逃生 解题报告

    P1343 地震逃生 题目描述 汶川地震发生时,四川XX中学正在上课,一看地震发生,老师们立刻带领x名学生逃跑,整个学校可以抽象地看成一个有向图,图中有n个点,m条边.1号点为教室,n号点为安全地带, ...

  3. 东拼西凑完成一个“前端框架”(5) - Tabs操作

    目录 东拼西凑完成一个后台 "前端框架" (1) - 布局 东拼西凑完成一个后台 "前端框架" (2) - 字体图标 东拼西凑完成一个"前端框架&qu ...

  4. 在Mac/linux上查找(并终止)进程锁定特定端口的几种方法

    前言  无论是做网站还是做产品,经常使用到杀死某个进程的方法.制作脚本并熟悉运用是一个非常节省时间的方法. 基本命令  查找: [sudo] lsof -i :3000  杀戮 kill -9 方法一 ...

  5. Java小项目之:五子棋,你下棋下得过电脑吗?

    Java小项目之:五子棋,你下棋下得过电脑吗? Java五子棋功能要求: 1.创建窗口和设计一个棋盘界面 2.实现鼠标点击,棋子出现,黑白棋轮流下 3.能够判断五子相连输赢 4.添加重新开始,悔棋,退 ...

  6. 【转】HTML5+WebGL:构建 3D 网页新世界

    今年下半年, HTML5 和 WebGL 变成极热门词语,3D 网页来势汹汹.主流的浏览器 Google Chrome 以及 Mozilla Firefox 均致力于 HTML5+WebGL 的 3D ...

  7. Linux之shell编程的基本使用

    1.Shell shell是一个命令行解释器,它为用户提供了一个向 Linux 内核发送请求以便运行程序的系统级程序 2.shell编程打印hello world 2.1 代码部分 #!/bin/ba ...

  8. ThreadLocal = 本地线程?

    一.定义 ThreadLocal是JDK包提供的,从名字来看,ThreadLocal意思就是本地线程的意思. 1.1 是什么? 要想知道他是个啥,我们看看ThreadLocal的源码(基于JDK 1. ...

  9. vue状态管理vuex从浅入深详细讲解

    1.vuex简介以及创建一个简单的仓库 vuex是专门为vue框架而设计出的一个公共数据管理框架,任何组件都可以通过状态管理仓库数据沟通,也可以统一从仓库获取数据,在比较大型的应用中,数据交互庞大的情 ...

  10. pandas操作mysql从放弃到入门

    目录 相关帮助文档 一.如何读取数据库-read_sql 二.如何筛选数据 三.如何连表-merge 四.如何删除一行或一列-drop 五.如何分组统计-groupyby 六.如何排序-sort_va ...