第一个webpack例子demo1
1、运行webpack 在当前目录 管理员CMD下运行命令 :
webpack
PS： 只有安装webpack时才必须在管理员环境下运行，如今使用可以随便
问题1：
运行中会遇报错：
错误分析：
HTML 网页中，浏览器通过 script 标签加载 JavaScript 脚本。由于浏览器脚本的默认语言是 JavaScript，因此type="application/javascript"可以省略。在报错中了解到，是说无法在模块外部使用import语句，因为Module 的加载实现的是es6语法，所以在浏览器加载html文件时，需要在script 标签中加入type="module"属性。
解决办法：
问题2：
错误分析 ：是因为这样引入问题
解决：
改成这样就好使用，不知为何，之前是可以省去.js的
----------------------------------------------------------------------------------
demo代码如下：
目录：
buld 是运行webpack自动生成的
mod1.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>mod1</title>
</head>
<body>
<!--这里不需要./ 因为这不是nodejs，因为这是html给浏览器看的，浏览器没这要求 -->
<script type="module" src="js/index.js"></script>
</body>
</html>
webpack一次后当自动生成buld/bundle.js后这里可以改成这样，就会解决问题1和问题2的问题，不需要加type="module" 和
可写成：import * as mod1 from './mod1';
<script src="buld/bundle.js"></script>
index.js
/*
引入mod1.js中export的内容，引入用import
* 引入所有
./ 用webpack就必须写，当前文件（按ES6本身标准可以不写）但现在用webpack编译，webpack是nodejs写的要遵循nodejs约定，也就是说./是nodejs的规定，
as,把所有的成员都引过来取一个共同的名字叫mod1,从当前目录下mod1.js取
./mod1 默认./mod1.js 都是JS文件
*/
//前边加载时<script src="buld/bundle.js"></script> 这是就是对了，写成js/index.js就加上mod1.js
import * as mod1 from './mod1;
console.log(mod1.a,mod1.b)
如果输出c，结果会是undefined,因为c没加export，加上就可以输出了
mod1.js
// 只定义不输出在其它地方是用不了的
export let a= 12;
export let b= 5;
let c = 6;
等价于：
let a= 12;
let b= 5;
let c = 6;
export {a,b}
webpack.config.js
const path = require('path');
// 需要对外输出json ——>{},CMD写法主要给nodejs看nodejs遵循CMD，
module.exports = {
// 编译模式,生产模式(production),调试模式(development)
mode:'development',
//入口，并不是目录下上千个JS文件全部编译，需指定一个或多个入口，以这个作为起点来编译，用到谁编译谁，用不到的不编译；
// 此处需要编译的文件index.js [有export(导出可编译),用webpack加./ nodejs要求]
entry:'./js/index.js',
/*
* 1、output 出口 ,必须是{},并且至少要包含两个项目
* path:放到哪去。可以是当前目录的buiid下(path:'./build');
* 一般情况下(90%)使用绝对路径更容易一些不会被坑，这里需要引入nodejs里的包叫path(帮助做路径上的操作)
* 就是 :const path = resolve(_dirname，'build');(可以把路径解析成绝对路径)
* (2)filename:文件名叫什么,bundle翻译'捆'打包之后的名随意,
*/
output:{
path:path.resolve(__dirname,'buld'),
filename:'bundle.js'
}
};
在当前html的所在文件夹下运行webpack 即可
PS：这里每运行一次执行一次webpack
第一个webpack例子demo1的更多相关文章
- 怎样写一个webpack loader
div{display:table-cell;vertical-align:middle}#crayon-theme-info .content *{float:left}#crayon-theme- ...
- 【webpack】webpack-dev-server生猛上手——让我们来搭一个webpack的微服务器吧！
[前言]:因为最近在搞百度地图API的时候到了webpack的externals,才发现我之前都只是用webpack做一些搭建完项目后的"收尾工作"--即打包,而没有把它纳入到 ...
- 搭建一个webpack微服务器
[前言]:因为最近在vue2.0的时候用到了webpack的externals,才发现我之前都只是用webpack做一些搭建完项目后的“收尾工作”——即打包,而没有把它纳入到项目开发的“主体过程”中来 ...
- 手写一个webpack，看看AST怎么用
本文开始我会围绕webpack和babel写一系列的工程化文章,这两个工具我虽然天天用,但是对他们的原理理解的其实不是很深入,写这些文章的过程其实也是我深入学习的过程.由于webpack和babel的 ...
- SQL Server Reporting Service(SSRS) 第一篇 我的第一个SSRS例子
很早就知道SQL SERVER自带的报表工具SSRS,但一直没有用过,最近终于需要在工作中一展身手了,于是我特地按照自己的理解做了以下总结: 1. 安装软件结构 SSRS全称SQL Server Re ...
- 一个简单例子：贫血模型or领域模型
转:一个简单例子:贫血模型or领域模型 贫血模型 我们首先用贫血模型来实现.所谓贫血模型就是模型对象之间存在完整的关联(可能存在多余的关联),但是对象除了get和set方外外几乎就没有其它的方法,整个 ...
- java连接mysql的一个小例子
想要用java 连接数据库,需要在classpath中加上jdbc的jar包路径 在eclipse中,Project的properties里面的java build path里面添加引用 连接成功的一 ...
- java操作xml的一个小例子
最近两天公司事比较多,这两天自己主要跟xml打交道,今天更一下用java操作xml的一个小例子. 原来自己操作xml一直用这个包:xstream-1.4.2.jar.然后用注解的方式,很方便,自己只要 ...
- MVVM模式的一个小例子
使用SilverLight.WPF也有很长时间了,但是知道Binding.Command的基本用法,对于原理性的东西,一直没有深究.如果让我自己建一个MVVM模式的项目,感觉还是无从下手,最近写了一个 ...
- Lea指令计算地址（用于四则混合运算），附上一个函数调用例子及其反汇编代码，很清楚
比如你用local在栈上定义了一个局部变量LocalVar,你知道实际的指令是什么么?一般都差不多像下面的样子: push ebp mov esp, ebp sub ...
随机推荐
- 【Java EE】Day14 Servlet、HTTP、Request
一.Servlet 二.HTTP 三.Request 四.登录案例
- Day34：BigDecimal的使用
BigDecimal 在基本数据类型中对于浮点数的计算时会出现精度丢失的情况,这个时候我们采用BigDecimal类来解决精度丢失的问题. public class Test{ public stat ...
- Jenkins基本配置
1.Configure System (系统设置) 在系统设置这里,只需要设置最后面的一项,配置远程服务器地址,即代码最终运行的服务器地址信息,当然这里是可以配置多台远程Linux服务器的,配置完成后 ...
- 自定义RBAC（4）
您好,我是湘王,这是我的博客园,欢迎您来,欢迎您再来- 前面把RBAC的权限系统设计过程都讲清楚了,现在就来实现它.大致分这么几个步骤: 1.先定义出完整的权限系统表结构: 2.实现Entity.Da ...
- cs231n__5.1/5.2 CNN
CS231n note 5.1 CNN_history now: 略 5.2 CNN 上节课我们谈到了全连接层的概念: 对于全连接层而言,我们要做的就是在这些向量上进行操作. 例如: 但是至于卷积层, ...
- Windows上使用QEMU创建银河麒麟ARM64虚拟机完全手册
"好记性不如烂笔头." -- 张溥 0x00 大纲 目录 0x00 大纲 0x01 前言 0x02 物料准备 0x03 安装 QEMU 0x04 创建虚拟磁盘 0x05 安装麒麟系 ...
- python画社交网络图
安装依赖包 pip3 install networkx 在图书馆的检索系统中,关于图书的信息里面有一个是图书相关借阅关系图.跟这个社交网络图是一样的,反映了不同对象间的关联性.利用python画社交网 ...
- Ynoi 数据结构题选做
Ynoi 数据结构题选做 前言 我将成为数据结构之神!坚持 lxl 党的领导,紧随 nzhtl1477(女装灰太狼1477)的脚步.无论过去.现在还是未来,分块始终是实现 data structure ...
- Codeforces Round #569 (Div. 2)
题解 Codeforces Round #569 (Div. 2) rank:1306/11165 rate: +43 1424 → 1467 Codeforces Round #569 (Div. ...
- 网络安全之frp内网穿透
前言 内网穿透,也即 NAT 穿透,进行 NAT 穿透是为了使具有某一个特定源 IP 地址和源端口号的数据包不被 NAT 设备屏蔽而正确路由到内网主机 环境需求 一台公网服务器(linux操作系统) ...