创建入口文件 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. 还看不懂同事代码?快来补一波 Java 7 语法特性

    前言 Java 平台自出现到目前为止,已经 20 多个年头了,这 20 多年间 Java 也一直作为最流行的程序设计语言之一,不断面临着其他新兴编程语言的挑战与冲击.Java 语言是一种静态强类型语言 ...

  2. 单机Web后端接口服务压力测试

    单机Web后端接口服务压力测试 工具:Apache jmeter 环境:Window 10 语言:Kotlin + java 架构:SpringBoot + + Mysql + redis + Spr ...

  3. PTC热敏电阻的应用

      PTC热敏电阻应用举例 PTC热敏电阻可用于计算机及其外部设备.移动电话.电池组.远程通讯和网络装备.变压器.工业控制设备.汽车及其它电子产品中,作为开关类的PTC陶瓷元件,具有开发功能.使电器设 ...

  4. js中排序方法sort() 和 reverse()

    reverse() 作用:反转原数组. 用法: array.reverse(); 图解: sort() 作用:对原数组进行排序.默认将每个数组项 先 转换为字符串 再 进行字符串对比后升序排序. 用法 ...

  5. python字典的遍历

    遍历字典: keys()  .values() .items() 1. xxx.keys()    :    返回字典的所有的key     返回一个序列,序列中保存有字典的所有的键 效果图: 代码: ...

  6. axios全局引用

    在vue项目开发中,我们使用axios进行ajax请求,很多人一开始使用axios的方式,会当成vue-resoure的使用方式来用,即在主入口文件引入import VueResource from ...

  7. Python中函数参数 *args 和 **kwargs

    普通参数,即在调用函数时必须按照准确的顺序来进行参数传递. 默认参数,即参数含有默认值,在调用函数时可以进行参数传递,若没有进行参数传递则使用默认值,要注意,默认参数必须在普通参数的右侧(否则解释器无 ...

  8. mysql时间类型和格式转换

    内容目录 简介mysql时间类型DATE_FORMAT()函数 简介 今天开发中,做一个功能需要对历史数据进行补充,相信大家也遇到过这样的情况,这个历史数据需要按月份和人的id进行区分,于是想到了my ...

  9. 【UWP】使用 LiteDB 存储数据

    序言: 在 UWP 中,常见的存储数据方式基本上就两种.第一种方案是 UWP 框架提供的 ApplicationData Settings 这一系列的方法,适用于存放比较轻量的数据,例如存个 Bool ...

  10. springcloud初次zuul超时报错com.netflix.zuul.exception.ZuulException:Forwarding error

    报错如下 com.netflix.zuul.exception.ZuulException:Forwarding error Caused by: com.netflix.hystrix.except ...