解析es6、jsx

webpack不能直接解析es6和jsx代码，所以要进行解析，解析都是使用的loader。

一、es6解析

首先，我们要在webpack.config.js文件中配置规则，对js文件使用babel-loader进行解析。

const path = require("path");const HtmlWebpacPlugins = reques("html-webpack-plugin");module.exports = {  mode: "development",  entry: "./src/index.js",  output: {    path: path.join(__dirname, "dist"),    filename: "bundle.js",  },  module: {    rules: [      {        test: /\.js$/,        use: "babel-loader",      },    ],  },  plugins: [new HtmlWebpacPlugin({ template: "./src/index.html" })],};

babel-loader是依赖babel的，所以我们要创建一个.babelrc文件，去解析es6代码。

安装@babel/preset-env 和babel-loader

.babelrc文件配置如下：

{  "presets": ["@babel/preset-env"]}

二、解析React JSX

在.babelrc文件的presets文件中增加@babel/preset-react的配置就可以了（要下载安装）。