本文介紹了React + webpack 環(huán)境配置的方法步驟，分享給大家，具體如下：
公司主營業(yè)務(wù)：網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出榆陽免費(fèi)做網(wǎng)站回饋大家。
安裝配置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，它可以幫助我們自動生成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í)包括兩方面：
配置一下 .babelrc：
{
"preset": ["es2015", "react"],
"env": {
"development": {
"presets": ["react-hrme"]
}
}
}以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
