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

新建工程

1.先新建一个 demo 项目,项目目录结构为:

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

<!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>My React Boilerplate</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

3.安装 react react-dom 依赖:

npm i react react-dom

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

import React, { Component } from 'react'

class App extends Component {
render() {
return (
<div>
<h1>Welcome to My Starter App</h1>
</div>
)
}
} export default App

5.创建 /src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App' import './styles/style.sass' ReactDOM.render(
<App />,
document.getElementById('app')
)

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

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

Babel

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

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

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

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

参数说明:

  • 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.安装依赖:

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

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

import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16' Enzyme.configure({
adapter: new Adapter()
})

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

{
...,
"jest": {
"setupTestFrameworkScriptFile": "./test/enzyme.setup.js"
},
...
}

4.编写测试代码:

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

import App from '../src/components/App'
import React from 'react'
import { shallow } from 'enzyme' describe('App', () => {
test('should match snapshot', () => {
const wrapper = shallow(<App />) expect(wrapper.find('h1').text()).toBe('Welcome to My Starter App')
expect(wrapper).toMatchSnapshot
})
})

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

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

{
...,
"scripts": {
"test": "jest ./test"
}
}

Webpack

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

1.安装 webpack 依赖:

npm i webpack --save-dev

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

const path = require('path')

module.exports = {
entry: {
main: './src/index.js'
},
output: {
filename: '[name].[hash].js',
path: path.resolve('./dist'),
}
}

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

Webpack loaders

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

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

1.安装 babel-loader:

npm i babel-loader --save-dev

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

const path = require('path')

module.exports = {
entry: {
main: './src/index.js'
},
output: {
filename: '[name].[hash].js',
path: path.resolve('./dist'),
},
module: {
rules: [
{
test: /\.js$/,
exclude: ['node_modules'],
use: [{ loader: 'babel-loader' }],
}
]
}

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

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

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

const path = require('path')

module.exports = {
entry: {
main: './src/index.js'
},
output: {
filename: '[name].[hash].js',
path: path.resolve('./dist'),
},
module: {
rules: [
{
test: /\.js$/,
exclude: ['node_modules'],
use: [{ loader: 'babel-loader' }],
},
{
test: /\.s(a|c)ss$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'sass-loader'
}],
}
]
}

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

body
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
color: white
background: black

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

import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App' import './styles/style.sass' ReactDOM.render(
<App />,
document.getElementById('app')

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

安装 html-webpack-plugin:

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

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

const CleanWebpackPlugin = require('clean-webpack-plugin')
const path = require('path') module.exports = {
entry: {
main: './src/index.js'
},
output: {
filename: '[name].[hash].js',
path: path.resolve('./dist'),
},
module: {
rules: [
{
test: /\.js$/,
exclude: ['node_modules'],
use: [{ loader: 'babel-loader' }],
},
{
test: /\.s(a|c)ss$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'sass-loader'
}],
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: 'index.html'
})
]
}

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

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

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

const CleanWebpackPlugin = require('clean-webpack-plugin')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const path = require('path') module.exports = {
entry: {
main: './src/index.js'
},
output: {
filename: '[name].[hash].js',
path: path.resolve('./dist'),
},
module: {
rules: [
{
test: /\.js$/,
exclude: ['node_modules'],
use: [{ loader: 'babel-loader' }],
},
{
test: /\.s(a|c)ss$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'sass-loader'
}],
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: 'index.html'
}),
new CleanWebpackPlugin(['dist']),
]
}

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

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

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

const CleanWebpackPlugin = require('clean-webpack-plugin')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const path = require('path') module.exports = {
entry: {
main: './src/index.js'
},
output: {
filename: '[name].[hash].js',
path: path.resolve('./dist'),
},
module: {
rules: [
{
test: /\.js$/,
exclude: ['node_modules'],
use: [{ loader: 'babel-loader' }],
},
{
test: /\.s(a|c)ss$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'sass-loader'
}],
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: 'index.html'
}),
new CleanWebpackPlugin(['dist']),
],
devServer: {
host: 'localhost',
port: 3000,
open: true
}
}

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

{
...
"scripts": {
"start": "webpack-dev-server",
"test": "jest ./test"
},
}

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

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

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

npm i webpack-merge --save-dev

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

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

const CleanWebpackPlugin = require('clean-webpack-plugin')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const path = require('path') module.exports = {
entry: {
main: './src/index.js'
},
output: {
filename: '[name].[hash].js',
path: path.resolve('./dist'),
},
module: {
rules: [
{
test: /\.js$/,
exclude: ['node_modules'],
use: [{ loader: 'babel-loader' }],
},
{
test: /\.s(a|c)ss$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'sass-loader'
}],
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: 'index.html'
}),
new CleanWebpackPlugin(['dist']),
]
}

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

const merge = require('webpack-merge');
const common = require('./webpack.common.js'); module.exports = merge(common, {
mode: 'development',
devServer: {
host: 'localhost',
port: 3000,
open: true
}
})

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

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

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

{
...
"scripts": {
"build": "webpack --config webpack.prod.js",
"start": "webpack-dev-server --config webpack.dev.js",
"test": "jest ./test"
},
}

原文: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. Spark角色介绍及spark-shell的基本使用

    Spark角色介绍 1.Driver 它会运行客户端的main方法,构建了SparkContext对象,它是所有spark程序的入口 2.Application 它就是一个应用程序,包括了Driver ...

  2. Eclipse创建javaWeb项目工程

    首先,想作为一个较为标准的程序员,应该把自己的开发工具eclipse设置成与公司中大多数程序员的设置一样,比如说工作的字符编码为UTF-8,字体大小等等. 在刚下载好的eclipse中刚进去是没有To ...

  3. 【Unity】Collider随骨骼动画运动

    Collider位置和角色的动作不一致会导致Mesh互相镶嵌,让游戏失真. 想象一扇门的Collider没随它打开的动画移动,结果就是你看着门开着却穿不过去. 而我遇到的情况是:     角色在执行跑 ...

  4. iOS设备尺寸

  5. Library not found for -lAPOpenSdk

    多人开发合作的时候 总是会遇见各种各样的问题 今天就来讲一个关于友盟的问题 在我的小伙伴 用cocoapods 中添加了这样一句话 pod ‘UMengSocialCOM’,  并且pod updat ...

  6. redis 面试题2

    使用过Redis分布式锁么,它是什么回事? 先拿setnx来争抢锁,抢到之后,再用expire给锁加一个过期时间防止锁忘记了释放. 这时候对方会告诉你说你回答得不错,然后接着问如果在setnx之后执行 ...

  7. LinuxSystemProgramming-Syllabus

    Linux System Programming Syllabus

  8. [SoapUI] 按照 Test Step Type 获取所有满足条件的 Test Step

    获取当前测试用例下所有Groovy Script类型的测试步骤 def testStepList = testRunner.testCase.getTestStepsOfType(com.eviwar ...

  9. 不设置环境变量 直接启动tomcat

    window: 设置 startup.bat set JAVA_HOME=C:\Program Files\Java\jdk1.8.0_144set JRE_HOME=C:\Program Files ...

  10. css3之transform-origin

    transform-origin属性平时似乎用得很少,它决定了变换时依赖的原点.基本的属性特性可以参考CSS手册. 如果在H5动画项目中,用到旋转的话,它还是不能小觑的. 假如我们做一个秋千效果 其实 ...