搭建react环境 转载

(简单流程，仅供参考，一切以实际需求为准)

环境准备
node、npm、webpack4+

npm基本使用命令

项目创建
创建目录初始化
首先创建项目文件夹并进入，使用npm init初始化，然后一溜回车就好，执行完后项目文件夹中会多一个package.json文件。这是项目的核心文件，包含包依赖管理和脚本任务。

$ mkdir webpack-react

$ cd webpack-react

$ npm init
1
2
3
4
5
安装webpack、react、react-dom
–save为生成环境所需，-dev为开发环境所需

$ npm install webpack --save-dev

$ npm install react react-dom --save
1
2
3
*如果使用webpack4+还需要安装webpack-cli

$ npm install --save-dev webpack-cli
1
package.json文件中
devDependencies对象中的内容即为项目安装的开发环境依赖
dependencies对象中的内容即为项目安装的生产环境依赖

项目目录及源码
– webpack-react
|---- node_modules 依赖包
|---- src
|---- index.js
|---- index.html
|---- webpack.config.js webpack配置文件
|---- package.json
|---- .babelrc babel配置文件

1
2
3
4
5
6
7
8
9
index.html

</div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 insex.js

import ReactDOM from ‘react-dom’;
import React from ‘react’;

ReactDOM.render(

the first webpack react demo

,
document.getElementById(‘root’)
)
1
2
3
4
5
6
7
8
9
webpack.config.js

const webpack = require(‘webpack’);
const path = require(‘path’);

module.exports = {
mode: ‘development’,
entry: path.resolve(__dirname, ‘src/index’),
output: {
filename: ‘js/[name].[hash:6].js’,
publicPath: ‘/’,
chunkFilename: ‘js/[name].[chunkhash:8].js’,
path: path.resolve(__dirname, ‘happy’)
},

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
安装配置babel
因为我们使用了react，react为jsx语法不能直接被浏览器识别，因此需要使用babel库进行转码
(注意babel-loader和babel-core版本存在相互要求，bael-core版本使用为6的话babel-loader要用7，bael-core版本使用为7的话babel-loader要用8，否则报错,建议指定版本安装)

$ npm install babel-loader babel-core babel-preset-env babel-preset-stage-0 babel-preset-react --save-dev
1
babel-loader  babel加载器
babel-core
babel-preset-env   转换 ES2015+
babel-preset-react jsx转js
babel-preset-stage-0  所有使用 stage 0 (或更高)阶段的代码必备的插件
.babelrc

（presets数组解析过程为倒序）

{
“presets”: [
“env”,
“react”,
“stage-0”
]
}
1
2
3
4
5
6
7
HtmlWebpackPlugin
$ npm install html-webpack-plugin --save-dev
1
可参考HtmlWebpackPlugin用法总结

webpack.config.js

const webpack = require(‘webpack’);
const path = require(‘path’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

module.exports = {
+ plugins: [
+ new HtmlWebpackPlugin({
+ template: path.join(__dirname, ‘src/index.html’),
+ title: ‘demo’,
+ inject: ‘body’,
+ minify: {
+ minifyCSS: true,
+ removeComments: true,
+ collapseWhitespace: true
+ }
+ })
+ ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
搭建前端服务器
安装前面配置，一个最最基础的react项目已经完成，可以搭建一个前端服务器来启动了。
webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载

$ npm install webpack-dev-server --save-dev　
1
新建webpack.config.dev.js编写开发环境配置

安装webpack-merge，可用于将webpack.config.js中配置对象和webpack.config.dev.js中配置对象合并成一个新的配置对象

$ npm install webpack-merge --save-dev
1
webpack.config.dev.js

const path = require(‘path’);
const webpack = require(‘webpack’);
const webapckMerge = require(‘webpack-merge’);
const webpackBaseConfig = require(’./webpack.config’);

module.exports = webapckMerge(webpackBaseConfig,{
mode: ‘development’, //设置模式，否则会包warring，对应process.env.NODE_ENV值
devServer: {
contentBase: path.resolve(__dirname, ‘dist’),//告诉服务器从哪里提供内容
host: ‘0.0.0.0’,
port: 8081,
open: true, //是否自动打开浏览器
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
更多配置详见webpack文档
package.json中编写npm script启动脚本

{
“scripts”: {
“dev”: “webpack-dev-server --config webpack.config.dev.js”
}
}

1
2
3
4
5
6
以上一个最最简单的项目创建完成，然鹅距实际开发所需还相差甚远

项目配置
使用es6，7，8+新特性或方法
babel-plugin-transform-runtime提供了一些低版本es标准对高级特性的实现,但不会污染全局变量

$ npm install --save-dev babel-plugin-transform-runtime

$ npm install --save babel-runtime
1
2
3
(注意babel-runtime为生成环境依赖)

.babelrc

{
“presets”: [
“env”,
“react”,
“stage-0”
],

+ "plugins": [ "transform-runtime" ] 

}
1
2
3
4
5
6
7
8
9
使用css和scss
安装loader：

$ npm install css-loader style-loader sass-loader node-sass --save-dev
1
webpack.config.js

module: {
rules: [
//添加处理scss loader
{
test: /.scssKaTeX parse error: Expected 'EOF', got '}' at position 478: … ] }̲, //添加处…/,
use: [
{
loader: ‘style-loader’
},
{
loader: ‘css-loader’
}
]
},
]
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
使用图片、svg、iconfont等资源
安装url-loader用于将文件转换为base64 URI

$ npm install url-loader --save-dev
1
webpack.config.js

module: {
rules: [
{
test: /.(png|jpg|gif|svg(?v=\d+.\d+.\d+)?|woff|eot|ttf)$/,
use: [‘url-loader’]
}
]
}
1
2
3
4
5
6
7
8
导入json文件
安装json-loader

$ npm install json-loader --save-dev
1
webpack.config.js

module: {
rules: [
{
test: /.json$/,
use: [‘json-loader’]
}
]
}

作者：zSY_snake
来源：CSDN
原文：https://blog.csdn.net/zsy_snake/article/details/88027215
版权声明：本文为博主原创文章，转载请附上博文链接！