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']

}

}

}

]

},