React + webpack 環(huán)境配置的方法步驟
本文介紹了React + webpack 環(huán)境配置的方法步驟，分享給大家，具體如下：
安裝配置Babel
babel-preset-es2015 ES6語法包，使代碼可以隨意地使用ES6的新特性。
babel-preset-react React語法包，專門用于React的優(yōu)化，在代碼中可以使用React ES6 classes的寫法，同時(shí)直接支持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和它的插件，配置一下它的規(guī)則，在根目錄下新建一個(gè).babelrc空文件：
// 告訴Babel，編譯JavaScript代碼的時(shí)候要用這兩個(gè)presets編譯
{
"preset": ["es2015", "react”]
}
安裝配置ESLint
安裝ESLint loader
為webpack添加這個(gè)preLoaders（在loader處理資源之前，先用preLoaders進(jìn)行處理，代碼檢查在代碼轉(zhuǎn)換之前進(jìn)行）
npm install eslint eslint-loader --save-dev
這里使用Airbnb開發(fā)配置合集eslint-config-airbnb，這個(gè)配置合集里面還包括以下3個(gè)插件：
npm install eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y --save-dev npm install eslint-config-eslint
配置 .eslintrc
在根目錄下新建一個(gè).eslintrc的空文件：
{
"extends": "airbnb",
"rules": {
"comma-dangle": ["error", "never"]
}
}
安裝配置webpack
配置webpack之前，先安裝一個(gè)webpack的插件——html-webpack-plugin，它可以幫助我們自動(dòng)生成HTML頁面，并且引入正確的JavaScript文件依賴：
npm install html-webpack-plugin —save-dev
在項(xiàng)根目錄下新建一個(gè)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 添加進(jìn)去
preLoaders: [
{
test: /\.jsx?$/,
loaders: ['eslint'],
include: APP_PATH
}
],
// 配置loader，將Babel添加進(jìn)去
loaders: [
{
test: /\.jsx?$/,
loaders: ['babel'],
include: APP_PATH
}
]
},
// 配置 plugin
plugins: [
new HtmlwebpackPlugin({
title: 'my first react webpack'
})
],
resolve: {
extensions: ['', '.js', '.jsx']
// 在js中import加載jsx擴(kuò)展名的腳本
}
}
添加組件熱加載（HMR）功能
npm install babel-preset-react-hrme --save-dev
這個(gè)preset里面其實(shí)包括兩方面：
- react-transform-hmr用來實(shí)現(xiàn)熱加載
- react-transform-catch-errors用來捕獲render里面的方法，并且直接展示在界面上
配置一下 .babelrc：
{
"preset": ["es2015", "react"],
"env": {
"development": {
"presets": ["react-hrme"]
}
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于antd tree和父子組件之間的傳值問題(react 總結(jié))
這篇文章主要介紹了關(guān)于antd tree 和父子組件之間的傳值問題，是小編給大家總結(jié)的一些react知識點(diǎn)，本文通過一個(gè)項(xiàng)目需求實(shí)例代碼詳解給大家介紹的非常詳細(xì)，需要的朋友可以參考下2021-06-06
react如何使用mobx6動(dòng)態(tài)加載數(shù)據(jù)
MobX是一個(gè)強(qiáng)大而簡單的狀態(tài)管理工具,它可以幫助我們更好地組織和管理React應(yīng)用程序中的數(shù)據(jù)流,本文給大家介紹react如何使用mobx6動(dòng)態(tài)加載數(shù)據(jù),感興趣的朋友跟隨小編一起看看吧2024-02-02
淺談react?16.8版本新特性以及對react開發(fā)的影響
本文主要介紹了react?16.8版本新特性以及對react開發(fā)的影響，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Reactjs實(shí)現(xiàn)通用分頁組件的實(shí)例代碼
這篇文章主要介紹了Reactjs實(shí)現(xiàn)通用分頁組件的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-01-01
本文介紹了React腳手架（CreateReactApp）的使用指南,包括創(chuàng)建項(xiàng)目、項(xiàng)目結(jié)構(gòu)、常用命令、最佳實(shí)踐、常見問題解決以及腳手架的優(yōu)勢,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-12-12
詳解React 在服務(wù)端渲染的實(shí)現(xiàn)
這篇文章主要介紹了詳解React 在服務(wù)端渲染的實(shí)現(xiàn),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
react實(shí)現(xiàn)todolist的增刪改查詳解
這篇文章主要為大家介紹了react實(shí)現(xiàn)todolist的增刪改查，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
詳解React-Native解決鍵盤遮擋問題（Keyboard遮擋問題）
本篇文章主要介紹了React-Native解決鍵盤遮擋問題（Keyboard遮擋問題），具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
React-Native實(shí)現(xiàn)ListView組件之上拉刷新實(shí)例（iOS和Android通用）
本篇文章主要介紹了React-Native實(shí)現(xiàn)ListView組件之上拉刷新實(shí)例（iOS和Android通用），具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
詳解如何用webpack4從零開始構(gòu)建react開發(fā)環(huán)境
這篇文章主要介紹了詳解如何用webpack4從零開始構(gòu)建react開發(fā)環(huán)境，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01