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