React + webpack 環境配置的方法步驟

來源：懂視網責編：小采時間：2020-11-27 22:30:53

React + webpack 環境配置的方法步驟

React + webpack 環境配置的方法步驟:本文介紹了React + webpack 環境配置的方法步驟，分享給大家，具體如下：安裝配置Babel babel-preset-es2015 ES6語法包，使代碼可以隨意地使用ES6的新特性。 babel-preset-react React語法包，專門用于React的優化，在代碼中可以使用React

推薦度：

點擊下載本文 文檔為doc格式

導讀React + webpack 環境配置的方法步驟:本文介紹了React + webpack 環境配置的方法步驟，分享給大家，具體如下：安裝配置Babel babel-preset-es2015 ES6語法包，使代碼可以隨意地使用ES6的新特性。 babel-preset-react React語法包，專門用于React的優化，在代碼中可以使用React

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

React + webpack 環境配置的方法步驟

推薦度：

點擊下載本文 文檔為doc格式

標簽：步驟配置環境

熱門焦點

React + webpack 環境配置的方法步驟

React + webpack 環境配置的方法步驟

React + webpack 環境配置的方法步驟

最新推薦

猜你喜歡

熱門推薦