“@babel/cli”: “^7.2.3” 表示babel 7的版本

在此版本中

// webpack.config.js exports对象
exports.module.rules = [
{
  test: /\.(js|jsx)$/,
  exclude: /(node_modules|bower_components)/,
  use: {
    loader: 'babel-loader',
  },
}
]
// 然后在配置babel.config.js文件
// 导出预设和插件设置
// 每次执行babel命令时，或通过babel-loader执行babel操作时，
// 都会自动读取根目录的babel.config.js文件的配置

// webpack.common.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 自动生成页面
const CleanWebpackPlugin = require('clean-webpack-plugin'); // 自动清理，清理dist旧文件
const webpack = require('webpack');
module.exports = {
    optimization: {
        runtimeChunk: 'single',
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all'
                }
            }
        }
    },
    entry: {
        app: './src/index.jsx',
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'src/index.html'),
            filename: 'index.html',
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.HashedModuleIdsPlugin()
    ],
    output: {
        filename: '[name].[hash].js',
        // chunkFilename: '[name].[contenthash].js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: 'babel-loader',
                },
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(csv|tsv)$/,
                use: [
                    'csv-loader'
                ]
            },
            {
                test: /\.xml$/,
                use: [
                    'xml-loader'
                ]
            }
        ],
    }
};
// webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist',
        hot: true
    }
});
// webpack.prod.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
    mode: 'production',
});

{
  "name": "webpackDemo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "build": "webpack --config webpack.prod.js",
    "buildDev": "webpack --config webpack.dev.js",
    "start": "webpack-dev-server --open --config webpack.dev.js",
    "server": "node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.2.3",
    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
    "@babel/plugin-transform-proto-to-assign": "^7.2.0",
    "@babel/plugin-transform-regenerator": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.4",
    "babel-plugin-add-module-exports": "^1.0.0",
    "babel-plugin-import": "^1.11.0",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "clean-webpack-plugin": "^1.0.0",
    "css-loader": "^2.0.0",
    "csv-loader": "^3.0.2",
    "express": "^4.16.4",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-middleware": "^3.4.0",
    "webpack-dev-server": "^3.1.10",
    "webpack-merge": "^4.1.5",
    "xml-loader": "^1.2.1"
  },
  "dependencies": {
    "@babel/polyfill": "^7.2.3",
    "lodash": "^4.17.11",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-loadable": "^5.5.0",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.3.1",
    "redux": "^4.0.1",
    "redux-saga": "^0.16.2",
    "webpack-hot-middleware": "^2.24.3"
  }
}

const presets = [
  [
    '@babel/preset-env',
    {
      modules: false,
      loose: true,
      targets: {
        edge: '10',
        firefox: '50',
        chrome: '52',
        safari: '8',
      },
      useBuiltIns: 'usage',
    },
  ],
  [
    '@babel/preset-react'
  ],
];
const plugins = [
  ["syntax-dynamic-import"],
  ['babel-plugin-import', {
    'libraryName': 'antd',
    'libraryDirectory': 'es',
    'style': 'css'
  }],
  [
    '@babel/plugin-transform-runtime',
    {
      'corejs': false,
      'helpers': false,
      'regenerator': true,
      'useESModules': false
    }
  ],
  ['@babel/plugin-transform-regenerator'],
  ['@babel/plugin-proposal-object-rest-spread'],
  ['@babel/plugin-proposal-class-properties'],
];
module.exports = { presets, plugins };