2.1 采用create react app 编写create-react-app项目 [[点击前往Github]](https://github.com/facebook/c… 是facebook推出的入门初始化项目，适合新手第一次使用，无需进行各种配置，完美的实现了开箱即用理念。2.1.1 建立项目npx create-react-app my-appcd my-appnpm startnpx命令是npm在5.x版本之后推出的一个增强功能，它帮助开发者可以临时下载项目进行执行之后，会自动删除这个临时下载的项目。不会在全局项目中生成文件。上面的命令，表示，下载create-react-app项目，并且运行这个项目，在my-app目录中创建新项目。2.1.2 运行项目创建完成之后，进入 my-app 目录。执行npm语句，进行本地开发预览。我们进入这个创建好的文件夹my-app,执行npm run start即可进入本地开发预览了。如图所示，我们已经在本地端口3000上运行了这个程序。快打开你的浏览器查看一下吧。2.2 手动配置webpack编写这个章节有点超纲，有兴趣的同学可以仔细阅读一下。这一节是针对有兴趣深入了解的同学的，如果你现在一下子还是无法理解这些知识，建议后面再来回顾。2.2.1 建立项目我们首先创建一个webpack-app文件夹。然后使用VS Code打开这个目录。使用Ctrl+~键打开控制台，如果无法打开说明热键已经被占用了。点击菜单的 查看 -> 终端。第一步先输入npm init 建立前端项目的配置文件。直接一路回车到结束。2.2.2 安装必要的开发包安装react,react-dom两个包npm install –save-dev react react-dom安装webpacknpm install –save-dev webpack-cli webpack webpack-dev-server2.2.3 编写一个react的hello world首先我们编写一个HelloWorld的React组件import React, { PureComponent } from ‘react’export default class index extends PureComponent { render() { return ( <div> Hello world React! </div> ) }}但是这仅仅是一个组件，我们需要一个HTML页面来容纳React的组件。<!DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <meta http-equiv=“X-UA-Compatible” content=“ie=edge”> <title>Helloworld React</title></head><body> <div id=“app”></div></body></html>到这一步，React需要准备的东西已经完成了。我们需要来编写webpack对这个项目进行打包，而webpack对开发提供的DevServer的支持，让我们来看一看，到底怎么做的。我们在项目根目录中创建一个名为’webpack.config.js’的文件。const path = require(‘path’)module.exports = { mode:‘development’, entry: ‘./src/index.js’, context: __dirname, target: ‘web’, devServer: { proxy: {}, contentBase: path.join(__dirname, ‘public’), historyApiFallback: true, hot: true, noInfo: true, port: 3000 }}配置完webpack.config.js文件之后，我们将在packageInfo.json中的scripts节点加入一个新的命令。 “scripts”: { “test”: “echo "Error: no test specified" && exit 1”, “dev”: “webpack-dev-server” },我们在终端运行npm run dev之后，你将会在控制台中看到如下内容。webpack编译之后告诉我们，它无法识别JSX格式。这个问题就延伸出了，我们该如何对现代化的前端进行配置。现在对于前端代码的转换，通常采用的是babel转译。我们来看看编译react需要哪些插件。点此查看babel如何配置webpack首先，我们需要安装babel,在终端输入npm install –save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react我们修改webpack.config.js文件，让他看起来像这样const path = require(‘path’)const HtmlWebpackPlugin = require(‘html-webpack-plugin’);module.exports = { mode: ‘development’, entry: ‘./src/entry.js’, context: __dirname, target: ‘web’, devServer: { proxy: {}, contentBase: path.join(__dirname, ‘public’), port: 3000 }, module: { rules: [{ test: /.js$/, exclude: /node_modules/, loader: “babel-loader” }] }, plugins: [ new HtmlWebpackPlugin( Object.assign({}, { inject: true, template: __dirname + ‘/public/index.html’, }) ), ]}在根目录创建.bablerc文件，这个文件是用于配置babel编译的,在文件中输入以下内容。{ “presets”: ["@babel/preset-env","@babel/preset-react"]}不知道你是否注意到了，我修改了entry入口文件。因为仅仅一个React组件并无法正常运行，我们需要告知React框架，我们将组件注入在哪个DOM下，这个文件可以配置全局的Store、路由、全局的设定等。我们在src目录下创建entry.js,下面是entry.js文件的源码。import React from ‘react’;import ReactDOM from ‘react-dom’;import Index from ‘./index’;ReactDOM.render(<Index />, document.querySelector(’#app’));代码非常的简单，就是调用ReactDOM将React组件渲染到了id为app的节点下。OK,现在我们再次运行npm run dev，你将会看到webpack编译成功的提示，我们现在打开浏览器，输入http://localhost:3000，你将会看到运行编译成功的网页。2.2.4 webpack加入HMR支持(热更新)大家有没有发现，我们现在这个项目修改了之后，是需要刷新整个页面的。并没有那种很高端很大气的动态刷新？现在我们就将热更新加入我们的项目中。我们将webpack.config.js文件做如下修改const path = require(‘path’)const HtmlWebpackPlugin = require(‘html-webpack-plugin’);const webpack = require(‘webpack’)module.exports = { mode: ‘development’, entry: [ ‘webpack/hot/dev-server’, ‘./src/entry.js’ ], output: { filename: ‘[name].bundle.js’, path: path.resolve(__dirname, ‘dist’) }, context: __dirname, target: ‘web’, devServer: { proxy: {}, contentBase: path.join(__dirname, ‘public’), hot: true, port: 3000 }, module: { rules: [{ test: /.js$/, exclude: /node_modules/, loader: “babel-loader” }] }, plugins: [ new HtmlWebpackPlugin( Object.assign({}, { inject: true, template: __dirname + ‘/public/index.html’, }) ), new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin() ]}注意到了么，我们新增了NamedModulesPlugin和HotModuleReplacementPlugin两个插件。还在devServer节点中加入了hot:true，并且追加了output节点。然后，我们将entry.js文件修改为这样：import React from ‘react’;import ReactDOM from ‘react-dom’;import Index from ‘./index’;ReactDOM.render( < Index / > , document.querySelector(’#app’));if (module.hot) { module.hot.accept()}我们再次使用npm run dev运行项目，然后修改index.js文件中的字符串，你会发现，现在是无刷新更新页面内容了。2.2.5 webpack优化打包速度我们在package.json的scripts节点中加入一条新语句"webpack":“webpack”,然后来看一看现在项目默认的打包速度是多少时间。耗时:2211ms2.2.5.1 babel缓存我们修改webpack.config.js文件中的babel配置项 module: { rules: [{ test: /.js$/, exclude: /node_modules/, loader: “babel-loader?cacheDirectory=true” }] },在babel-loader后面加入了cacheDirectory=true，再次执行编译，第一次你会发现速度并没有优化，这是因为还没有建立缓存文件，但是第二次速度就提升了20%。耗时:1644ms (-500ms)其他的包括抽取公共组件，加入hash等等策略我们以后再细聊。源码下载地址:https://github.com/yodfz/learn-webpack-react-config原文地址:https://www.yodfz.com/detail/…