技術標籤：webpackwebpack

webpack js相容性處理

檔案目錄：

index.js:

//全部js相容性處理  不需要 可通過corejs做按需處理
// import '@babel/polyfill'

const add = (x,y) => {
  return x + y;
}

console.log(add(2, 5));


const promise = new Promise((resolve)=>{
  setTimeout(()=>{
    console.log('定時器執行完了')
    resolve();
  },1000)
})

console.log(promise);
 

webpack.js:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const { resolve } = require('path')

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
          /* 
           js相容性處理：babel-loader @babel/core  @babel/preset-env
            1.基本js相容處理 --》@babel/preset-env
                問題：只能轉換基礎語法 promise無法識別
            2.全部js相容性處理 --> @babel/polyfill
               問題：只需要解決部分相容性問題，但是將所有相容性程式碼全部引入，體積太大
            3.需要做相容性處理的就做：按需載入 --> corejs
          */
         {
             test:/\.js$/,
             exclude:/node_modules/,
            loader:'babel-loader',
            options:{
                // 預設：指示babel做怎麼樣的相容性處理
                presets:[
                    [
                        '@babel/preset-env',
                        {
                            //按需載入
                            useBuiltIns:'usage',
                            //指定core-js版本
                            corejs:{
                                version:3
                            },
                            // 指定具體相容性做到那個版本的瀏覽器
                            targets:{
                                chrome:'60',
                                firefox:'50',
                                ie:'9',
                                safari:'10',
                                edge:'17'
                            }
                        }
                    ]
                ]
            }
         }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development'
}