React + webpack 环境配置的方法步骤

// 安装babel-core核心模块和babel-loader
npm install babel-core babel-loader --save-dev


// 安装ES6 和 React 支持
npm install babel-preset-es2015 babel-preset-react --save-dev

// 告诉Babel，编译JavaScript代码的时候要用这两个presets编译
 {
  "preset": ["es2015", "react”]
 }

npm install eslint eslint-loader --save-dev

npm install eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y --save-dev

npm install eslint-config-eslint

{
  "extends": "airbnb",
  "rules": {
   "comma-dangle": ["error", "never"]
  }
 }

npm install html-webpack-plugin —save-dev

let path = require('path') 
let webpack = require('webpack')
let HtmlwebpackPlugin = require('html-webpack-plugin')
// 一些常用路径
const ROOT_PATH = path.resolve(__dirname)
const APP_PATH = path.resolve(ROOT_PATH, 'app')
const BUILD_PATH = path.resolve(ROOT_PATH, 'build')

module.exports = {
 entry: {
  app: path.resolve(APP_PATH, 'index.jsx')
 },
 output: {
  path: BUILD_PATH,
  filename: 'bundle.js'
 },
 // 开启 dev source map
 devtool: 'eval-source-map',
 // 开启 webpack dev server
 devServer: {
  historyApiFallback: true,
  hot: true,
  inline: true,
  progress: true
 },

 modules: {
  // 配置preLoaders, 将eslint 添加进去
  preLoaders: [
   {
    test: /\.jsx"htmlcode">

npm install babel-preset-react-hrme --save-dev


这个preset里面其实包括两方面：

  
react-transform-hmr用来实现热加载
  
react-transform-catch-errors用来捕获render里面的方法，并且直接展示在界面上

配置一下 .babelrc：


{
 "preset": ["es2015", "react"],
 "env": {
  "development": {
   "presets": ["react-hrme"]
  }
 }
}


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。