webpack与babel的深奥，渣渣的我只能做个小笔记（持续更新）

最近公司封装的构建库用多了，感觉自己正在一步一步的变傻，所以趁还没下雪，手脚还没长冻疮，没事还是自己折腾一下吧。
本想记笔记，但没想到记笔记没法传图片。所以如果你看到了，就忽略了吧。o(╥﹏╥)o o(╥﹏╥)o o(╥﹏╥)o

思来想去，我入门webpack已经好多年了，以前写到过一篇：webpack再入门,说一下那些不入流的知识点，但从没深入过，希望这次能坚持下去，将webpack与babel好好深入一番。

webpack4官网：地址
babel官网： 地址

webpack相关

• 1.

在项目中，尝试着用antd的组件，然后引入了antd的css样式，然后报了个如下的错，这种错误抛出来，简直让你怀疑人生，因为你就在js中写了一句 import 'antd/dist/antd.css'。天天都在用的模式，怎么，怎么就报错了呢？

原因：自己在loader里配上了各种高大上的loader，什么sass,less，file,但是就是没有配css（哭晕在厕所）
解决办法：加上呗。

敲黑板： loader顺序与解析值得关注，loader的编译顺序是从右往左依次执行，以less类型为例，当编译器遇到a.less时，先通过less-loader将a.less编译为一个一个的css模块，然后再通过css-loader将其整合为一个css模块（怀疑中，还需要探索）。但是还需要一个地方去引入这个css，一般前面紧跟style-loader，但这个loader会把整个css通过style标签注入到HTML中，和这个时代主流有点不符合。所以这里我用了MiniCssExtractPlugin这个插件，它的作用是将css作为一个文件通过link标签引入。

• 2.

webpack4.27.1的文档中提到了公共代码分离提到了webpack.optimize.CommonsChunkPlugin，但是添加了运行后报错：
webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead
原因: 官方文档有一点滞后，需要修正吧，索性官方还是提供了splitChunks的使用说明，
解决办法：照着文档慢慢整吧。不过我发现里面的知识点还是挺多的，什么aysnc,initial,all这几个的区别。

Babel篇

• 1.

同一台电脑，webpack-dev-server在同一个端口启动第二个服务，会报：Error: listen EADDRINUSE xxxx端口错误

解决办法：可以在启动服务器，使用net库检测该端口是否已经被占用。

• 2.

使用了对象展开运算符，Babel编译报Unexpected token，如图：

原因:babel只配置了env，ES6中提出了展开运算符，但这个展开仅仅对数组展开（es2015-spread），而对象展开（object-rest-spread）现在还只是一个提案。
解决办法： 安装（babel-plugin-transform-object-rest-spread）并在babelrc添加"plugins": [ "transform-object-rest-spread" ]

• 3.

babel加了个支持async await的插件后报错TypeError: Falsy value found in plugins。baben 配置如下：

原因： .babelrc中plugins中的空字符串去掉(让人哭笑不得o(╥﹏╥)o的错误)
解决办法：去掉空字符串

-4.
想用一些超级语法，那就是必然会付出代价。接着上面async await讲，虽然加了插件编译成功，但在运行时，会报： ReferenceError: regeneratorRuntime is not defined。具体试验代码如下所示：

    async function async1() {
      console.log('async1 start');
      await async2();
      console.log('async1 end');
    }
    
    async function async2() {
      console.log('async2');
    }
    async1();

原因：虽然chrome是支持es6语法的，但babel-preset-env并不是支持所有es6语法的编译。也就是说问题并不是出在async await语法的编译上（transform-async-to-generator），而是错在env没有对生成器语法的支持。如果有疑问,可以直接拷贝下列代码到浏览器中运行：

    function* create() {
        let fir = yield 1;
        let sec = yield fir + 2;
        yield sec;
    }
    const iter = create();
    console.log(iter.next());

所以我们还需要增加babel对生成器语法的支持，就是加上babel-plugin-transform-runtime这个插件就ok了。
解决方法：安装babel-plugin-transform-runtime插件，并在.babelrc中plugins中的transform-async-to-generator之后加上transform-runtime支持。

敲黑板: .babelrc配置中的Plugin/Preset排序，官方说的很清楚了，我觉得我没有必要再扯犊子了，看图：

后面再加一句：我在babel上对这个排序还有点疑惑，因为我调整了顺序，并没有什么影响。o(╥﹏╥)o
-5.
‘The decorators plugin requires a decoratorsBeforeExport option’，装了个babel7，然后用箭头函数在react中声明了一个静态方法，然后曝出了上面所示的错误，这确实是专属于babel 7的，
解决方法：如上图所示，加配置legacy: true