所有代码都可以再我的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

  1. 安装依赖 npm install @babel/core babel-loader --save-dev
  2. 配置webpack配置文件
 module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
// include: ['./app.js'],
exclude: '/node_modules/'
}
]
}

  二、babel-preset 针对语法

    1. env包括 es2015/es2016/es2017/latest
      一些特殊的preset babel-preset-react
      babel-preset-stage 0-3 还未发布的一些预设
    2. 安装 babel-preset npm install @babel/preset-env --save-dev
    3. 配置文件中设置babel-preset
   module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'bable-loader',
options: {
presets: ['@babel/preset-env']
}
},
// include: ['./app.js'],
exclude: '/node_modules/'
}
]
}

  

    1. 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/'
}
]
}

  

  1. 在 .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的插件来处理

    1. babel-polifill 全局垫片,打包后代码量大,影响全局,适合产品开发
      安装: npm install babel-polyfill --save
      在入口文件中使用: import 'babel-polyfill'

    2. 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的配置)的更多相关文章

  1. webpack4 自学笔记二(typescript的配置)

    全部的代码及笔记都可以在我的github上查看, 唤醒star: https://github.com/Jasonwang911/webpackStudyInit/tree/master/typesc ...

  2. webpack4 自学笔记三(提取公用代码)

    全部的代码及笔记都可以在我的github上查看, 欢迎star:https://github.com/Jasonwang911/webpackStudyInit/tree/master/commonT ...

  3. webpack4 自学笔记四(style-loader)

    全部的代码及笔记都可以在我的github上查看, 欢迎star:https://github.com/Jasonwang911/webpackStudyInit/tree/master/css 引入- ...

  4. Webpack4 学习笔记六 多页面配置和devtool

    webpack 多页配置 webpack可以配置单页应用, 也可以配置多页应用. 区别在于, 单页应用entry入口只有一个, 而多页应用入口有多个 webpack配置: const path = r ...

  5. webpack4 自学笔记五(tree-shaking)

    全部的代码及笔记都可以在我的github上查看, 欢迎star: https://github.com/Jasonwang911/webpackStudyInit/tree/master/ThreeS ...

  6. Hadoop自学笔记(五)配置分布式Hadoop环境

    上一课讲了怎样在一台机器上建立Hadoop环境.我们仅仅配置了一个NHName Node, 这个Name Node里面包括了我们全部Hadoop的东西.包括Name Node, Secondary N ...

  7. webpack4.x笔记-配置基本的前端开发环境(一)

    webpack的基本使用 webpack 本质上是一个打包工具,它会根据代码的内容解析模块依赖,帮助我们把多个模块的代码打包.借用 webpack 官网的图片: 虽然webpack4.x的版本可以零配 ...

  8. 《Linux内核设计与实现》课本第四章自学笔记——20135203齐岳

    <Linux内核设计与实现>课本第四章自学笔记 进程调度 By20135203齐岳 4.1 多任务 多任务操作系统就是能同时并发的交互执行多个进程的操作系统.多任务操作系统使多个进程处于堵 ...

  9. 《Linux内核设计与实现》课本第十八章自学笔记——20135203齐岳

    <Linux内核设计与实现>课本第十八章自学笔记 By20135203齐岳 通过打印来调试 printk()是内核提供的格式化打印函数,除了和C库提供的printf()函数功能相同外还有一 ...

随机推荐

  1. [javascript-debug-ajax-json]两种不同的json格式数据

    Bug 1: 1. 这里面的 data 只是一维数组{"state":0,"errorCode":0,"data":{"origi ...

  2. SQL Server 2008 表分区的含义

    https://www.cnblogs.com/knowledgesea/p/3696912.html 继续看这个文档 http://www.360doc.com/content/16/0104/11 ...

  3. ora-12154 TNS:无法处理服务名疑难处理

    折腾了几天的PLSQL,终于解决这个问题,在此分享给需要的朋友 服务器:WindowsServer2008(64位操作系统).Win7(64位操作系统) Oracle版本:10.2.0 问题:安装完O ...

  4. EntityFramework Core 学习扫盲

    0. 写在前面 1. 建立运行环境 2. 添加实体和映射数据库 1. 准备工作 2. Data Annotations 3. Fluent Api 3. 包含和排除实体类型 1. Data Annot ...

  5. 机器学习实战-ch3-决策树

    决策树是一种新算法: 优点:计算复杂度不高,输出结果易于理解,对中间值的缺失不敏感,可以处理不相关特征数据.缺点:可能会产生过度匹配问题. 决策树算法可用于数据类型:数值型和标称型. 决策树的核心在于 ...

  6. 【VB.NET】通过 IPIP.NET 数据库来查询IP地址

    上一次介绍了利用纯真数据库查询IP地址详细信息的方法.然而纯真数据库是由网友反馈所提供的,很多数据描述并不准确,所以我上网找了一些其他的IP数据库,最后就找到了 ipip.net 这个网站所提供的IP ...

  7. .net图表之ECharts随笔01-最简单的使用步骤

    找了几种绘制图表的办法,后面选定了ECharts.下载链接如下,好像不同的ECharts有不同的用法,要下对. https://gitee.com/Tuky/SomeWebFrame/tree/mas ...

  8. 【转】C# 之泛型详解

    原文地址:https://www.cnblogs.com/yueyue184/p/5032156.html 什么是泛型 我们在编写程序时,经常遇到两个模块的功能非常相似,只是一个是处理int数据,另一 ...

  9. 网络编程-socket(三)(TCP长连接和UDP短连接、时间服务器)

    详解地址:https://www.cnblogs.com/mys6/p/10587673.html TCP server端 import socketsk = socket.socket() # 创建 ...

  10. diamond的设计思路

    diamond主要包含四个包:diamond-client.diamond-sdk.diamond-server和diamond-util client就非常简单的进行http的调用server拿数据 ...