webpack4 系列实践笔记(4): webpack + babel7
本系列代码放在 github 上:
webpack4系列实践代码如果本系列实践教程对你有帮助,欢迎给个
github star
哦!
1.关于 babel 7 版本
babel 7 于 2018 年 8 月份发布,在 babel 7 中,所有官方包更名为以 @babel 为开头,并且 babel 7 推荐使用 babel.config.js 来配置 babel 。
关于 babel 7 的重大改变,请参考这篇文章:Babel 7 发布
对 babel 7 不熟的请先撸一下 babel 7 的配置文档:https://babel.docschina.org/docs/en/
2.安装相关依赖包
@babel 相关
1 | npm install --save-dev @babel/core @babel/preset-env |
webpack 相关
1 | npm install --save-dev babel-loader |
相关包介绍:
@babel/core: babel的核心功能
@babel/preset-env: @babel/preset-env 是一组官方已经配置好的babel plugins预设,省去了自己配置的plugins的麻烦
@babel/polyfill: @babel/polyfills 用来实现所有新的javascript功能,比如 Promise , WeadMap , Array.prototype.includes 等
@babel/polyfills 的三种使用方法
方法1)在代码入口
import "@babel/polyfill";
方法2)通过配置
"useBuiltIns: "usage"
(推荐用法)
方法3)webpack 的 entry 中引入
1 entry: ["@babel/polyfill","./src/app.js"] // "@babel/polyfill" 需作为第一个
注意,@babel/polyfill 需要打包进代码中,因此需要以
npm install(没有-dev)--save @babel/polyfill
的形式来安装
3.目录结构
1 | // `--` 代表目录, `-` 代表文件 |
src/app.js
1 | // import "@babel/polyfill"; |
4.编写 babel 配置文件
babel.config.js
1 | const presets = [ |
useBuiltIns 说明:
通过设置 “@babel/env” 的 “useBuiltIns” 为 “usage” ,省去了手动导入 @babel/polyfill 的过程,而且更重要的是,通过此方式,babel 只会帮你 import 代码中所用到的 polyfill,避免导入整个 @babel/polyfill 包(压缩后将近80k)。
(你可以把 useBuiltIns 注释,并且在 app.js 手动
import "@babel/polyfill"
试试,会导致整个包变大。)
5.编写 webpack 配置文件
webpack.config.js
1 | module.exports = { |
6.执行打包命令
(默认你已经安装了全局 webpack 以及 webpack-cli )
1 | webpack |
打包成功后,会在 demo04 目录下生成 dist/app.bundle.js
7.验证打包结果
创建 index.html 文件,引用打包生成的主文件 (app.bundle.js) ,
分别用 ie,Chrome 浏览器打开,并查看控制台。
输出结果:
1 | true |
8.源码地址
demo 代码地址: https://github.com/SimpleCodeCX/simple-webpack-demos/tree/master/demo04-babel7
仓库代码地址(及目录): https://github.com/SimpleCodeCX/simple-webpack-demos
本文作者 : Simple
原文链接 : https://simplecodecx.github.io/blog/20190224/b77e298c.html
版权声明 : 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!