创建入口文件 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. mysql 执行计划查看

    使用explain关键字可以模拟优化器执行SQL查询语句,从而知道MySQL是如何处理你的SQL语句的,分析你的查询语句或是表结构的性能瓶颈.explain执行计划包含的信息 其中最重要的字段为:id ...

  2. LinkedHashMap与HashMap的使用比较

    现在由于项目需要,使用了LinkedHashMap,一开始由于很少用到Map,然后就直接使用了HashMap,在将数据成功存入之后取出来就出了问题,数据输出顺序没有按预期顺序输出,现在先看代码: 文件 ...

  3. bootstrapValidator JS修改内容无法验证

    需求: form表单输入中有坐标,坐标可以输入也可以从地图中获取,验证插件使用的是 bootstrapValidator 问题: 当输入错误的值时会触发验证,有错误提示.当在地图上选择坐标,通过js修 ...

  4. iOS多线程编程原理及实践

    摘要:iOS开发中,开发者不仅要做好iOS的内存管理,而且如果你的iOS涉及多线程,那你也必须了解iOS编程中对多线程的限制,iOS主线程的堆栈大小为1M,其它线程均为512KB,且这个限制开发者是无 ...

  5. echarts设置柱状图颜色渐变及柱状图粗细大小

    series: [ { name: '值', type: 'bar', stack: '总量', //设置柱状图大小 barWidth : 20, //设置柱状图渐变颜色 itemStyle: { n ...

  6. 斯坦福算法分析和设计_2. 排序算法MergeSort

      Motivate MergeSort是个相对古老的算法了,为什么现在我们还要讨论这么古老的东西呢?有几个原因: 它虽然年龄很大了,但是在实践中一直被沿用,仍然是很多程序库中的标准算法之一. 实现它 ...

  7. AWS、阿里云、Azure、Google Cloud、华为云、腾讯云 各种云服务器价格收费对比(上)

    他来了,他来了~ 他带着六家公有云厂商的资源价格走来了~ 不久前,我们上线了一款小工具——[多云成本计算器]1.0版,公众号菜单栏可以直接体验.详细介绍可以戳这里<3秒即得最低价,速石上线「多云 ...

  8. 小程序中的pick

    picker:从底部弹起的滚动选择器. 属性:model  string类型  说明:选择器类型 : selector  普通选择器 multiSelector   多列选择器 time   时间选择 ...

  9. DbCommand :执行超时已过期。完成操作之前已超时或服务器未响应。

    问题:“Timeout 时间已到.在操作完成之前超时时间已过或服务器未响应.”的解决方法 在一个链接数据库的时候,老是出现超时的错误:执行超时已过期.完成操作之前已超时或服务器未响应. 就是给这个链接 ...

  10. Java动态编译技术原理

    这里介绍Java动态编译技术原理! 编译,一般来说就是将源代码转换成机器码的过程,比如在C语言中中,将C语言源代码编译成a.out,,但是在Java中的理解可能有点不同,编译指的是将java 源代码转 ...