webpack打包转换es6_webpack（二）解析es6并打包

一、前言

ECMAScript 6(ES6)的发展速度非常之快，但现代浏览器对ES6新特性支持度不高，所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现。

Babel是一个广泛使用的转码器，babel可以将ES6代码完美地转换为ES5代码，所以我们不用等到浏览器的支持就可以在项目中使用ES6的特性。

二、安装

1、创建个文件夹，目录如下：

2、安装webpack

额外说明一下：node.js 的包安装的时候都加上 --save-dev 参数，那么这个参数是干什么的呢？

当你为你的模块安装一个依赖模块时，正常情况下你得先安装他们(在模块根目录下npm install module-name)，然后连同版本号手动将他们添加到模块配置文件package.json中的依赖里(dependencies)。

-save和save-dev可以省掉你手动修改package.json文件的步骤。

npm install module-name -save 自动把模块和版本号添加到dependencies部分

npm install module-name -save-dve 自动把模块和版本号添加到devdependencies部分

3、安装babel 实现 ES6 到 ES5

4、安装babel-loader

webpack.config.js配置

module.exports ={

entry:'./module/module1.js',

output: {

filename:'./js/bundle.js'},

module: {//webpack使用loader的方式处理各种各样的资源

loaders: [{

test:/\.js$/, //处理以.js结尾的文件

exclude: /node_modules/, //处理除了nodde_modules里的js文件

loader: 'babel-loader' //用babel-loader处理

}]

}

module2.js模块

export default{

add: (a, b)=> a *b

}

module1.js模块

import module from './module2'console.log("计算结果为："+module.add(5, 5))

以上两个模块用了es6的语法

执行webpack命令打包

打包后目录：

编写index.html

Document

//引入打包文件

结果为：

webpack打包转换es6_webpack（二）解析es6并打包相关推荐

Webpack介绍和使用(配置环境变量，打包依赖)
webpack介绍和使用 webpack是一个前端模块化打包工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.主要由入口,出口,loader,plugins四个 ...
webpack使用教程（二）
一.webpack安装(4.0) webpack webpack-cli -D 安装前npm init -y 初始化本地开发环境依赖安装二.webpack可以进行0配置打包工具 --- 输出后的 ...
webpack4.0打包优化策略(二)
打包优化策略 webpack4.0打包优化策略(一) webpack4.0打包优化策略(二) webpack4.0打包优化策略(三) 区分开发和生产环境通常我们在开发网页时需要区分构建环境开发环境 ...
Sublime插件支持Sass编译和Babel解析ES6 .sublime-build文件初探
用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了,得好好整理一些,下次换电脑就有得参考了.. 同事说,他的WebStorm简直太方便,自身集成了很多方 ...
webpack：js、css、es6装载与压缩配置-学习笔记
文章目录 webpack:js.css.es6装载与压缩配置-学习笔记 css文件打包 loader执行顺序 loader与plugin区别 less css抽取 js,css压缩处理依赖包降级处理 ...
React系列---Webpack环境搭建（二）不同环境不同配置
React系列---Webpack环境搭建(一)手动搭建 React系列---Webpack环境搭建(二)不同环境不同配置 React系列---Webpack环境搭建(三)打包性能优化实际项目中,往 ...
前端批量生成二维码并打包下载
前端批量生成二维码并打包下载项目中遇到一个紧急需求在没有后端配合的情况下,前端独自实现生成二维码并打包下载生成二维码:下载 qrcodejs2 批量打包下载:下载 JSZip 和 FileSave ...
JB的测试之旅-jenkins打包产物生成二维码
前言无风不起浪,为什么会做这个事情,就要由前几天讲起了.. 悲剧了小公司没有资源,因为很多内测都是用第三方的,这边用的是蒲公英: 在某日早上,开发提测,打包,上传pgy,准备给业务方体验的时候,结 ...
谷歌浏览器地址转换成二维码的插件，只需几行代码即可实现
谷歌浏览器插件,是利用javascript进行编写的.具体代码参考在github里面,这是本人简单编写的一个谷歌浏览器地址转换成二维码的插件,里面的代码思路本文暂时不做解析,只是介绍如何使用这个插件. ...

webpack打包转换es6_webpack（二）解析es6并打包

webpack打包转换es6_webpack（二）解析es6并打包相关推荐

最新文章

热门文章