Webpack + gulp + babel-loader 配置踩坑

栏目: 编程工具 · 发布时间: 7年前

内容简介:Webpack + gulp + babel-loader 配置踩坑

最近新启了一个项目,由于之前没有从零新建过项目,在项目的配置上花了很长时间。简单记录下配置中遇到的最大的坑:webpack + gulp + babel-loader 的问题。

先说一下配置的需求,整个项目工作流主要用 gulp 管理。引入 webpack 只用来打包压缩 js。

很早以前就听过 Webpack 2 有 Tree Shaking 的功能,配合 ES6 的 export 和 import 语法,可以只引入使用的模块,减少最终压缩后的代码量。于是各种看文档、google 配置示例,终于把 gulp + webpack 2 配置了起来。试着用 import 引入一段公共代码,发现也正常引入打包正常工作了,开心的觉得 Voila,搞定!^_^

然鹅,还是 too young too simple..

下午同事把项目配置到本地,捣鼓了一会儿过来问我,为什么只 import 了公共代码(utils.js)里的一个 module, 但还是把整个文件都打包了呢?我当时就黑人问号脸:纳尼,文档上不是写的只打包 import 的 module 吗?文档为什么骗我。。

Webpack + gulp + babel-loader 配置踩坑

又认真读了一遍文档,发现没有需要配置的地方啊,Tree shaking 是默认功能。百思不得其解的时候,只能使用 google 大法,把自己使用的工作流 工具 名 webpack + gulp 全输进去,再加一个 tree shaking not working... 画美不看.. 果然,早已经有大神遇到相同问题。

原来是 webpack 使用的 babel-loader 造成的问题。具体原因说白了就是,babel-loader 将 ES6 的 modules 先转换成了 CommonJS modules, 再交给 webpack 去打包。而 CommonJs modules 是动态的,webpack 不能在打包的时候 shake 掉无用的代码。

好吧,虽然还不明白什么是动态 module 什么是静态 module,但是找到问题所在了。 那么怎么解决呢?估计是 Babel 也发现了这个问题,已经提供了一个 配置项 可以关掉 ES6 module 的转换。给 babel-loader 加一项配置:

options: { presets: [ [ 'es2015', { modules: false } ] ] }

重启 webpack 再打包压缩一遍文件,果然~ 只有被 import 的 module 打包了。没有 import 的 module 在最终打包压缩过的代码里是找不到的。

至此,才算大功告成~ 可以开心的继续写代码去了~

附上解决我问题的 文章链接 ,这位大神遇到了跟我一模一样的坑,才决定写一篇文章记录一下。 看到被坑的不只一个人,我就放心了~


以上所述就是小编给大家介绍的《Webpack + gulp + babel-loader 配置踩坑》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Flash第一步

Flash第一步

陈冰 / 清华大学出版社 / 2006-3 / 45.00元

《Flash第1步:ActionScript编程篇》(珍藏版)为《Flash第一步》的ActionScript编程篇,包含后4部分内容。第3部分为ActionScript篇,你将学会像一个软件设计师那样来思考问题,并掌握在Flash中进行程序开发工作所必须具备的重要知识,还将学会运用Flash完整的编程体系来完成从简单到复杂的各种编程任务。另外,在开发一个Flash应用过程中会涉及的各种其他Web......一起来看看 《Flash第一步》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

html转js在线工具
html转js在线工具

html转js在线工具