搭建react项目
1.打开新建的项目空文件夹，终端输入命令：npm init，文件夹生成package.json文件；
2.安装webpack、webpack-cli和cross-env：npm install webpack webpack-cli cross-env --save-dev；
3.在根目录下新建src文件夹，文件夹下新建index.js文件，作为被编译文件webpack及webpack的入口文件；
4.在根目录下新建webpack.config.js文件作为webpack核心配置文件；
5.在webpack.config.js文件添加如下代码：
const path = require('path')
const isLocal = process.env.LOCAL === 'true'
module.exports = {
mode: isLocal ? 'production' : 'development', // 表示webpack打包环境是开发环境还是生产环境
entry: './src/index.js', // 项目的入口文件，路径相对于项目的根路径
// 配置输出信息
output: {
filename: 'bundle.js', // 打包输出文件名，后期可改成按规则动态生成
path: path.resolve(__dirname, './dist'), // 输出的路径，路径是当前目录
}
}
6.在index.js文件添加如下代码：
function sum (a, b) { return a + b; } var result = sum (12, 23); console.log(result);
7.在package.json的script属性下添加如下行：
"build": "cross-env LOCAL=false webpack"
8.终端输入命令：npm run build，运行成功且根目录出现dist文件夹并且有打包出的bundle.js文件，说明打包配置成功；
9.开始做高级语法转换为ES5的配置，先安装相关插件：npm install babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/polyfill @babel/runtime @babel/plugin-transform-runtime @babel/plugin-syntax-dynamic-import --save-dev；
10.根目录下新建babel.config.js文件，添加如下配置，或者直接写在webpack.config.js文件内：
const babelConfig = { // 相当于plugins的一个集合，即插件集，就不需要在plugins中一个个插件的配置了 presets: [ [ '@babel/preset-env', { useBuiltIns: 'entry', // 如果引入了@babel/polyfill，这个属性可以使@babel/polyfill按需引入 corejs: 2, }, ], '@babel/preset-react', ], plugins: ["@babel/plugin-syntax-dynamic-import", ["@babel/plugin-transform-runtime"]], // @babel/runtime中的插件 } module.exports = babelConfig
11.回到webpack.config.js内添加日下babel配置，如下：
const path = require('path')
const isLocal = process.env.LOCAL === 'true'
module.exports = {
mode: isLocal ? 'production' : 'development', // 表示webpack打包环境是开发环境还是生产环境
entry: './src/index.js', // 项目的入口文件，路径相对于项目的根路径
// 配置输出信息
output: {
filename: 'bundle.js', // 打包输出文件名，后期可改成按规则动态生成
path: path.resolve(__dirname, './dist'), // 输出的路径，路径是当前目录
},
module: {
rules: [
{
// 配置babel-loader
test: /\.js/,
use: ['babel-loader?cacheDirectory=true'],
include: path.join(__dirname, './src'),
}
]
}
}
12.将index.js文件内函数改为箭头函数并添加Promise，保存后再次打包，能够正常打包并将转换后代码保存到bundle.js，代表babel配置成功；
13.css预处理器转换配置，先安装相关插件：npm install stylus stylus-loader less less-loader sass-loader node-sass css-loader style-loader --save-dev，并添加如下配置：
const path = require('path')
const isLocal = process.env.LOCAL === 'true'
module.exports = {
mode: isLocal ? 'production' : 'development', // 表示webpack打包环境是开发环境还是生产环境
entry: './src/index.js', // 项目的入口文件，路径相对于项目的根路径
// 配置输出信息
output: {
filename: 'bundle.js', // 打包输出文件名，后期可改成按规则动态生成
path: path.resolve(__dirname, './dist'), // 输出的路径，路径是当前目录
},
module: {
rules: [
{
// 配置babel-loader
test: /\.js/,
use: ['babel-loader?cacheDirectory=true'],
include: path.join(__dirname, './src'),
},
// 版本不同，写法也不同
{
test: /\.(less)$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
ident: 'postcss',
plugins: [require('autoprefixer')],
},
},
},
{
loader: 'less-loader',
options: {
lessOptions: {
javascriptEnabled: true,
},
},
},
],
}
]
}
}
14.src目录新增index.less文件，写入如下代码：
@color: green; h { color: @color; }
15.index.js文件引入样式文件，重新打包，可以看到新写的样式文件被打包进bundle.js文件；
16.配置处理静态资源文件，安装相关插件：npm install file-loader url-loader --save-dev，并添加如下配置：
const path = require('path')
const isLocal = process.env.LOCAL === 'true'
module.exports = {
mode: isLocal ? 'production' : 'development', // 表示webpack打包环境是开发环境还是生产环境
entry: './src/index.js', // 项目的入口文件，路径相对于项目的根路径
// 配置输出信息
output: {
filename: 'bundle.js', // 打包输出文件名，后期可改成按规则动态生成
path: path.resolve(__dirname, './dist'), // 输出的路径，路径是当前目录
},
module: {
rules: [
{
// 配置babel-loader
test: /\.js/,
use: ['babel-loader?cacheDirectory=true'],
include: path.join(__dirname, './src'),
},
// 版本不同，写法也不同
{
test: /\.(less)$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
ident: 'postcss',
plugins: [require('autoprefixer')],
},
},
},
{
loader: 'less-loader',
options: {
lessOptions: {
javascriptEnabled: true,
},
},
},
],
},
{
test: /\.(jpg|png|jpeg|gif)$/,
use: [
// file-loader打包的图片或文件会生成一个随机的hash值作为图片名字，url-loader封装了file-loader，文件大小小于limit，url-loader会把文件转为base64,大于limit则调用file-loader进行处理，参数也会直接传给file-loader
{
loader: 'url-loader',
options: {
limit: 4096,
fallback: {
loader: 'file-loader',
options: {
name: 'img/[name].[hash:8].[ext]',
},
},
},
},
],
},
{
test: /\.(mp4|webm|ogg|mp3|wav)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 4096,
fallback: {
loader: 'file-loader',
options: {
name: 'media/[name].[hash:8].[ext]',
},
},
},
},
],
}
]
}
}
17.src文件夹内新建asset文件夹并添加两张图片，在index.js引入两张图片，保存后重新打包，可以看到图片也被打包到dist文件夹的img文件夹内，文件名为上述options属性配置的name；
18.抽离公共代码，在webpack.config.js内添加如下配置：
optimization: { splitChunks: { cacheGroups: { // 打包公共模块 commons: { chunks: 'initial', // initial表示提取入口文件的公共部分 minChunks: 2, // 表示提取公共部分最少的文件数 minSize: 0, // 表示提取公共部分最小的大小 name: 'commons', // 提取出来的文件命名 }, }, }, }
19.添加文件别名、文件扩展名配置，在webpack.config.js内添加如下配置：
resolve: { extensions: ['.js', '.jsx', '.json'], alias: { pages: path.join(__dirname, './src/pages'), components: path.join(__dirname, './src/components'), actions: path.join(__dirname, './src/redux/actions'), reducers: path.join(__dirname, './src/redux/reducers'), images: path.join(__dirname, './src/images'), }, }
20.配置文件热更新，安装相关插件：npm install webpack-dev-server html-webpack-plugin --save-dev，并在webpack.config.js内添加如下配置：
引入插件：
const HtmlWebpackPlugin = require('html-webpack-plugin')
devServer: { hot: true, open: true, port: 8080, static: './dist', historyApiFallback: true, // 解决启动后刷新404
}
21.在package.json文件添加如下行：
"dev": "cross-env LOCAL=true webpack-dev-server"
终端运行命令：npm run dev，浏览器自动打开http://localhost:8080页面，修改index.js文件页面会跟着改动，热更新配置成功；
22.清理上一次打包记录和结果，安装插件：npm install clean-webpack-plugin --save-dev，并进行如下配置：
引入插件：
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
plugins: [ new CleanWebpackPlugin(), //实例化clean-webpack-plugin插件 new HtmlWebpackPlugin({ template: path.resolve(__dirname, '../index.html') }) ]
23.集成react，安装相关插件：npm install react react-dom --save-dev，npm install react-router-dom --save-dev；
24.引入antd design，安装相关插件：npm install antd --save-dev；
25.添加express和axios，打通前后端，安装插件：npm install express axios --save-dev，根目录新增server.js文件，添加如下代码：
const express = require('express')
const app = express()
app.get('/api/xxx', (req, res) => {
res.header('Access-Control-Allow-Origin', '*')
res.send({
name: 'xxxxxx',
comurl: 'baidu.com',
})
})
app.listen(3000, () => {
console.log('app listen 3000 port')
})
26.终端输入命令：node server.js运行文件，在浏览器打开链接：http://localhost:3000/api/xxx，可以看见server文件里面写的测试数据；
27.以下命令可以调用这个接口获取到返回的数据：
axios.get('http://localhost:3000/api/xxx').then(res => {
console.log(res)
})
28.请求接口遇到跨域问题需要添加跨域配置，在webpack.config.js内添加如下配置：
devServer: { hot: true, open: true, port: 8080, static: './dist', historyApiFallback: true, // 解决启动后刷新404 proxy: { '/api': { target: 'http://localhost:3000', pathRewrite: { '^/api': '/api', }, changeOrigin: true, // 让target参数是域名 secure: false,// 设置支持https协议代理 }, } }
完
