Webpack4 打包js ES6转ES5 babel7.X

Webpack4 打包js将ES6转ES5，使用babel7.x

注意点，使用babel时得注意版本对应的问题，babel-loader和babel-core版本对应关系：

babel-loader 8.x对应babel-core 7.x

babel-loader 7.x对应babel-core 6.x

 

一、babel 7.x安装

npm i -D @babel/core

或

cnpm i -D @babel/core

 

二、安装babel-preset

npm i @babel/preset-react

npm i @babel/preset-env

npm i babel-preset-mobx

或

cnpm i @babel/preset-react

cnpm i @babel/preset-env

cnpm i babel-preset-mobx

三、安装babel-plugin

npm install --save-dev @babel/plugin-proposal-object-rest-spread

npm install --save-dev @babel/plugin-transform-runtime

npm install --save @babel/runtime

或

cnpm install --save-dev @babel/plugin-proposal-object-rest-spread

cnpm install --save-dev @babel/plugin-transform-runtime

cnpm install --save @babel/runtime

 

四、修改.babelrc文件

如果没有这个文件，则在package.json同及目录创建一个.babelrc文件。

然后其内容修改如下：

{

    "presets": ["@babel/preset-env", "@babel/preset-react", "mobx"],

    "plugins": [

        "@babel/plugin-proposal-object-rest-spread",

        "@babel/plugin-transform-runtime"

    ]

}

五、修改webpack.config.json内容

module: {

        rules: [

            {

                test: /\.m?js$/,

                exclude: /(node_modules|bower_components)/,

                use: {

                    loader: 'babel-loader',

                    options: {

                        presets: ['@babel/preset-env']

                    }

                }

            }

        ]

},