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()函数功能相同外还有一 ...
随机推荐
- [javascript-debug-ajax-json]两种不同的json格式数据
Bug 1: 1. 这里面的 data 只是一维数组{"state":0,"errorCode":0,"data":{"origi ...
- SQL Server 2008 表分区的含义
https://www.cnblogs.com/knowledgesea/p/3696912.html 继续看这个文档 http://www.360doc.com/content/16/0104/11 ...
- ora-12154 TNS:无法处理服务名疑难处理
折腾了几天的PLSQL,终于解决这个问题,在此分享给需要的朋友 服务器:WindowsServer2008(64位操作系统).Win7(64位操作系统) Oracle版本:10.2.0 问题:安装完O ...
- EntityFramework Core 学习扫盲
0. 写在前面 1. 建立运行环境 2. 添加实体和映射数据库 1. 准备工作 2. Data Annotations 3. Fluent Api 3. 包含和排除实体类型 1. Data Annot ...
- 机器学习实战-ch3-决策树
决策树是一种新算法: 优点:计算复杂度不高,输出结果易于理解,对中间值的缺失不敏感,可以处理不相关特征数据.缺点:可能会产生过度匹配问题. 决策树算法可用于数据类型:数值型和标称型. 决策树的核心在于 ...
- 【VB.NET】通过 IPIP.NET 数据库来查询IP地址
上一次介绍了利用纯真数据库查询IP地址详细信息的方法.然而纯真数据库是由网友反馈所提供的,很多数据描述并不准确,所以我上网找了一些其他的IP数据库,最后就找到了 ipip.net 这个网站所提供的IP ...
- .net图表之ECharts随笔01-最简单的使用步骤
找了几种绘制图表的办法,后面选定了ECharts.下载链接如下,好像不同的ECharts有不同的用法,要下对. https://gitee.com/Tuky/SomeWebFrame/tree/mas ...
- 【转】C# 之泛型详解
原文地址:https://www.cnblogs.com/yueyue184/p/5032156.html 什么是泛型 我们在编写程序时,经常遇到两个模块的功能非常相似,只是一个是处理int数据,另一 ...
- 网络编程-socket(三)(TCP长连接和UDP短连接、时间服务器)
详解地址:https://www.cnblogs.com/mys6/p/10587673.html TCP server端 import socketsk = socket.socket() # 创建 ...
- diamond的设计思路
diamond主要包含四个包:diamond-client.diamond-sdk.diamond-server和diamond-util client就非常简单的进行http的调用server拿数据 ...