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 ...
随机推荐
- MariaDB——数据库集群
Mariadb数据库集群 mariadb主从 主从多用于网站架构,因为主从的同步机制是异步的,数据的同步有一定的延迟性,也就是说可能会导致数据丢失,但是性能比较好,因此网站大多数 用的是主从架构的数据 ...
- jQuery父级以及同级元素查找的实例
父级以及同级元素的查找在使用过程中还是蛮频繁的,下面为大家介绍下jQuery是如何实现的,感兴趣的朋友可以参考下 jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$( ...
- mysql dump 完全备
创建表: MariaDB [xuegod]> create database xuegod; MariaDB [xuegod]> use xuegod; MariaDB [xuegod]& ...
- Java中很少用的CopyOnWriteArrayList
类注释 /** * A thread-safe variant of {@link java.util.ArrayList} in which all mutative * operations ({ ...
- 二十二 动态代理&解决网站的字符集编码问题
设计模式: 软件开发过程中,遇到相似问题,将问题的解决方式抽取模型(套路) 单例,工厂,装饰者,适配器,动态代理 谷歌汽车场景: 谷歌汽车场景Car Interface Icar{ start r ...
- Django博客开发-数据建模与样式设定
开发流程介绍 之前Django的学习过程当中已经把基本Django开发学完了,现在以Django 的博客项目完成一遍课程的回顾和总结.同时来一次完整开发的Django体验. 一个产品从研究到编码我们要 ...
- Redar Chart_Study
1.Select a theme 2.Experiment with visual customization 3.Edit groups and categories 4.Creat a scrip ...
- C++Review15_内存管理
一.野指针 定义指针变量时最好初始化为NULL: 内存回收后,指针也用完了,这时候也需要及时将指针置为NULL: 指针就像野狗一样,为了防止它乱指,除了在使用期间,别的时候都需要置为NULL.这样它就 ...
- STM32F103 USB虚拟串口 驱动例程移植
1)驱动下载及安装.目前ST公司支持WIN7版本号为:VCP_V1.3.1_Setup.exe (在官网上搜索stsw-stm32102即是了):先安装驱动后再插入USB不然安装不成功. 2)固件下载 ...
- MySQL 中的数据库名称、数据表名称、字段名称
如何查询Oracle,Sql Server,MySQL 中的数据库名称.数据表名称.字段名称 分类: Database2012-09-24 22:16 7034人阅读 评论(0) 收藏 举报 数据库s ...