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()函数功能相同外还有一 ...
随机推荐
- HDU 2829 区间DP & 前缀和优化 & 四边形不等式优化
HDU 2829 区间DP & 前缀和优化 & 四边形不等式优化 n个节点n-1条线性边,炸掉M条边也就是分为m+1个区间 问你各个区间的总策略值最少的炸法 就题目本身而言,中规中矩的 ...
- SRM478
又是rng_58的神题.. 250pt: 题意:给定一个初始数x,对于这个数可以进行x*4+3,或者x*8+7的操作.最多进行100000次操作 问最少经过几次出现%1000000007 == 0的情 ...
- [leetcode 12] Inter to Roman
1 题目: Given an integer, convert it to a roman numeral. Input is guaranteed to be within the range fr ...
- C# byte和10进制、16进制相互转换
var SRMP = new byte[4]; Array.Copy(Encoding.UTF8.GetBytes(1.ToString("x2")), SRMP, Encodin ...
- 探究Entity Framework如何在多个仓储层实例之间工作单元的实现及原理(2018-05-31修改部分严重错误代码)
前言 1.本文的前提条件:EF上下文是线程唯一,EF版本6.1.3. 2.网上已有相关API的详细介绍,本文更多的是作为我自己的个人学习研究记录. 3.2018-05-31修改DbSession.cs ...
- Spring IOC 容器源码分析 - 创建原始 bean 对象
1. 简介 本篇文章是上一篇文章(创建单例 bean 的过程)的延续.在上一篇文章中,我们从战略层面上领略了doCreateBean方法的全过程.本篇文章,我们就从战术的层面上,详细分析doCreat ...
- Android------------------系统服务调用的学习
一.ServiceManager的方法: 此方法getService,用于根据名称获取当前的IBinder的代理(并没有直接获取服务), 服务提供的功能是依靠IBinder间接调用的(返回值IBind ...
- vscode卡死问题
网上有人说是和淘宝镜像冲突,也不知啥原因,接下来一下操作会好点: 文件->首选项->设置,搜索search.followSymlinks,把对勾去掉就行 1.修复vs code 造成 rg ...
- cad2017卸载/安装失败/如何彻底卸载清除干净cad2017注册表和文件的方法
cad2017提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装cad2017失败提示cad2017安装未完成,某些产品无法安装,也有时候想重新安装cad2017 ...
- I/O类型
同步和异步 synchronous asyncronous 关注的是消息通知机制 同步:调用发出之后不会立即返回,但一旦返回,则返回即是最终结果. 异步:调用发出之后,被调用方立即返回消息,但返回的 ...