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

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 用來解析文件轉(zhuǎn)譯成瀏覽器可以識別的文件。如.less、.jsx等這些文件瀏覽器是不能正常轉(zhuǎn)譯的，loaders的作用就是充當著"翻譯"的作用。

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

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

@babel/polyfill
1.babel 默認只轉(zhuǎn)換 js 語法，而不轉(zhuǎn)換新的 API，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局對象，以及一些定義在全局對象上的方法(比如 Object.assign)都不會轉(zhuǎn)碼。
2.babel-polyfill 會污染全局變量，給很多類的原型鏈上都作了修改，如果我們開發(fā)的也是一個類庫供 其他開發(fā)者使用，這種情況就會變得非常不可控。
3.類庫開發(fā)，通常我們會傾向于使用 babel-plugin-transform-runtime
4.@babel/preset-env 獲取您指定的任何目標環(huán)境,,按需轉(zhuǎ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不會污染全局的
                            useESModules: false, // 轉(zhuǎn)換將使用無法運行的幫助程序
                        },
                    ],
                    // "@babel/plugin-syntax-dynamic-import"
                ],
                cacheDirectory: true,
                cacheCompression: isEnvProduction,
                compact: isEnvProduction,
            },
        },
    ],
}

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