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

本文介绍了react + webpack 环境配置的方法步骤，分享给大家，具体如下：

安装配置babel

babel-preset-es2015 es6语法包，使代码可以随意地使用es6的新特性。

babel-preset-react react语法包，专门用于react的优化，在代码中可以使用react es6 classes的写法，同时直接支持jsx语法格式

安装babel loader

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


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

配置 .babelrc

安装完babel和它的插件，配置一下它的规则，在根目录下新建一个.babelrc空文件：

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

安装配置eslint

安装eslint loader

为webpack添加这个preloaders（在loader处理资源之前，先用preloaders进行处理，代码检查在代码转换之前进行）

npm install eslint eslint-loader --save-dev

这里使用airbnb开发配置合集eslint-config-airbnb，这个配置合集里面还包括以下3个插件：

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

npm install eslint-config-eslint

配置 .eslintrc

在根目录下新建一个.eslintrc的空文件：

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

安装配置webpack

配置webpack之前，先安装一个webpack的插件——html-webpack-plugin，它可以帮助我们自动生成html页面，并且引入正确的javascript文件依赖：

npm install html-webpack-plugin —save-dev

在项根目录下新建一个webpack.config.js文件:

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?$/,
    loaders: ['eslint'],
    include: app_path
   }
  ],
  
  // 配置loader，将babel添加进去
  loaders: [
   {
    test: /\.jsx?$/,
    loaders: ['babel'],
    include: app_path
   }
  ]
 },

 // 配置 plugin
 plugins: [
  new htmlwebpackplugin({
   title: 'my first react webpack'
  })
 ],
 resolve: {
  extensions: ['', '.js', '.jsx']
  // 在js中import加载jsx扩展名的脚本
 }
}

添加组件热加载（hmr）功能

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"]
  }
 }
}

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