webpack知识点散记
1、今天学习webpack ，刚开头就碰到了钉子，因为现在都是4+的版本，用以前的老命令不好使，如下例子及解决办法
不好用： webpack3的 打包文件 webpack a.js b.js
好用： webpack4 ：webpack --mode development a.js --output-filename b.js --out-path dist //a.js：目标文件 b.js ：要打包成的文件 dist：打包到的文件夹的名字
（1）app.js
//es
import sum from './sum' //common
var minus=require('./minus') //amd
require(['./muti.js'],function(muti){
console.log('*'+muti(2,5))
}) console.log('+'+sum(2,3))
console.log('-'+minus(5,2))
（2）sum.js
export default function (a,b){
return a+b
} （3）minus.js
module.exports=function(a,b){
return a-b
} （4）muti.js
define(function(require,factory){
'use strict';
return function(a,b){
return a*b
}
})
（5）index.html
<html>
<body>
<script src='dist/bundle.js'></script>
<script src='dist/0.bundle.js'></script>
</body>
</html>
（6）执行命令
webpack --demo development app.js --output-filename bundle.js --output-path dist
//话说webpack里要用module.exports
module.exports = {
entry:{
app:'./app.js' //入口
},
output:{
filename:'[name].[hash:5].js' //出口
}
}
文件名：webpack.conf.js
原命令：webpack --config webpack.conf.js
命令：webpack --mode development --config webpack.conf.js
文件名：webpack.config.js //如果文件夹名字是webpack.config.js 那么就不用--config + 名字了
原命令：webpack
命令：webpack --mode development
webpack知识点散记的更多相关文章
- webpack 知识点
安装 webpack npm install -g webpack npm install -g webpack-cli@2.x 初始化项目 npm init -y npm install --sav ...
- webpack 知识点总结
1 webpack 的不同点: 1.1 实现代码分割 1.2 loaders 1.3 plugin system 2 webpack 打包css,需要使用css-loaders 使webpack识别c ...
- webpack知识点整理
作用域 es6里模块化的写法 会存在的问题,变量.方法名字雷同,外部文件调用的时候出现问题 如 a.js里 var a='susan' b.js里 var a='jack' 问题解决方案,添加包裹 a ...
- vue知识点散记
1.iphone5微信浏览器里的methods里貌似不兼容 test(){} 写法,只支持test:function(){} 2.v-cloak 防止双括号的闪烁 <div id=" ...
- 深入浅出的webpack构建工具---webpack基本配置(一)
深入浅出的webpack构建工具---webpack基本配置(一) 阅读目录 一:webpack入门构建: 1. 安装webpack到全局 2. 安装webpack到本项目. 3. 如何使用webpa ...
- 深入理解webpack基本配置（一）
1. 安装webpack到全局 在学习构建之前,我们来在本地文件新建一个存放项目的文件夹,比如叫demo1这个项目,然后进入demo1该项目的根目录后,执行命令 npm init运行下,一路回车(先简 ...
- 深入了解webpack前，可以了解的小知识点。
阅读前:文章大概是写,简单用过webpack,想继续深入了解webpack前需要了解的知识.但文章内容跟webpack使用关系并不大. 文章概要: Object.defineProperty call ...
- webpack散记
1. manifest manifest存储了webpack的chunk相关的信息.具体为一个对象,或者包含runtime的一段代码.其中包含着一个chunkId,已经对应chunkId的相关信息,例 ...
- webpack 4 基础知识点梳理
目录 webpack安装 webpack配置文件 webpack核心概念 entry output loader plugins sourceMap webpack-dev-server 跨域 &am ...
随机推荐
- 为安卓手机刷上手机kali系统Nethunter
kali Nethunter是一个装在手机上的kali,集成了kali的工具包,hid,无线攻击等等. 本文主要叙述如何安装此系统并正确的配置.不让你走弯路. 首先我们拒绝傻瓜安装软件 kali ne ...
- 初学JQuery
JQuery是对JavaScript的封装,简化了JS代码,是主流框架的基础(VUE,EasyUI,Bootstrap) 它是2006年推出的 JQuery的优势:体积小,压缩后只有100KB左右强大 ...
- ZCGL大数据平台日常运维问题与解决方法
问题:HBase停止 解决方法:重新启动HBase,如下所示 表层问题:插入和查询HBase速度比较慢 排查一,查看HBase节点状态,发现正常运行: 排查二,查看访问HBase服务的状态,发现服务停 ...
- 「CF5E」Bindian Signalizing
传送门 Luogu 解题思路 很显然的一点,任何一条可能成为路径的圆弧都不可能经过最高的点,除非这条路径全是最高点. 所以我们先把最大值抠掉,把剩下的按原来的顺序排好. 从前往后.从后往前扫两次,用单 ...
- 隐患写法flag.equals("true")带来的空指针异常
分类:2008-06-04 12:47 467人阅读 评论(0) 收藏 举报 linuxjava测试 昨天,有同事A对同事B写的程序进行测试时,出现错误,看控制台信息,发现抛出了空指针异常. 调查结果 ...
- 2018--Linux面试题
1.企业场景面试题:buffer与Cache的区别. 2.企业场景面试题:redhat与CentOS的区别. 3.企业场景面试题: 描述RAID 0 1 5 10的特点. 4.企业场景面试题:32位 ...
- maze-----攻防世界
题目下载之后在linux上查看一下 发现是elf文件尝试运行一下: 要求输入正确的flag才可以,ida查看 交叉引用 对长度和开头对比,进行判断. 转到400690查看 和#进行比较,hex 是一个 ...
- 有没有比NRF51822更好的智能穿戴蓝牙方案
现在在智能穿戴领域市场不断的追求低功耗.低成本的蓝牙芯片.蓝牙芯片目前除了Dialog公司研制蓝牙芯片是最求超低功耗的但是对于其它性能上还比较满足不了其它领域的功能,另外NORDIC.TI的蓝牙芯片虽 ...
- 解题报告：luogu P3853 [TJOI2007]路标设置
题目链接:P3853 [TJOI2007]路标设置 是个水二分,那你还\(WA\).很简单,就是练了练和早上那题相似的题. 二分答案即可,复杂度\(O(Nlogl)\),可以通过本题. 不过,需要注意 ...
- 015.Delphi插件之QPlugins，FMX插件窗口
内嵌FMX的插件窗口,效果还是很可以的.退出时,会报错,很诡异啊. 主窗口代码如下 unit Frm_Main; interface uses Winapi.Windows, Winapi.Messa ...