react webpack 配置

.babelrc

{ "presets": [ [ "@babel/preset-env", { "targets": { // 大于相关浏览器版本无需用到 preset-env "edge": 17, "firefox": 60, "chrome": 67, "safari": 11.1 }, // 根据代码逻辑中用到的 ES6+语法进行方法的导入,而不是全部导入 "useBuiltIns": "usage" } ] ], "plugins": ["react-hot-loader/babel", "@babel/plugin-transform-react-jsx"] }

webpack 基本配置

```

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

  entry: {

    app: './App.js',

  },

  output: {

    filename: 'bundle.js',

    path: path.resolve(__dirname, '../dist'),

    publicPath: '/'

  },

  module: {

    rules: [

      {

        test: /\.(js|jsx)$/,

        use: ['babel-loader'],

        exclude: /node_modules/,

      },

      {

        test: /\.css$/,

        use: ['style-loader', 'css-loader'],

        exclude: /node_modules/,

      }

    ]

  },

  plugins: [

    new HtmlWebpackPlugin({

      filename: 'index.html',

      template: path.resolve(__dirname, '../public/index.html')

    })

  ]

}

```

你可能感兴趣的:(react webpack 配置)