从0到1，webpack踩坑笔记

最近在搞公司的移动官网，以前一直使用前辈的框架,当本身搭的时候，发现是一步一个坑呀。以前使用的webpack3，babel6的不少属性和用法已经废弃，心累，小本本记一下。

基本目录以下：

1.  babel7升级说明
   
2. webpack4和webpack3的对比
   
3. 从0到1配置项目
   
4.  webpack优化

一.babel7升级说明

官网对babel7 的升级说明：babeljs.io/docs/en/v7-…

总结一下主要有如下几点

1.babel7已删除对Node.js 0.10,0.12,2和5的支持,建议使用v8+

2.这些预设应替换为“env”预设(@babel/preset-env)

• babel-preset-es2015
• babel-preset-es2016
• babel-preset-es2017
• babel-preset-latest
• 以上^的组合  

3.删除提案polyfill(@babel/polyfill)

 换言之，要这样使用了

下载

  npm install @babel/runtime-corejs2 

  npm install @babel/plugin-transform-runtime --save-  dev

babelrc

{

"plugins": [

- ["@babel/plugin-transform-runtime"], 

+ ["@babel/plugin-transform-runtime", {

+ "corejs": 2, 

+ }],

 ]

}

 //所有引入 

 import "core-js/shim" 

 import "regenerator-runtime/runtime";

//部分引入 

 import "core-js/fn/array/flatMap";


4.版本依赖@babel/core

5.包的重命名

{ 

- "presets": ["@babel/preset-react"], 

+ "presets": ["@babel/react"], // this is equivalent 

- "plugins": ["@babel/transform-runtime"], 

+ "plugins": ["@babel/plugin-transform-runtime"], // same 

}

6.范围包裹 babel=>@babel

module.exports = { 

 presets: ["@babel/env"], // "@babel/preset-env"

 plugins: ["@babel/transform-arrow-functions"], // same as "@babel/plugin-transform-arrow-functions" 

};

7.对不是正式的包进行-proposal标记，代表提案不是正式的JavaScript

 @babel/plugin-transform-function-bind  =》@babel/plugin-proposal-function-     bind（第0阶段）

@babel/plugin-transform-class-properties =》@babel/plugin-proposal-class-properties（第3阶段）

8.从包名中删除年份

@babel/plugin-transform-es2015-classes=>@babel/plugin-transform-classes

9. use strict and this in CommonJS (暂时没用到，之后补充）

10.React和Flow预设的分离

babel-preset-react一直包括flow插件。当咱们决定支持TypeScript时，这个问题变得复杂了。若是您想使用React和TypeScript预设，咱们必须找到一种经过文件类型或指令自动打开/关闭语法的方法。最后，更容易彻底分离预设。

{ - "presets": ["@babel/preset-react"] 

  + "presets": ["@babel/preset-react", "@babel/preset-flow"] // parse & remove flow types

  + "presets": ["@babel/preset-react", "@babel/preset-typescript"] // parse & remove                typescript types 

}

11.选项解析

{ 

- "presets": "@babel/preset-env, @babel/preset-react" 

+ "presets": ["@babel/preset-env", "@babel/preset-react"] 

}

12.插件/预设导出(暂时没用到，之后补充）

13.解析基于字符串的配置值(暂时没用到，之后补充）

14.基于路径only和ignore模式(暂时没用到，之后补充）

15.babel相关包的变化

•  babel-nodeBabel 6中的命令是该babel-cli软件包的一部分。在Babel 7中，此命令已拆  分为本身的@babel/node包，所以若是您使用该命令，则须要添加此新依赖项。
• @babel/runtime， @babel/plugin-transform-runtime              

      @babel/runtime如今只包含帮助程序，若是须要core-js，可使用@babel/runtime-              corejs2转换中提供的选项。使用@babel/runtime和@babel/runtime-corejs2，仍然需         要 @babel/plugin-transform-runtime

• @babel/plugin-proposal-object-rest-spread  ...对象后不能出现尾随逗号                  
• @babel/plugin-proposal-class-properties
• @babel/plugin-transform-export-extensions 拆分为 @babel/plugin-proposal- export-default-from和 @babel/plugin-proposal-export-namespace-from的提案

     export v from "mod"; //@babel/plugin-proposal-export-default-from


      export * as ns from "mod";//@babel/plugin-proposal-export-namespace-from

• @babel/plugin-proposal-decorators                                                                 
  

      在预期新的装饰器提议实现时，咱们决定将其做为新的默认行为。 这意味着要继续使用当         前装饰器语法/行为，必须将 legacy 选项 设置 为 true 。

 { 

   "plugins": [ 

 -   "@babel/plugin-proposal-decorators" 

 +   ["@babel/plugin-proposal-decorators", { "legacy": true }]

      ] 

  }

•   删除babel-plugin-transform-class-constructor-call
•  将babel-plugin-transform-async-to-module-method做为一个选项合并到常规异步插  件中   
•  babel-core/register Babel 7中删除了已弃用的用法;而是使用独立包@babel/register  
• @babel-core删除 babel-core/src/api/browser.js,浏览器请使用 @ babel / standalone。

配置6.x与7.x 比较