一、初始化项目新建文件夹，文件名firstreact 文件夹名称不要用react，node这类关键字，后面使用插件时会发生错误。init项目环境，项目信息可默认或自行修改mkdir firstreactcd firstreactnpm init二、安装webpack新建gitignore文件，用于忽略安装的包文件，文件内容: node_modules安装webpack， 注意：我此处安装的webpack版本是4.28.4，webpack4和webpack2, webpack3的一些配置不同，具体参考webpack文档webpack中文文档npm i –save-dev webpack三、配置webpack环境新建文件夹，文件名：srcsrc目录下新建文件hello.js,文件内容：module.exports = function () { var element = document.createElement(‘h1’); element.innerHTML = ‘Hello React’; return element;};src目录下新建文件index.js，文件内容：var hello = require(’./hello.js’);document.body.appendChild(hello());新建文件webpack.config.js，一个最基础的webpack配置如下：const webpack = require(‘webpack’);const path = require(‘path’);var config = { entry: [ ‘./src/index.js’ ], // 打包入口文件 output: { path: path.resolve(__dirname, ‘dist’), filename: ‘bundle.js’ } // 打包输出文件};module.exports = config;执行webpack。执行完成后，根目录下会新增一个dist文件夹，文件夹下是打包出来的js文件bundle.jswebpack安装html-webpack-plugin，该插件将为你生成一个 HTML5 文件， 其中包括使用 script 标签的 body 中的所有 webpack 包。npm i –save-dev html-webpack-plugin html-webpack-plugin配置，webpack.config.js内容如下const webpack = require(‘webpack’);const path = require(‘path’);const HtmlwebpackPlugin = require(‘html-webpack-plugin’);var config = { entry: [ ‘./src/index.js’ ], // 打包入口文件 output: { path: path.resolve(__dirname, ‘dist’), filename: ‘bundle.js’ },// 打包输出文件 plugins: [ new HtmlwebpackPlugin({ title: ‘Hello React’, }) ]};module.exports = config;再次执行webpack，此时dist目录下生成了一个新文件index.htmlwebpack安装webpack-dev-server和webpack-cli，提供一个简单的 web 服务器，并且能够实时重新加载。npm install –save-dev webpack-dev-server webpack-cli修改webpack.configconst webpack = require(‘webpack’);const path = require(‘path’);const HtmlwebpackPlugin = require(‘html-webpack-plugin’);var config = { entry: [ ‘webpack/hot/dev-server’, ‘webpack-dev-server/client?http://localhost:3000’, ‘./src/index.js’ ], // 入口文件 output: { path: path.resolve(__dirname, ‘dist’), filename: ‘bundle.js’ }, // 打包输出文件 plugins: [ new HtmlwebpackPlugin({ title: ‘Hello React’ }), ]};module.exports = config;配置webpack启动的快方式，此处webpack4在启动服务是要求设置mode，告知 webpack 使用相应模式的内置优化。未设置会报一个警告。mode选项支持“development”“production”“none”，具体信息请阅文档 修改package.json文件：············ “scripts”: { “start”: “webpack-dev-server –mode=development –port 3000 –hot”, “build”: “webpack –mode=production” }···········启动服务，服务启动后打开浏览器访问http://localhost:3000/npm run dev三、优化开发环境css编译和js编译。现在开发时一般css都会使用扩展css语法，如less或sass，这时就需要在项目中安装css编译插件。此处以less为例。es6和es7语法也需要babel编译。const webpack = require(‘webpack’);const path = require(‘path’);const HtmlwebpackPlugin = require(‘html-webpack-plugin’);var config = { entry: [ ‘webpack/hot/dev-server’, ‘webpack-dev-server/client?http://localhost:3000’, ‘./src/index.js’ ], // 入口文件 output: { path: path.resolve(__dirname, ‘dist’), filename: ‘bundle.js’ }, // 打包输出文件 module: { rules: [ { test: /.less$/, use: [ { loader: ‘style-loader’ }, { loader: ‘css-loader’ }, { loader: ’less-loader’ } ] }, { test: /.js$/, exclude: /node_modules/, use: [ { loader: ‘babel-loader’ } ] } ] }, plugins: [ new HtmlwebpackPlugin({ title: ‘Hello React’ }), ]安装：npm i –save-dev less css-loader style-loader less-loadernpm i –save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react 修改webpack.config.jsconst webpack = require(‘webpack’);const path = require(‘path’);const HtmlwebpackPlugin = require(‘html-webpack-plugin’);var config = { entry: [ ‘webpack/hot/dev-server’, ‘webpack-dev-server/client?http://localhost:3000’, ‘./src/index.js’ ], // 入口文件 output: { path: path.resolve(__dirname, ‘dist’), filename: ‘bundle.js’ }, // 打包输出文件 module: { rules: [ { test: /.less$/, use: [ { loader: ‘style-loader’ }, { loader: ‘css-loader’ }, { loader: ’less-loader’ } ] }, { test: /.js$/, exclude: /node_modules/, use: [ { loader: ‘babel-loader’ } ] } ] }, plugins: [ new HtmlwebpackPlugin({ title: ‘Hello React’ }), ]};module.exports = config;根目录下新建.babelrc文件，配置文件内容如下{ “presets”: [ “@babel/preset-env”, “@babel/preset-react” ]}在src目录下新建文件index.less，文件内容如下body{ h1{ color: green; }}修改src目录下的index.js文件：import hello from ‘./hello.js’;import ‘./index.less’;document.body.appendChild(hello());再次启动服务npm run start目前为止完成了一个最基础的项目结构，后面需要使用其他框架的话再此基础上修改。在这过程中因各个插件工具的版本不同可能会发生不同错误，遇到错误时，请查询相关文档。四、在项目中使用React安装react。npm i –save-dev react react-dom修改src目录下index.js，文件内容如下：import React from ‘react’;import ReactDOM from ‘react-dom’;import ‘./index.less’;class APP extends React.Component { render() { return (<h1>Hello React</h1>) }}ReactDOM.render(<APP/>, document.getElementById(‘content’));在src目录下新建index.html，在html增加挂载节点content。 文件内容如下:<!DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <title><%= htmlWebpackPlugin.options.title %></title></head><body> <div id=“content”></div></body></html>对应修改webpack.config.js文件，为htmlWebpackPlugin修改template············ plugins: [ new HtmlwebpackPlugin({ title: ‘Hello React’, template: ‘./src/index.html’ }), ] ············目录结构为：│ .babelrc│ .gitignore│ package.json│ webpack.config.js│ └─src hello.js index.html index.js index.less