webpack4.29.x成神之路（十一） babel編譯es6

目錄

上節： webpack-dev-server下

上節目錄以下：

基本用法

es6語法由於瀏覽器兼容性問題較多，本不能直接使用，但由於babel這種能降級es6+語法的工具，使得es6+已提早普及。先來寫點es6語法。
src/index.js:

const promise = new Promise(function(resolve) {
  console.log('Promise');
  resolve();
});

promise.then(function() {
  console.log('resolved.');
});

而後npm run build, 打開ie瀏覽器（谷歌實在太先進鳥....）:

明顯IE不能徹底失敗es6語法，因此咱們就須要將es6代碼降級成es5甚至更低。
修改配置webpack.config.js:

// 省略依賴
module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: '[name].js',
    path: resolve(__dirname, 'bundles')
  },

  // 開啓devServer
  devServer: {},

  module: {
    rules: [{
      test: /\.(gif|jpg|jpeg|png|svg)$/,
      use: ['url-loader']
    }, {
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
    }, {
      test: /\.js$/,

      // node_modules裏的代碼基本都是通過了編譯的，因此忽略
      exclude: /node_modules/,
      loader: 'babel-loader'
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new CleanWebpackPlugin()
  ]
};

根目錄下新建babel.config.js：

const presets = [
  ["@babel/env"]
];

module.exports = { presets };

而後安裝依賴：
npm i @babel/core @babel/preset-env babel-loader -D

從新npm run dev,刷新ie:

仍是不行，這是由於：

• babel-loader只識別.js文件，
• @babel/preset-env纔是編譯語法
• preset-env只會轉換語法，並不會轉換API。 對於ES6的內建功能（如 Promise / Set / Map），原型鏈的擴展（Array / Object等）須要用墊片庫（polyfill）來支持。

因此再安裝：npm i @babel/polyfill -D

scr/index.js引入：

import "@babel/polyfill";
// 省略

再次npm run dev刷新ie：

這樣就有效果了。

babel還有很是多的配置和插件,好比:
babel.config.js:

const presets = [
  ["@babel/env", {
    // 設置打包後的代碼將在哪些瀏覽器運行？只針它們作轉化
    targets: {
      edge: "17",
      firefox: "60",
      chrome: "67",
      safari: "11.1",
    },

    // 目前@babel/polyfill依賴的core-js@2，須要指定此選項並安裝
    corejs: 2,

    /*
     * @babel/polyfill會將全部高階語法轉化，配置useBuiltIns只轉化項目中用到的語法
     *797k => 291k
     * 當useBuiltIns: "usage"時，入口文件就不須要import "@babel/polyfill"了
     * 當useBuiltIns: "entry"時，須要在入口文件裏import "@babel/polyfill"
     * */
    useBuiltIns: "usage"
  }
  ]
];

module.exports = { presets };

本教程就不過多涉及了，最好的學習方式仍是擼官網文檔

下節：source-map