Webpack 一,打包JS
创建入口文件 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的更多相关文章
- 前端工程化-webpack(打包JS)(二)
一.第一种打包方式 webpack entry<entry> output 假设目录结构如下: index.html是入口文件 打包app.js为bundle.js如下 app.js 当使 ...
- webpack提取公共js代码
webpack打包js代码与提取公共js代码分析 webpack提取公共js代码示例 一.分析 webpack默认打包js代码时,是将从入口js模块开始,将入口js模块所依赖的js以及模块逐层依赖的模 ...
- 总结Vue第三天:模块化和webpack模块化打包:
总结Vue第三天:模块化和webpack模块化打包: 一.❀ 模块化 [导入import-----导出export] 1.为什么需要模块化? JavaScript 发展初期,代码简单地堆积在一起,只要 ...
- Vue.js中用webpack合并打包多个组件并实现按需加载
对于现在前端插件的频繁更新,所以多多少少要对组件化有点了解,下面这篇文章主要给大家介绍了在Vue.js中用webpack合并打包多个组件并实现按需加载的相关资料,需要的朋友可以参考下. 前言 随着 ...
- 使用webpack打包js文件(隔行变色案例)
使用webpack打包js文件(隔行变色案例) 1.webpack安装的两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令 在项目根目录中运行 ...
- webpack学习3.1由浅入深-打包JS
打包JS Step1:在新建的文件夹下新建一个sum.js文件,一个app.js文件 sum.js //es module export default function(a,b){ return a ...
- webpac4k运行webpack .\src\main.js .\dist\bundle.js打包出错
打包的命令格式:webpack 要打包的文件的路径 打包好的输出文件的路径 运行webpack .\src\main.js .\dist\bundle.js 提示错误,错误信息如下: WARNING ...
- webpack打包js,css和图片
1.webpack打包默认配置文件webpack.config.js 2.打包js文件:有这个文件并配置可以直接在cmd上webpack打包,没有这个文件要在cmd上输入 webpack main.j ...
- webpack 单独打包指定JS文件
背景 最近接到一个需求,因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改.因此,需要用webpack单独打包指定文件. CommonsChun ...
随机推荐
- Intellij IDEA2019.1.3破解
下载 JetbrainsCrack.jar(链接:https://pan.baidu.com/s/1Dkw1PruzBlEMjcYszNlSZA 提取码:2bf7),放到bin目录下(其实位置可以随便 ...
- Spring中常见的设计模式——模板模式
一.模板模式的应用场景 模板模式又叫模板方法模式(Template Method Pattern),指定义一个算法的骨架,并允许自雷为一个或者多个步骤提供实现.模板模式使得子类可以在不改变算法结果的情 ...
- Deepin Linux 实体机安装
Deepin Linux 实体机安装 1.下载ISO镜像并刻录到U盘上 系统ISO镜像下载 深度技术 刻录工具下载 深度技术(下方有深度启动盘制作工具下载) 这两个都下载好之后,打开刻录工具,选择镜像 ...
- Vim的环境设定与记录
vim 会主动将曾经做过的行为记录下来,记录在文件 ~/.viminfo,好方便下次作业. 更改 /etc/vimrc配置操作环境 vim的环境设定参数 :set nu :set nonu 设 ...
- python 作用域,global与nonlocal的区别
在Python中并不是所有的语句块中都会产生作用域.只有当变量在Module(模块).Class(类).def(函数)中定义的时候,才会有作用域的概念. 如果在函数中要对全局变量做改变可以使用glob ...
- java面试题-集合类
准备年后要跳槽,所以最近一直再看面试题,并且把收集到的面试题整理了以下发到博客上,希望对大家有所帮助. 首先是集合类的面试题 1. HashMap 排序题,上机题. 已知一个 HashMap< ...
- 秦皇岛 I 题
有 n 个数字,你可以挑选其中任意个数字代表一个背包的体积,其余的数字表示的物品的体积,所挑选的背包必选完全装满,询问最终的方案数 思路分析 : 定义dp[i] 表示挑选 i 状态下的物品的方案数,f ...
- CheckStyle报错的常见问题及解决方式
CheckStyle报错的常见问题及解决方式 声明: 本文摘自百度文库.希望这篇文章提到的规范能对大家编程起到好的效果,此文不定期更新,将推出更加详尽的编程规范. 1 提示:Type is mis ...
- 对标Eureka的AP一致性,Nacos如何实现Raft算法
一.快速了解Raft算法 Raft 适用于一个管理日志一致性的协议,相比于 Paxos 协议 Raft 更易于理解和去实现它. 为了提高理解性,Raft 将一致性算法分为了几个部分,包括领导选取(le ...
- Nginx作为负载均衡——实战演练
配置语法 Syntax:upstream name {...} Default:—— Context:http 演示 准备两台虚拟主机192.168.96.188.192.168.96.188 在18 ...