创建入口文件 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. 基于 Blazui 的 Markdown 编辑器 Blazui.Markdown 尝鲜

    想做一个文档平台用来存放和展示 Blazui 的文档,然后基于 Markdown 写文档,但缺一个好用的 Blazor Markdown 编辑器,所以就顺便写一个了,功能上基本抄的 https://p ...

  2. 【转】python get-pip.py could not find a version that satisfies

    转:https://blog.csdn.net/yanlisuo/article/details/81357305 转:https://blog.csdn.net/dyrlovewc/article/ ...

  3. Java类成员之代码块

    代码块含义:使用{ }括起来的代码 代码块类型: 1.局部代码块:定义在方法体中. 2.构造代码块:也叫初始化代码块,定义在类中方法体之外. 3.静态代码块:定义在类中方法体之外,被static修饰符 ...

  4. C++Primer第五版 3.5.1节练习

    练习 3.27:假设txt_size是一个无参数的函数,它的返回值是int.请回答下列哪个定义是非法的?为什么? Unsigned buf_size = 1024; (a) int ia[buf_si ...

  5. cogs 647. [Youdao2010] 有道搜索框 Trie树 字典树

    647. [Youdao2010] 有道搜索框 ★☆   输入文件:youdao.in   输出文件:youdao.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述] 在有 ...

  6. Airtest入门篇

    Airtest是啥? 简单理解:基于图像识别的UI自动化测试框架 俗人理解:截图即可完成自动化测试 适用场景:游戏.APP.PC软件,支持Window.Android.IOS Airtest官方文档 ...

  7. Docker + node(koa) + nginx + mysql 开发环境搭建

    什么是Docker Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从 Apache2.0 协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然 ...

  8. Scrapy定制命令开启爬虫

    一.单爬虫运行 每次运行scrapy都要在终端输入命令太麻烦了 在项目的目录下创建manager.py(任意名称) from scrapy.cmdline import execute if __na ...

  9. redis 5种类型

    redis可以不严谨的看成: redis: { name: value, name: value, } value的数据类型: 1.字典 2.列表 3.字符串 4.集合 5.有序集合 注意: redi ...

  10. Java入门 - 高级教程 - 01.数据结构

    原文地址:http://www.work100.net/training/java-data-structure.html 更多教程:光束云 - 免费课程 数据结构 序号 文内章节 视频 1 概述 2 ...