從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 比較