摘要：一基礎(chǔ)配置項(xiàng)目安裝安裝并新建文件，并初始化文件入口出口配置插件安裝配置用來(lái)解析文件轉(zhuǎn)譯成瀏覽器可以識(shí)別的文件。以形式在頁(yè)面中插入代碼加載文件是否開(kāi)啟代碼壓縮。

mkdir react-webpack-demo
cd react-webpack-demo
mkdir src
mkdir dist
npm init -y

安裝webpack,并新建webpack.js文件，并初始化文件

yarn add webpack  webpack-cli webpack-dev-server -D
mkdir config
touch config/webpack.common.js

module.exports = {
   
    entry: ["./src/index.js"],//入口
    output: { //出口
        path: paths.appBuild
    },
    module: {}, //配置 loader
    plugins: [], //插件
};

yarn add react react-dom

loaders
loader 用來(lái)解析文件轉(zhuǎn)譯成瀏覽器可以識(shí)別的文件。如.less、.jsx等這些文件瀏覽器是不能正常轉(zhuǎn)譯的，loaders的作用就是充當(dāng)著"翻譯"的作用。

babel 輸入源碼 => 輸出編譯后的代碼，總共分為三個(gè)階段：解析，轉(zhuǎn)換，生成。
babel 本身不具有任何轉(zhuǎn)化功能，它把轉(zhuǎn)化的功能都分解到一個(gè)個(gè) plugin 里面。因此當(dāng)我們不配置任何插件時(shí)，經(jīng)過(guò) babel 的代碼和輸入是相同的。
插件總共分為兩種:語(yǔ)法插件（Babel 解析（parse） 特定類型的語(yǔ)法，轉(zhuǎn)換插件會(huì)自動(dòng)啟用語(yǔ)法插件）,轉(zhuǎn)換插件(例如：箭頭函數(shù) (a) => a 就會(huì)轉(zhuǎn)化為 function (a) {return a})

預(yù)設(shè)（Presets）
preset 可以作為 Babel 插件的組合；
Preset 是逆序排列的（從后往前）
@babel/preset-react就是一個(gè)官方 Preset

@babel/polyfill
1.babel 默認(rèn)只轉(zhuǎn)換 js 語(yǔ)法，而不轉(zhuǎn)換新的 API，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局對(duì)象，以及一些定義在全局對(duì)象上的方法(比如 Object.assign)都不會(huì)轉(zhuǎn)碼。
2.babel-polyfill 會(huì)污染全局變量，給很多類的原型鏈上都作了修改，如果我們開(kāi)發(fā)的也是一個(gè)類庫(kù)供 其他開(kāi)發(fā)者使用，這種情況就會(huì)變得非常不可控。
3.類庫(kù)開(kāi)發(fā)，通常我們會(huì)傾向于使用 babel-plugin-transform-runtime
4.@babel/preset-env 獲取您指定的任何目標(biāo)環(huán)境,,按需轉(zhuǎn)碼,引入相應(yīng)的插件，默認(rèn)使用browserslist

@babel/core-babel  核心模塊    
@babel/preset-env  編譯ES6等 
@babel/preset-react  轉(zhuǎn)換JSX
@babel/preset-react  轉(zhuǎn)換JSX
@babel/plugin-transform-runtime 避免 polyfill 污染全局變量，減小打包體積
@babel/polyfill  ES6 內(nèi)置方法和函數(shù)轉(zhuǎn)化墊片



   

配置

     {
    test: /.(js|jsx)$/,
    include: paths.appSrc,
    use: [
        {
            loader: "babel-loader",
            options: {
                presets: ["@babel/preset-react"],
                plugins: [
                    // 按需加載lodash
                    "lodash",
                    // babel-plugin-import
                    // true是less， 可以寫"css" 如果不用less
                    ["import", { libraryName: "antd", libraryDirectory: "es", style: "less" }],
                    [
                        "@babel/plugin-transform-runtime",
                        {
                            absoluteRuntime: false,
                            corejs: false,
                            helpers: false,
                            regenerator: true, // generator不會(huì)污染全局的
                            useESModules: false, // 轉(zhuǎn)換將使用無(wú)法運(yùn)行的幫助程序
                        },
                    ],
                    // "@babel/plugin-syntax-dynamic-import"
                ],
                cacheDirectory: true,
                cacheCompression: isEnvProduction,
                compact: isEnvProduction,
            },
        },
    ],
}

Polyfill是一個(gè)js庫(kù)，主要撫平不同瀏覽器之間對(duì)js實(shí)現(xiàn)的差異。根據(jù)瀏覽器不同的UA按需加載polyfill,國(guó)內(nèi)瀏覽器支持不好。