您的位置：首页 > Web前端 > React

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

2017-09-07 09:11 1121 查看

本文介绍了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"]
}
}
}

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

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： React webpack

相关文章推荐

新的分享

章节导航