webpack-react

发表于

使用webpack搭建react项目

初始化

1
npm init

下载相关依赖

webpack

react

1
npm install --save react react-dom

typescript

1
npm install --save-dev typescript ts-loader

样式

1
npm install --save-dev css-loader less-loader less mini-css-extract-plugin

mini-css-extract-plugin：将CSS提取为独立的文件的插件，对每个包含css的js文件都会创建一个CSS文件，支持按需加载css和sourceMap

https://www.jianshu.com/p/91e60af11cc9

autoprefixer

autoprofixer帮我们自动添加css前缀。postcss-flexbugs-fixe是用来修复一些flexbox的bug。

1
cnpm install --save-dev postcss-loader autoprefixer postcss-flexbugs-fixes

图片处理

1
npm i -D url-loader file-loader

配置完成的webpack.config.js

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
const path = require("path");
const argv = require("yargs").argv;  //获取命令行中参数的对象
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const isDev = argv.cfg && argv.cfg === "dev";  //是否为开发模式，如果输入yarn start执行"webpack-dev-server --mode development --cfg dev"，argv.cfg获取参数的值为dev。

const config = {
    mode: 'development',
    //入口文件的路径
    entry: "./src/index.tsx",
    output: {
        //打包的输出路径
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    },
    // 添加需要解析的文件格式
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.json']
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: '蚂蚁',
            template: './index.html',
        })
    ],
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [  // webpack会从右往左加载loader，所有书写loader时有顺序要求
                    {
                    　　loader: 'style-loader'  //style-loader不能和mini-css-extract-plugin同时使用
                    },
                    // MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'less-loader'
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            ident: "postcss",  // postcss-loader中options里使用了function、require时需要ident属性，可以是任意值
                            plugins: () => [
                                require("postcss-flexbugs-fixes"),
                                require('overrideBrowserslist')({
                                    browsers: [
                                        ">1%",
                                        "last 4 versions",
                                        "Firefox ESR",
                                        "not ie < 9"
                                    ],
                                    flexbox: "no-2009"  // false将禁用flexbox属性前缀。或flexbox:“no-2009”将仅为最终版本和IE版本的规范添加前缀。
                                })
                            ]
                        },
                    },
                ],
                exclude: /node_modules/
            },
            {
                test: /\.png|jpg|gif|jpeg|svg/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10000,   // 当图片小于limit（单位：byte）时图片转换成base64，大于limit时其表现行为等于file-loader
                            name: './images/[name].[hash:8].[ext]'   // 当图片大于limit时起作用 ，'./images'表示图片打包的路径相对于output.path，[name]表示图片的名称，[hash:8]表示9位数的hash值，[ext]表示保持原来的后缀名
                        }
                    }
                ],
                exclude: /node_modules/
            },
            {
                test: /\.js$/,
                include: [
                    path.resolve(__dirname, 'src')
                ],
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-react'],
                    plugins: ['@babel/plugin-proposal-class-properties']
                }
            },
            {
                test: /\.tsx?$/,
                use: "ts-loader"
            },
        ]
    },
    devServer: {
        contentBase: path.resolve(__dirname, "dist"),
        inline:true,
        port: 8081
    },
    devtool:  "source-map"    // 值为source-map时，方便在浏览器中使用react开发工具调试
};


module.exports = config;

React router

安装 react-router-dom

1
npm install react-router-dom --save-dev

https://react-router.docschina.org/

代码分割(react-loadable)

将代码进行分割，按需加载，将js 拆分成若干个chunk.js,用到就加载

1
npm i -D react-loadable

基本使用代码🌰

1
2
3
4
5
6
7
8
9
10
11
12
13
import React from 'react';
import Loadable from 'react-loadable';

//通用的过场组件
const loadingComponent =()=>{
    return (
        <div>loading</div>
    ) 
}
export default Loadable({
    loader:import('./index.js'),
    loading:loadingComponent
});

抽象成一个公共的util，使用时直接调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from 'react';
import Loadable from 'react-loadable';

//通用的过场组件
const loadingComponent =()=>{
    return (
        <div>loading</div>
    ) 
}

//过场组件默认采用通用的，若传入了loading，则采用传入的过场组件
export default (loader,loading = loadingComponent)=>{
    return Loadable({
        loader,
        loading
    });
}

在router中调用

1
2
3
4
5
6
7
8
9
10
11
12
13
import React, { Fragment } from 'react'
import { BrowserRouter, Route } from 'react-router-dom'
import loadable from '../util/loadable'

const Home = loadable(()=>import('@pages/home'))

const Routes = () => (
    <BrowserRouter>
        <Route path="/home" component={Home}/>
    </BrowserRouter>
);

export default Routes

滚动还原

Ant design

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

1
npm install antd --save