webpack打包es6代码
1、简单描述一下es6的模块导入和导出的语法:
//导出:
export var aa = 10;
export function demo(){}
//不能写成:
var aa = 10;
export aa;
或者export 10;
可以写成:
var aa = 10;
export {aa};
//可以导出的时候命名:
var aa = 10;
export {exname as aa} // 将aa导出为exname import的时候需要按该名称导入
// 使用 默认导出
export default {} // 这样外部就不用指定{name1,name2 ...} 而是直接使用下面语法
import xxxx from ""; // 否则必须指定{name1,name2,.....}的语法形式。
// 导入
import {name1,name2,....} from "" 的形式导入 这是标准语法
import xxx from "" // 必须是默认导出
import * as xxx from "" // 表示全部导出
import()函数的使用(按需加载)
import()返回一个Promise对象。
使用then来触发加载,并传入回调函数。
例子:
本来只是指定了按需加载,发现其多生成了一个资源 “0.js”,目测应该是编号的。
上述截图中由于show=false,所以并未加载该模块的js代码。
但是往上看,show=true的时候确实加载了js代码。
2、如何使webpack能够识别es6语法并进行打包呢?
首先:需要安装对应的loader
npm install babel-core babel-loader babel-plugin-transform-runtime -D // 用于转换的包
npm install babel-preset-env babel-preset-stage-0 -D // 转换的规则
具体配置如下:
module:{
rules : [
{
test : /\.css$/,
use : [
"style-loader",
"css-loader"
]
},
{
test : /\.(jpg|png|gif|bmp|jpeg)$/,
use : [
"file-loader",
"url-loader?limit=10&name=[name].[ext]"
]
},
{
test : "/\.js$/",
use : [
"babel-loader"
],
exclude : /node_modules/ // 此处要排除该目录
}
]
}
.babelrc文件:
{
"presets" : ["env","stage-0"],
"plugins": ["transform-runtime"]
}
3、使用插件生成html文件
目前测试的各个包的版本以及是否全局安装
需要项目本地安装webpack-cli才能使用html-webpack-plugin否则会报模块找不到。
笔记比较乱,大家将就看看吧!!!
webpack打包es6代码的更多相关文章
- 前端项目模块化的实践2:使用 Webpack 打包基础设施代码
以下是关于前端项目模块化的实践,包含以下内容: 搭建 NPM 私有仓库管理源码及依赖: 使用 Webpack 打包基础设施代码: 使用 TypeScript 编写可靠类库 使用 TypeScript ...
- 简要分析webpack打包后代码
开门见山 1.打包单一模块 webpack.config.js module.exports = { entry:"./chunk1.js", output: { path: __ ...
- webpack打包样式代码去重
一.问题描述 控制台审查样式,同一个样式被导入很多遍,每调用一次@import "common.less";打包时都会多出一份类似的样式代码. 二.问题分析 补上... 三.解决方 ...
- 使用gulp和bable实现实时编译ES6代码
这篇文章最初发表在我自己折腾的博客站点上:使用gulp和bable实现实时编译ES6代码,该博客用了一位前辈开源的源码,基于thinkjs和vuejs开发,欢迎大家来逛逛. 问题描述> 项目开发 ...
- 基于ES6模块标准通过webpack打包HTM5项目
本篇主要演示通过webpack打包phaser项目,webpack安装方法在此处就不一一赘述了 经常用phaser来写html5游戏的朋友可能会发现,当游戏场景比较多时,如果都写在一个js文件中那么将 ...
- Webpack 2 视频教程 017 - Webpack 2 中分离打包项目代码与组件代码
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
- webpack使用来打包前端代码
使用webpack打包js文件(隔行变色案例) 1.webpack安装的两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令 在项目根目录中运行 ...
- 使用express、react、webpack打包、socket.io、mongodb、ant.design、less、es6实现聊天室
拿到一个项目,我们应该如何去完成这个项目呢. 是直接上手? 还是先进行分析,然后再去解决呢?毫无疑问,如果直接上手解决,那么可能会因为知道目标所在,而导致出现各种问题. 所以,我们应该系统的分析这个项 ...
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器开放平台利用 webpack 打包压缩后端代码
需求背景 javaScript的用途是解决页面交互和数据交互,最终目的是丰富客户端效果以及数据的有效传递. 并且具有良好的用户体验. javaScript可以快速实现页面交互,即js操作html的do ...
随机推荐
- 免密码 ssh 到其它机器
背景:在配置 hadoop 的时候这样设置会比较方便.目标:A 机器上输入 ssh root@B 可以直接访问,不需要输入密码 步骤: 首先在 A 机器上生成密钥对,一路回车 1 ssh-keygen ...
- 聊聊 Airtest 自动化工具
阅读文本大概需要 5 分钟. 很多读者看过之前的文章,发现我使用最多的是一款 Airtest 的自动化测试框架. Airtest 是一款适合于游戏和 App 的 UI 自动化测试框架. 下面对 Air ...
- LVS+Keepalived 配置
LVS+Keepalived配置 环境准备 LVS1:192.168.1.1 LVS2:192.168.1.2 MySQL Server1:192.168.1.13 MySQL Server2:192 ...
- 算法拾遗[4]——STL用法
主要bb一下优先队列和字符串吧. 哦还有 bitset. 优先队列 定义很容易: priority_queue<int> pq; 内部是一个堆. 基本操作 pq.top() 取堆顶元素; ...
- 如何安装及使用honmaple社区程序 · honmaple's blog · 风落花语风落天,花落风雨花落田.
Table of Contents 1. 如何安装及使用 1.1. 安装需要的package 1.2. 配置config 1.3. 注释下面代码 1.4. 初始化数据库 1.5. 创建管理员账户 2. ...
- diary20180428
17:05:59 今天早晨去了图书馆.学习了一把vscode.试图在河边看电脑,总有小虫不让我专心. 23:27:34 看纯黑直播打战神,有点感触. 动漫或游戏,角色觉醒,实力大增,小时候(甚至现在) ...
- 利用机器学习检测HTTP恶意外连流量
本文通过使用机器学习算法来检测HTTP的恶意外连流量,算法通过学习恶意样本间的相似性将各个恶意家族的恶意流量聚类为不同的模板.并可以通过模板发现未知的恶意流量.实验显示算法有较好的检测率和泛化能力. ...
- Nginx之常用基本配置(三)
前面我们聊了下了Nginx作为WEB服务器对客户端请求相关配置,文件操作优化.Nginx访问控制.basic验证,.状态模块状态页.gzip压缩配置:回顾请参考https://www.cnblogs. ...
- 菜鸟系列 Golang 实战 Leetcode —— 面试题24. 反转链表
定义一个函数,输入一个链表的头节点,反转该链表并输出反转后链表的头节点. 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3- ...
- 总结:利用asp.net core日志进行生产环境下的错误排查(asp.net core version 2.2,用IIS做服务器)
概述 调试asp.net core程序时,在输出窗口中,在输出来源选择“调试”或“xxx-ASP.NET Core Web服务器”时,可以看到类似“info:Microsoft.AspNetCore. ...