简评：相信很多开发者在入门 react 的时候都是使用 create-react-app 或 react-slingshot 这些脚手架来快速创建应用，当有特殊需求，需要修改 eject 出来的 webpack 配置文件时，面对各种配置项不知如何下手，本文会介绍如何使用 webpack 手动搭建一个 react 项目。

新建工程

1.先新建一个 demo 项目，项目目录结构为：

2.在工程根目录新建 index.html 文件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>My React Boilerplate</title>
  8. </head>
  9. <body>
  10.   <div id="app"></div>
  11. </body>
  12. </html>

3.安装 react react-dom 依赖：

  1. npm i react react-dom

4.创建应用 /src/components/App.js

  1. import React, { Component } from 'react'
  3. class App extends Component {
  4.   render() {
  5.     return (
  6.       <div>
  7.         <h1>Welcome to My Starter App</h1>
  8.       </div>
  9.     )
  10.   }
  11. }
  13. export default App

5.创建 /src/index.js

  1. import React from 'react'
  2. import ReactDOM from 'react-dom'
  3. import App from './components/App'
  5. import './styles/style.sass'
  7. ReactDOM.render(
  8.   <App />,
  9.   document.getElementById('app')
  10. )

以上就是我们的 demo 工程。如果我们通过 react-create-app 上面的代码已经可以正常运行了，但是现在的代码没有进行任何的处理无法直接在浏览器中运行。

我们需要将 jsx 和 ES6 代码转换成浏览器中可运行的代码。

Babel

Babel 就是为了处理上面的问题，我们可以使用 JavaScript 最新的语法特性，然后使用 babel 插件对代码进行转换以达到最大的兼容性。首先安装相关依赖：

  1. npm i babel-cli babel-core babel-preset-env babel-preset-react babel-preset-stage-2--save-dev

然后在工程跟目录创建一个 .babelrc 配置文件，内容为：

  1. {
  2.     "presets": ["env", "react", "stage-2"]
  3. }

参数说明：

  • env：表示包含 babel-preset-es2015,babel-preset-es2016和babel-preset-es2017，意味着我们可以编写 ES6，ES7，和 ES8 的代码。
  • react：这个选项指明处理 React 的相关不能，不如 JSX。
  • stage-2：运行我们使用当前处于阶段 2 或更高阶段的 javascript 功能更多信息可以参考 TC39。

测试

刚才已经创建了 App.js 的 React 组件，并且安装配置了 babel，为了代码的健壮性我们再添加测试环境这里使用 Jest 和 Enzyme。

1.安装依赖：

  1. npm i jest enzyme enzyme-adapter-react-16 react-test-renderer --save-dev

2.然后创建 /test/enzyme.setup.js 文件，添加如下代码：

  1. import Enzyme from 'enzyme'
  2. import Adapter from 'enzyme-adapter-react-16'
  4. Enzyme.configure({
  5.     adapter: new Adapter()
  6. })

3.在 package.json 中添加 jest 功能字段：

  1. {
  2. ...,
  3. "jest": {
  4.     "setupTestFrameworkScriptFile": "./test/enzyme.setup.js"
  5.   },
  6. ...
  7. }

4.编写测试代码：

创建 /test/App.test.js 文件，为 App 组件编写测试代码：

  1. import App from '../src/components/App'
  2. import React from 'react'
  3. import { shallow } from 'enzyme'
  5. describe('App', () => {
  6.   test('should match snapshot', () => {
  7.     const wrapper = shallow(<App />)
  9.     expect(wrapper.find('h1').text()).toBe('Welcome to My Starter App')
  10.     expect(wrapper).toMatchSnapshot
  11.   })
  12. })

当执行 jest ./test 来启动测试代码。

为了方便可以将他添加到 package.json 中：

  1. {
  2.   ...,
  3.   "scripts": {
  4.     "test": "jest ./test"
  5.   }
  6. }

Webpack

webpack 可以将我们工程代码打包到一个文件中，比如我们有很多个 js 代码相互依赖，打包的时候会将这些 js 文件合并成一个文件，还可以使用插件来预处理和处理最终生成的代码。

1.安装 webpack 依赖：

  1. npm i webpack --save-dev

webpack 运行的时候回自动找到项目根目录的 webpack.config.js 文件，所以我们可以先创建这个文件，并加入如下代码。

  1. const path = require('path')
  3. module.exports = {
  4.   entry: {
  5.     main: './src/index.js'
  6.   },
  7.   output: {
  8.     filename: '[name].[hash].js',
  9.     path: path.resolve('./dist'),
  10.   }
  11. }

entry 指明入口文件，webpack 会从这个文件开始连接所有的依赖。 output 指明打包后的文件存放的位置。

Webpack loaders

