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 ...
随机推荐
- 精易四周年限量纪念U盘(全套)
下载地址网盘:https://pan.baidu.com/s/1dFwPbiT
- layer弹出框包含页面
参考:http://www.cnblogs.com/zhengchenhui/p/6038865.html
- ADV-297 快速排序 java
问题描述 用递归来实现快速排序(quick sort)算法.快速排序算法的基本思路是:假设要对一个数组a进行排序,且a[0] = x.首先对数组中的元素进行调整,使x放在正确的位置上.同时,所有比x小 ...
- ADV-298 和谐宿舍2 动态规划
和谐宿舍2 问题描述 我的某室友学过素描,墙上有n张他的作品.这些作品都是宽度为1,高度不定的矩形,从左到右排成一排,且底边在同一水平线上. 宿舍评比就要来了,为了及格,我们决定买不多于m块的矩形木板 ...
- JDBC--PreparedStatement使用
1. PreparedStatement是Statement的子接口,可以传入传入带有占位符的SQL语句,并且提供了相应的方法来替换占位符(setXxx(int index, Object value ...
- 本地Git仓库与GitHub/GitLab仓库同步
本地仓库即为在你的电脑上的项目文件,远程仓库即为服务器仓库,如GitHub.GitLab或其他等.此处以GitHub介绍本地仓库与远程仓库的同步.可先创建本地仓库,也可先创建GitHub仓库,但都需要 ...
- VM ubuntu18.04.01虚拟机没办法联网
sudo service network-manager stop sudo rm /var/lib/NetworkManager/NetworkManager.state sudo service ...
- 吴裕雄--天生自然JAVAIO操作学习笔记:File类
import java.io.File ; import java.io.IOException ; public class FileDemo01{ public static void main( ...
- msf生成软件
生成软件后门程序的命令 win7获取 生成内网软件 启动kali上的http服务 systemctl start apache2 开始msf控制台 msfconsole 使用监听模块 并查看配置 s ...
- CCF 201703-4 地铁修建(最小生成树)
题意:A市有n个交通枢纽,其中1号和n号非常重要,为了加强运输能力,A市决定在1号到n号枢纽间修建一条地铁.地铁由很多段隧道组成,每段隧道连接两个交通枢纽.经过勘探,有m段隧道作为候选,两个交通枢纽之 ...