React + webpack 环境配置的方法步骤
本文介绍了React+webpack环境配置的方法步骤，分享给大家，具体如下：
安装配置Babel
babel-preset-es2015ES6语法包，使代码可以随意地使用ES6的新特性。
babel-preset-reactReact语法包，专门用于React的优化，在代码中可以使用ReactES6classes的写法，同时直接支持JSX语法格式
安装Babelloader
//安装babel-core核心模块和babel-loader npminstallbabel-corebabel-loader--save-dev //安装ES6和React支持 npminstallbabel-preset-es2015babel-preset-react--save-dev
配置.babelrc
安装完Babel和它的插件，配置一下它的规则，在根目录下新建一个.babelrc空文件：
//告诉Babel，编译JavaScript代码的时候要用这两个presets编译
{
"preset":["es2015","react”]
}
安装配置ESLint
安装ESLintloader
为webpack添加这个preLoaders（在loader处理资源之前，先用preLoaders进行处理，代码检查在代码转换之前进行）
npminstalleslinteslint-loader--save-dev
这里使用Airbnb开发配置合集eslint-config-airbnb，这个配置合集里面还包括以下3个插件：
npminstalleslint-plugin-importeslint-plugin-reacteslint-plugin-jsx-a11y--save-dev npminstalleslint-config-eslint
配置.eslintrc
在根目录下新建一个.eslintrc的空文件：
{
"extends":"airbnb",
"rules":{
"comma-dangle":["error","never"]
}
}
安装配置webpack
配置webpack之前，先安装一个webpack的插件——html-webpack-plugin，它可以帮助我们自动生成HTML页面，并且引入正确的JavaScript文件依赖：
npminstallhtml-webpack-plugin—save-dev
在项根目录下新建一个webpack.config.js文件:
letpath=require('path')
letwebpack=require('webpack')
letHtmlwebpackPlugin=require('html-webpack-plugin')
//一些常用路径
constROOT_PATH=path.resolve(__dirname)
constAPP_PATH=path.resolve(ROOT_PATH,'app')
constBUILD_PATH=path.resolve(ROOT_PATH,'build')
module.exports={
entry:{
app:path.resolve(APP_PATH,'index.jsx')
},
output:{
path:BUILD_PATH,
filename:'bundle.js'
},
//开启devsourcemap
devtool:'eval-source-map',
//开启webpackdevserver
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:[
newHtmlwebpackPlugin({
title:'myfirstreactwebpack'
})
],
resolve:{
extensions:['','.js','.jsx']
//在js中import加载jsx扩展名的脚本
}
}
添加组件热加载（HMR）功能
npminstallbabel-preset-react-hrme--save-dev
这个preset里面其实包括两方面：
- react-transform-hmr用来实现热加载
- react-transform-catch-errors用来捕获render里面的方法，并且直接展示在界面上
配置一下.babelrc：
{
"preset":["es2015","react"],
"env":{
"development":{
"presets":["react-hrme"]
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。