loaders 可以让 webpack 处理很多不同格式的文件（例如:图片、CSS 、 JSX ...），

这里我们没有用到图片和 CSS 资源，只需要处理 ES6 和 JSX，只需要 babel-loader。

1.安装 babel-loader:

  1. npm i babel-loader --save-dev

然后在 webpack.config.js 文件中添加打包规则添加后代码如下：

  1. const path = require('path')
  3. module.exports = {
  4.   entry: {
  5.     main: './src/index.js'
  6.   },
  7.   output: {
  8.     filename: '[name].[hash].js',
  9.     path: path.resolve('./dist'),
  10.   },
  11.   module: {
  12.     rules: [
  13.       {
  14.         test: /\.js$/,
  15.         exclude: ['node_modules'],
  16.         use: [{ loader: 'babel-loader' }],
  17.       }
  18.     ]
  19. }

2.如果需要使用 Sass 和 SCSS，我们需要其他的 loader。

  1. npm i node-sass sass-loader style-loader css-loader --save-dev

然后在 webpack.config.js 中添加 sass 和 scss 文件的转换规则，最终代码如下：

  1. const path = require('path')
  3. module.exports = {
  4.   entry: {
  5.     main: './src/index.js'
  6.   },
  7.   output: {
  8.     filename: '[name].[hash].js',
  9.     path: path.resolve('./dist'),
  10.   },
  11.   module: {
  12.     rules: [
  13.       {
  14.         test: /\.js$/,
  15.         exclude: ['node_modules'],
  16.         use: [{ loader: 'babel-loader' }],
  17.       },
  18.       {
  19.         test: /\.s(a|c)ss$/,
  20.         use: [{
  21.           loader: 'style-loader'
  22.         }, {
  23.           loader: 'css-loader'
  24.         }, {
  25.           loader: 'sass-loader'
  26.         }],
  27.        }
  28.     ]
  29. }

现在可以在工程中使用 Sass 了，创建 /src/styles/style.sass 文件，并添加如下代码：

  1. body
  2.   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
  3.   color: white
  4.   background: black

然后在 index.js 带人 style.sass:

  1. import React from 'react'
  2. import ReactDOM from 'react-dom'
  3. import App from './components/App'
  5. import './styles/style.sass'
  7. ReactDOM.render(
  8.   <App />,
  9.   document.getElementById('app')

3.现在有一个需求，我们需要将打包后的 js 文件自动导入到 html 文件中，我们可以使用 html-webpack-plugin 自动完成这部分内容。

安装 html-webpack-plugin：

  1. npm i html-webpack-plugin --save-dev

然后在 webpack.config.js 中导入这个插件：

  1. const CleanWebpackPlugin = require('clean-webpack-plugin')
  2. const path = require('path')
  4. module.exports = {
  5.   entry: {
  6.     main: './src/index.js'
  7.   },
  8.   output: {
  9.     filename: '[name].[hash].js',
  10.     path: path.resolve('./dist'),
  11.   },
  12.   module: {
  13.     rules: [
  14.       {
  15.         test: /\.js$/,
  16.         exclude: ['node_modules'],
  17.         use: [{ loader: 'babel-loader' }],
  18.       },
  19.       {
  20.         test: /\.s(a|c)ss$/,
  21.         use: [{
  22.           loader: 'style-loader'
  23.         }, {
  24.           loader: 'css-loader'
  25.         }, {
  26.           loader: 'sass-loader'
  27.         }],
  28.    	  }
  29.     ]
  30.   },
  31.   plugins: [
  32.     new HtmlWebPackPlugin({
  33.       template: 'index.html'
  34.     })
  35.   ]
  36. }

当每次 build 的时候的时候会在 dist 目录中生成打包后的文件，我们需要打包时清除这些内容可以使用 clean-webpack-plugin 插件：

  1. npm i clean-webpack-plugin --save-dev

在 webpack.config.js 中添加 clean-webpack-plugin:

  1. const CleanWebpackPlugin = require('clean-webpack-plugin')
  2. const HtmlWebPackPlugin = require('html-webpack-plugin')
  3. const path = require('path')
  5. module.exports = {
  6.   entry: {
  7.     main: './src/index.js'
  8.   },
  9.   output: {
  10.     filename: '[name].[hash].js',
  11.     path: path.resolve('./dist'),
  12.   },
  13.   module: {
  14.     rules: [
  15.       {
  16.         test: /\.js$/,
  17.         exclude: ['node_modules'],
  18.         use: [{ loader: 'babel-loader' }],
  19.       },
  20.       {
  21.         test: /\.s(a|c)ss$/,
  22.         use: [{
  23.           loader: 'style-loader'
  24.         }, {
  25.           loader: 'css-loader'
  26.         }, {
  27.           loader: 'sass-loader'
  28.         }],
  29.    	  }
  30.     ]
  31.   },
  32.   plugins: [
  33.     new HtmlWebPackPlugin({
  34.       template: 'index.html'
  35.     }),
  36.     new CleanWebpackPlugin(['dist']),
  37.   ]
  38. }

所有的 plugin 和 loader 已经加载完了，为了方便我们开发，还需要 webpack 开发服务器，这样我们就可以实时查看代码修改的效果了。

  1. npm i webpack-cli webpack-dev-server --save-dev

在 webpack.config.js 中添加 devServer 字段:

  1. const CleanWebpackPlugin = require('clean-webpack-plugin')
  2. const HtmlWebPackPlugin = require('html-webpack-plugin')
  3. const path = require('path')
  5. module.exports = {
  6.   entry: {
  7.     main: './src/index.js'
  8.   },
  9.   output: {
  10.     filename: '[name].[hash].js',
  11.     path: path.resolve('./dist'),
  12.   },
  13.   module: {
  14.     rules: [
  15.       {
  16.         test: /\.js$/,
  17.         exclude: ['node_modules'],
  18.         use: [{ loader: 'babel-loader' }],
  19.       },
  20.       {
  21.         test: /\.s(a|c)ss$/,
  22.         use: [{
  23.           loader: 'style-loader'
  24.         }, {
  25.           loader: 'css-loader'
  26.         }, {
  27.           loader: 'sass-loader'
  28.         }],
  29.    	  }
  30.     ]
  31.   },
  32.   plugins: [
  33.     new HtmlWebPackPlugin({
  34.       template: 'index.html'
  35.     }),
  36.     new CleanWebpackPlugin(['dist']),
  37.   ],
  38.   devServer: {
  39.     host: 'localhost',
  40.     port: 3000,
  41.     open: true
  42.   }
  43. }

为了方便运行，可以将 webpack-dev-server 命令添加到 package.json 中：

  1. {
  2.   ...
  3.   "scripts": {
  4.     "start": "webpack-dev-server",
  5.     "test": "jest ./test"
  6.   },
  7. }

现在只需要 npm start 就可以查看 demo 的运行效果，到这里 react webpack 项目开发环境已经算是搭建完成。

但是这个配置没有对生产环境做区分，也就是说生产环境的代码和开发环境代码一样，但实际开发中往往需要对生产环境代码做优化比如（压缩 js代码，修改变量名和方法名），在开发环境中为了编译调试又不希望优化这部分内容。我们可以将两种环境区分开来。

这个时候有可以用到这个插件 webpack-merge：

  1. npm i webpack-merge --save-dev

现在我们可以将原来的 webpack 配置文件分离成三个文件，

webpack.common.js 存放公共配置项：

  1. const CleanWebpackPlugin = require('clean-webpack-plugin')
  2. const HtmlWebPackPlugin = require('html-webpack-plugin')
  3. const path = require('path')
  5. module.exports = {
  6.   entry: {
  7.     main: './src/index.js'
  8.   },
  9.   output: {
  10.     filename: '[name].[hash].js',
  11.     path: path.resolve('./dist'),
  12.   },
  13.   module: {
  14.     rules: [
  15.       {
  16.         test: /\.js$/,
  17.         exclude: ['node_modules'],
  18.         use: [{ loader: 'babel-loader' }],
  19.       },
  20.       {
  21.         test: /\.s(a|c)ss$/,
  22.         use: [{
  23.           loader: 'style-loader'
  24.         }, {
  25.           loader: 'css-loader'
  26.         }, {
  27.           loader: 'sass-loader'
  28.         }],
  29.    	  }
  30.     ]
  31.   },
  32.   plugins: [
  33.     new HtmlWebPackPlugin({
  34.       template: 'index.html'
  35.     }),
  36.     new CleanWebpackPlugin(['dist']),
  37.   ]
  38. }

webpack.dev.js 在通用配置项基础上添加开发环境配置项：

  1. const merge = require('webpack-merge');
  2. const common = require('./webpack.common.js');
  4. module.exports = merge(common, {
  5.   mode: 'development',
  6.   devServer: {
  7.     host: 'localhost',
  8.     port: 3000,
  9.     open: true
  10.   }
  11. })

webpack.prod.js 在通用配置项基础上中添加生成环境配置项：

  1. const merge = require('webpack-merge');
  2. const common = require('./webpack.common.js');
  4. module.exports = merge(common, {
  5.   mode: 'production',
  6. })

最后在 package.json 中添加生产环境打包脚本：

  1. {
  2.   ...
  3.   "scripts": {
  4.     "build": "webpack --config webpack.prod.js",
  5.     "start": "webpack-dev-server --config webpack.dev.js",
  6.     "test": "jest ./test"
  7.   },
  8. }

原文：How to build your own React boilerplate

使用 webpack 搭建 React 项目的更多相关文章

  1. 使用webpack搭建react项目 webpack-react-project

    webpack-react-project 使用webpack搭建react项目 webpack搭建react项目 github源码 具体配置信息参照package.json和webpack.conf ...

  2. 基于webpack的React项目搭建(一)

    前言 工欲善其事,必先利其器.为了更好的学习React,我们先简要的把开发环境搭建起来.本文主要介绍使用webpack搭建React项目,如果你对React或es6的基础语法还不了解,建议先去学习学习 ...

  3. 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)

    开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...

  4. [Web 前端] webstorm 快速搭建react项目

    cp from : https://blog.csdn.net/qq_39207948/article/details/79467144 前端新手如何安装webstorm ,初步搭建react项目 下 ...

  5. webpack搭建vue项目开发环境【文档向学习】

    为何有这篇文章 各个社区已经有无数篇帖子介绍如何使用webpack搭建前端项目,但无论是出于学习webpack的目的还是为了解决工作实际需要都面临着一个现实问题,那就是版本更新.别人的帖子可能刚写好版 ...

  6. 使用脚手架快速搭建React项目

    create-react-app是Facebook官方推出的脚手架,基本可以零配置搭建基于webpack的React开发环境步骤: 打开控制台 进入你想要创建项目的目录文件下面 依次执行以下命令 np ...

  7. webpack 搭建React（手动搭建）

    前言 最近真的都是在瞎学,看到自己不是很明白的东西,都喜欢自己手动去敲1到3遍(晚上下班的时候咯), 瞧,React  基于webpack 搭建,react 官方有一套手脚架工具,我自己也搭建过确实挺 ...

  8. 从零开始使用 webpack5 搭建 react 项目

    本文的示例项目源码可以点击 这里 获取 一.前言 webpack5 也已经发布一段时间了,其模块联邦.bundle 缓存等新特性值得在项目中进行使用.经过笔者在公司实际项目中的升级结果来看,其提升效果 ...

  9. 快速搞定用Vue+Webpack搭建前端项目（学习好久了，该写点东西了......）

    现在开始安装环境 一.安装node.js 首先要安装node.js,去nodejs官网下载即可,地址:http://nodejs.cn/中文网. 安装完成后,打开终端(windows键+R)搜索cmd ...

随机推荐

  1. Flume NG 配置详解

    配置 设置代理 Flume代理配置存储在本地配置文件.这是一个文本文件格式,是Java属性文件格式.在相同的配置文件,可以指定一个或多个代理的配置.配置文件包括每个源,接收器和通道,把它们连接在一起, ...

  2. 关于checkbox操作 table

    引入 Validform验证 <script type="text/javascript">          //添加操作       crrTrTdCkId=1;  ...

  3. Linux 下启动两个tomcat

    Linux 下启动两个tomcat 闲来无事学习nginx,想要配置个load balance.可是先决条件是:得有两个web容器.两个电脑是不用想了.只能想办法在一个机器上启动两个tomcat.原以 ...

  4. Jenkins持续集成构建

    配置Sonar.Jenkins进行持续审查 http://go2live.cn/archives/38261.html Jenkins iOS 项目持续集成 http://go2live.cn/arc ...

  5. StringUtils详解

    public static void StringUtil(){ //null 和 ""操作~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //判断是否 ...

  6. Red Hat 6.5 Samba服务器的搭建（登录访问）

    搭建Samba服务器是为了实现Linux共享目录之后,在Windows可以直接访问该共享目录. 现在介绍如何在红帽6.5系统中搭建Samba服务. 搭建Samba服务之前,yum源必须配置好,本地源和 ...

  7. Excel分类汇总与数据有效性

    分类汇总就是把一些数据按照一个标准进行分类,然后按照相应的汇总方式进行汇总. 使用分类汇总之前先排序,否则汇总会出现很多类. 看如上这个表,如果按照所属区域分类,然后按照金额的总和汇总,在汇总之前就要 ...

  8. 不使用库函数sqrt实现求一个数的平方根

    二分法: double mysqrt(double a) { ) ; , end = a; ) end = ; while(end - start > precision) { ; if( mi ...

  9. Go 面向对象概念

    前言: 本文是学习<<go语言程序设计>> -- 清华大学出版社(王鹏 编著) 的2014年1月第一版 做的一些笔记 , 如有侵权, 请告知笔者, 将在24小时内删除, 转载请 ...

  10. [ASP.NET MVC 小牛之路]03 - Razor语法(转)

    出处:http://www.cnblogs.com/willick/p/3224144.html Razor是MVC3中才有的新的视图引擎.我们知道,在ASP.NET中,ASPX的视图引擎依靠< ...