学习webpack4 - ES6语法转化
学习webpack4 - 基础配置
学习webpack4 - HTML处理
学习webpack4 - 样式处理
学习webpack4 - ES6语法转化
学习webpack4 - 第三方库的使用
学习webpack4 - 抽离公共代码
...持续中
=======================================================
ES6语法转化
注意:开始之前以下内容之前,需要配置一些webpack的基础配置,传送门:学习webpack4.x - 基础配置
当前目录结构为:
- index.js 文件内容:
require('./index.css');
require('./index.scss');
- webpack.config.js文件内容:
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin'); //抽离CSS
let OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin'); //优化项,比如压缩css等
let UglifyJsPlugin = require('uglifyjs-webpack-plugin'); //压缩jsmodule.exports = {// mode: 'development',//优化项配置optimization: {minimizer: [new OptimizeCssPlugin(),new UglifyJsPlugin({cache: true, //缓存parallel: true, //并发打包sourceMap: true //源码映射便于调试})]},//开一个本地服务devServer: {port: 3000, //端口号progress: true, //进度条contentBase: './dist', //指定目录运行服务open: true //自动打开浏览器},entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},// 模块配置module: {rules: [{test: /\.(css|scss)$/,use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']}]},//插件配置plugins: [new HtmlWebpackPlugin({template: './src/index.html', //原始文件filename: 'index.html', //打包后的文件名称hash: true, //hash}),new MiniCssExtractPlugin({filename: 'main.css' //抽离出的css文件名称})]
}
- package.json文件内容:
{"name": "webpack","version": "1.0.0","main": "index.js","license": "MIT","scripts": {"dev": "webpack --mode development && webpack-dev-server","build": "webpack --mode production"},"devDependencies": {"autoprefixer": "^9.4.7","css-loader": "^2.1.0","html-webpack-plugin": "^3.2.0","less": "^3.9.0","less-loader": "^4.1.0","mini-css-extract-plugin": "^0.5.0","node-sass": "^4.11.0","optimize-css-assets-webpack-plugin": "^5.0.1","postcss-loader": "^3.0.0","sass-loader": "^7.1.0","style-loader": "^0.23.1","uglifyjs-webpack-plugin": "^2.1.1","webpack": "^4.29.4","webpack-cli": "^3.2.3","webpack-dev-server": "^3.1.14","webpack-html-plugin": "^0.1.1"}
}
将ES6转化为ES5
step1: 打开src/index.js,输入:
const fn = () => {console.log('丸子');
}fn ();
step2: 配置webpack.config.js文件:
将ES6转成ES5,需要babel-loader,配置规则为:
module.exports = {//...module: {//...{test: /\.js$/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env'] // 根据目标浏览器自动转换为相应es5代码}}}}
};
step3: 安装插件:
yarn add babel-loader @babel/core @babel/preset-env -D
尝试运行: npm run dev, 成功!如下图:
学习webpack4 - ES6语法转化相关推荐
- [最完整的前端学习手册]——ES6语法
目录 一.var.let.const 1.let 2.const 3.var.let和const区别 二.解构赋值 三.函数形参 四.模板字符串 五.数组拓展 1.数组拓展,...arr数组拓展运算符 ...
- webpack转化es6语法
1.安装babel babel转换高语法到es5 babel-loader转换 @babel/core是核心模块 @babel/preset-env 高级语法转换成低级语法 yarn add bab ...
- ES6语法的学习与实践
ES6是JavaScript语言的新一代标准,是ECMAScript的第六个版本,加入了很多新的功能和语法,在很多框架,如在使用Vue,React等框架的项目中一般都采用ES6语法来编写的,下面对经常 ...
- join为什么每个字符都分割了 js_为什么 webpack4 默认支持 ES6 语法的压缩?
在专栏课程里,有位同学提到过一个很有意思的问题:"我没装 babel,js 入口里写了个箭头函数,运行 webpack 构建命令后,也成功编译了.这是为什么?".今天就带领大家一起 ...
- 【Vue学习】基础语法(五)
九.组件化高级 1.插槽slot 作用:让封装的组件更加具有扩展性,使用者可以决定组件内部的一些展示内容. 1.1 插槽的基本使用 可设置默认值button 如果有多个值,同时放入到组件进行替换时,会 ...
- Vue之Todolist案例和ES6语法
2.7 Todolist案例 2.7.1 准备工作 <!DOCTYPE html> <html> <head><meta charset="utf- ...
- React 项目 -ES6 语法类的继承 (10)
在面向对象的编程语言中,基本上都是支持继承的,比如C++,和java,在ES6 中的类也引入的继承的概念,并且和java十分的类似,初学前端的ES6语法,我们在地方就介绍一下ES6 中的继承的语法. ...
- React项目 --ES6 语法中的class (9)
上一篇的博客中我们介绍了,如何设置React项目的根目录 连接地址:https://blog.csdn.net/datouniao1/article/details/119505562 要学习Reac ...
- WebStorm ES6 语法支持设置
ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0. ES6的目标,是使得Java ...
最新文章
- 【错误记录】SeeMusic 一直卡在主界面无法使用 ( 删除 C:\Users\用户名称\AppData\LocalLow\Visual Music Design 应用信息 )
- 【JavaSE02】Java基本语法-练习
- 开发物体识别桌、_想用人工智能实现安全风险管控?快来试试EasyMonitor一站式视频监控开发平台...
- 旋转根组件 Learn Unreal Engine (with C++)
- 计算机应用基础离线考核,东师2016年秋季《计算机应用基础》期末考核离线作业...
- python:植物大战僵尸源代码
- matlab 上三角矩阵变为对称矩阵,已知上/下三角矩阵如何快速将对称阵补全
- java bridge_JavaBridge
- 什么是云服务?vivo云服务是什么意思?
- Python高效编程的19个技巧
- 学习Python的入门建议及资料分享
- 感激爸妈----您们辛苦了
- python对list列表进行排序方法总结
- css transition left 不起作用
- 激光切割机在医疗领域的应用
- Android【轮播图工具类】
- windows自带截屏快捷键
- Linux的网桥中的STP的实现分析初步
- EG网关网口连接西门子PLC应用案例
- CV牛人牛事简介之一(转载)
热门文章
- libwacom9 : Depends: libwacom-common (= 2.2.0-1) but 1.12-1 is to be installed
- 排序算法:归并排序算法实现及分析
- C语言:强大的函数指针
- SpringBoot 多环境配置
- netty 发送 http请求
- pt-online-schema-change 修改主键导致数据删除失败的问题调查
- 深入分析glibc内存释放时的死锁bug
- 一淘网挑战百度意在造势 人才储备成最大障碍
- C#、.Net经典面试题集锦(一)
- oracle分区表学习及应用