作者回复: 这是因为 webpack4 在 mode 设置成 production 后会默认使用了terser-webpack-plugin插件，这个插件可以支持 ES6 语法的 uglify。这个是压缩插件的切换历史：https://github.com/webpack/webpack/commit/311a7285d36b38bada46102967c431e93ff48a89 Some history: * `uglifyjs-webpack-plugin` < v1.0 used the minifier `uglify-js` * however `uglify-js` does not support ES6, which resulted in a fork called `uglify-es` that was developed in the `uglify-js` repository, but under the `harmony` branch * `uglifyjs-webpack-plugin` v1.x switched to `uglify-es` for ES6 support * however `uglify-es` stopped being maintained: mishoo/UglifyJS2#3156 (comment) * which led to a fork called `terser` that has incorporated all of the unmerged PRs and will be where all new development occurs: https://github.com/fabiosantoscode/terser * `terser-webpack-plugin` was created, which is the `terser` equivalent of `uglifyjs-webpack-plugin`: https://github.com/webpack-contrib/terser-webpack-plugin * `uglifyjs-webpack-plugin` v2.x will be switching back to `uglify-js`, so any project that needs to support ES6 now needs to switch to `terser-webpack-plugin`. Fixes #7923.

2019-05-31



30

Jeff、

npm i react react-dom @babel/preset-react -D; 这样把react react-dom放在devDependencies中没问题吗？我想知道package.json中dependencies和devDependencies的区别...

作者回复: 嗯，这个是为了演示哈。对于 react和 react-dom 应该是： npm i react react-dom -S 对于构建相关配置应该： npm i @babel/preset-react -D package.json中dependencies和devDependencies的区别是：devDependencies用于本地环境开发时候，dependencies用户发布环境，也就是开发阶段的依赖最后是不对被打入包内。通常框架、组件和 utils 等业务逻辑相关的包依赖放在dependencies里面，对于构建、ESlint、单元测试等相关依赖放在devDependencies中

2019-06-08

3

16

Baron

希望后续能简单讲解一下.babelrc文件的配置

作者回复: 主要是这个 .babelrc 比较简单，其实就包含两块内容，一个是 babel presets，另一个是 babel plugins数组。比如 .babelrc 文件： { "presets": [ "@babel/preset-env” ], "plugins": [ "@babel/proposal-class-properties" ] } plugin 用来支持某个功能，presets 是多个 plugin 的集合。就是这么简单

2019-06-04



6

kaiking

老师，跟着您的步骤走，我这边报这个错，是什么原因？ Uncaught TypeError: o.a.render is not a function 我把我做的上传到了git，麻烦老师帮忙看下: https://gitee.com/kaiking_g/webpack-errors.git

作者回复: import ReactDom from 'react'; 这一行需要改成： import ReactDom from 'react-dom';

2019-08-13

2

4

GitHubGanKai

不好意思老师刚才我问题的问题我找到答案了是我自己粗心代码写错了多加了个引号 module: { rules: [ { test: /.js$/, // 注意这个地方不能写成 ‘/.js$/’ 这个没有引号的，否则报错~~ use: 'babel-loader' } ] } 我看了一下留言区有人和我出现一样的问题，估计都是是这个问题。

作者回复: 哦哦，好嘞，强👍

2019-07-14



4

老师，mode 设置成 none ，没有 .babelrc 文件，照样打包成功。是什么原因呢？代码：27ng.com/fe/webpack/webpack.zip

作者回复: 这个应该不会，看代码链接访问是403，可以重新提供一个链接吗？我帮你看看。

2019-08-02

3

2

Geek_fcb60e

老师，如果用了ts，还需要Babel吗？

作者回复: 不需要了，ts使用ts-loader即可

2019-06-29



1

Geek_10ebab

请问老师，babel的作用是转换ES6语法，那么使用@babel/core和babel-loader就可以了，为什么还要使用@babel/preset-env这个呢？

作者回复: babel-loader 解析ES6的语法也是需要知道哪些语法需要解析，需要通过.babelrc进行配置，这个@babel/preset-env 就是告诉 babel-loader 要解析ES6的语法，其它的 react 语法可以通过其它的 babel preset 进行

2019-06-25



1

der果

babel可以编译箭头函数等语法，但是全局方法例如promise等方法如何编译成es5

作者回复: babel 只转换新的JS语法，而不转换新的API，例如全局方法：Map、Set、Promise 这些是无法编译成 ES5的哈。需要通过 babel-polyfill 进行

2019-06-11



1

GitHubGanKai

老师我按照你视频中的讲解进行操作，但是在解析jsx 的时候，出现了这个报错，说我没有按照相应的loader，但是我是按照你视频中的操作，一步一个代码敲的啊！ ERROR in ./src/search.js 9:11 Module parse failed: Unexpected token (9:11) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | render() { > return <div>Search Text</div>; | } | }

作者回复: 这个之前不少同学都遇到过，需要先检查下项目跟目录下是否有 .babelrc 文件(注意是否拼写错误)，然后.babelrc 文件的内容是否正确。另外可以和课件的源码对照比较一下

2019-07-14





收起评论