webpack4 自学笔记一(babel的配置)
所有代码都可以再我的github上查看,每个文件夹下都会有README.md,欢迎star: https://github.com/Jasonwang911/webpackStudyInit/tree/master/babel
1. webpack4对UglifyJsPlugin进行了改变,在配置文件(默认为webpack.config.js)或者package.json的执行脚本 "script"中需要指定环境,默认 mode 环境为 production 为压缩代码,配置环境中需要添加 mode: 'development', package.json中需要 --mode development 来取消压缩代码。
2.安装babel:
准备环境 sudo npm install webpack webpack-cli -g 安装后可执行 webpack 命令
安装babel npm install @babel/core babel-loader --save-dev
3.webpack 命令
webpack entry output
webpack --config <webpack.config.js> (默认是webpack.config.js 默认文件名不需要使用--config 指令)
4.webpack同时支持 es6 module、commonjs规范、AMD规范
es6 module 规范:
import sum from './sum'; export default function(a, b) {
return a + b;
}
commonjs 规范
var minus = require('./minus'); module.exports = function(a, b) {
return a - b;
}
由于 AMD 是异步加载,所以会额外打包出文件,注意修改打包路径
define([
'require',
'dependency'
], function (require, factory) {
return function(a, b) {
return a * b;
}
}) require(['./muti], function(muti){
console.log(muti(2,4))
})
一、babel-loader
- 安装依赖 npm install @babel/core babel-loader --save-dev
- 配置webpack配置文件
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
// include: ['./app.js'],
exclude: '/node_modules/'
}
]
}
二、babel-preset 针对语法
- env包括 es2015/es2016/es2017/latest
一些特殊的preset babel-preset-react
babel-preset-stage 0-3 还未发布的一些预设 - 安装 babel-preset npm install @babel/preset-env --save-dev
- 配置文件中设置babel-preset
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'bable-loader',
options: {
presets: ['@babel/preset-env']
}
},
// include: ['./app.js'],
exclude: '/node_modules/'
}
]
}
- target 参数 根据指定的目标选择性的进行编译
targets
targets.browsers 'last 2 versions' '> 1%' 从一个开源项目 browserslist 和 can i use
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env',
{
targets: {
browsers: ['> 1%', 'last 2 versions']
}
}]
]
}
},
// include: ['./app.js'],
exclude: '/node_modules/'
}
]
}
- 在 .babelrc 文件中配置
{
"presets": [
["@babel/preset-env", {
"targets": {
"browsers": ["last 2 version", "not ie <= 6"]
}
}]
]
}
三、babel-plugin 针对函数和方法 arr.include new Set() Generator Map Array.from Array.prototype.includes 这些方法都没有被babel处理,所以使用babel的插件来处理
babel-polifill 全局垫片,打包后代码量大,影响全局,适合产品开发
安装: npm install babel-polyfill --save
在入口文件中使用: import 'babel-polyfill'babel-runtime-transform 局部垫片,打包后代码量少,不污染全局,适合开发插件
安装: npm install @babel/plugin-transform-runtime --save-dev
npm install @babel/runtime --save
{
"presets": [
["@babel/preset-env", {
"targets": {
"browsers": ["last 2 version", "not ie <= 6"]
}
}]
],
"plugins": ["@babel/transform-runtime"]
}
webpack4 自学笔记一(babel的配置)的更多相关文章
- webpack4 自学笔记二(typescript的配置)
全部的代码及笔记都可以在我的github上查看, 唤醒star: https://github.com/Jasonwang911/webpackStudyInit/tree/master/typesc ...
- webpack4 自学笔记三(提取公用代码)
全部的代码及笔记都可以在我的github上查看, 欢迎star:https://github.com/Jasonwang911/webpackStudyInit/tree/master/commonT ...
- webpack4 自学笔记四(style-loader)
全部的代码及笔记都可以在我的github上查看, 欢迎star:https://github.com/Jasonwang911/webpackStudyInit/tree/master/css 引入- ...
- Webpack4 学习笔记六 多页面配置和devtool
webpack 多页配置 webpack可以配置单页应用, 也可以配置多页应用. 区别在于, 单页应用entry入口只有一个, 而多页应用入口有多个 webpack配置: const path = r ...
- webpack4 自学笔记五(tree-shaking)
全部的代码及笔记都可以在我的github上查看, 欢迎star: https://github.com/Jasonwang911/webpackStudyInit/tree/master/ThreeS ...
- Hadoop自学笔记(五)配置分布式Hadoop环境
上一课讲了怎样在一台机器上建立Hadoop环境.我们仅仅配置了一个NHName Node, 这个Name Node里面包括了我们全部Hadoop的东西.包括Name Node, Secondary N ...
- webpack4.x笔记-配置基本的前端开发环境(一)
webpack的基本使用 webpack 本质上是一个打包工具,它会根据代码的内容解析模块依赖,帮助我们把多个模块的代码打包.借用 webpack 官网的图片: 虽然webpack4.x的版本可以零配 ...
- 《Linux内核设计与实现》课本第四章自学笔记——20135203齐岳
<Linux内核设计与实现>课本第四章自学笔记 进程调度 By20135203齐岳 4.1 多任务 多任务操作系统就是能同时并发的交互执行多个进程的操作系统.多任务操作系统使多个进程处于堵 ...
- 《Linux内核设计与实现》课本第十八章自学笔记——20135203齐岳
<Linux内核设计与实现>课本第十八章自学笔记 By20135203齐岳 通过打印来调试 printk()是内核提供的格式化打印函数,除了和C库提供的printf()函数功能相同外还有一 ...
随机推荐
- Linux Shell学习笔记:exit退出状态代码
inux提供$?特殊变量来保存最后一条命令执行结束的退出状态.执行完一条命令后,立即执行echo$?,可以查看最后一条命令的退出状态值. 正常的情况下,命令成功执行完成的退出状态是0,如果非0,则命令 ...
- Swift3 今日(TodayExtension)扩展图文笔记
>图片1(创建今日扩展) >图片2 >图片3(设置大小) >图片4(绘画控件) >图片5(设置共享文件) >图片6(设置群组ID) >图片7(设置URL ...
- 第一天:javascript实现界面运算及循环语句跳转语句
文档位置:untitled3(c:\user\dell\WebstormProjects\untitled3\testjstry0.html) 知识点1: 1.新创建html文件,编辑文档如下: &l ...
- datatable fix error–Invalid JSON response
This error is pretty common. Meaning:When loading data by Ajax(ajax|option).DataTables by default, e ...
- adb错误 - INSTALL_FAILED_NO_MATCHING_ABIS
#背景 换组啦,去了UC国际浏览器,被拥抱变化了.还在熟悉阶段,尝试了下adb,然后就碰到了这个INSTALL_FAILED_NO_MATCHING_ABIS的坑... #解决方法 INSTALL_F ...
- C#开发邮件收发(同步)
发邮件界面: 收邮件界面: 先分析邮件发送类 邮件发送类使用smtp协议,这里以QQ邮箱为例 using System; using System.Collections.Generic; using ...
- 【转】C#中virtual和abstract的区别
virtual和abstract都是用来修饰父类的,通过覆盖父类的定义,让子类重新定义. 它们有一个共同点:如果用来修饰方法,前面必须添加public,要不然就会出现编译错误:虚拟方法或抽象方法是不能 ...
- 【文文殿下】P3740 [HAOI2014]贴海报
题解 一开始想到离散化,然后暴力模拟.但是存在一种hack数据: [5,7] [1,5] [7,9] 这样会错误的认为第一个区间被覆盖了(因为两个端点被覆盖).所以我们设置一个玄学调参系数,在一个区间 ...
- linux下时间问题---date
显示日期 显示日期和时间
- git fetch 、git pull 与 git pull --rebase
1. git fetch 与 git pull 都是从远程拉取代码到本地,git fetch只是拉取到本地,git pull不仅拉取到本地还merge到本地分支中.所以git pull是git fet ...