从零搭建脚手架：打造属于自己的中后台开发利器！

2023-12-01 01:19:05

搭建中后台开发脚手架：利用Webpack构建一个完备的框架

概览

中后台开发经常涉及复杂的数据处理、交互丰富的界面设计以及繁琐的业务逻辑。为了提高效率，采用完备的脚手架进行开发至关重要。本文将指导您一步步利用Webpack构建一个基于React + React-Router + Dva + ES6 + Less + Antd的脚手架。

第一步：项目初始化

创建一个新项目文件夹并初始化一个npm项目：

mkdir my-scaffold
cd my-scaffold
npm init -y

第二步：安装Webpack

安装Webpack，这是一个模块打包工具：

npm install webpack webpack-cli --save-dev

第三步：配置Webpack

创建一个Webpack配置文件（webpack.config.js）：

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
};

第四步：安装依赖

安装React、React-Router、Dva和Antd等依赖：

npm install react react-dom react-router-dom dva antd less-loader style-loader css-loader babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin --save-dev

第五步：创建项目结构

my-scaffold
├── src
│   ├── index.js
│   ├── App.js
│   ├── pages
│   │   ├── Home.js
│   │   └── About.js
│   ├── components
│   │   ├── Header.js
│   │   ├── Footer.js
│   ├── styles
│   │   ├── main.less
│   └── index.html
├── dist
│   ├── bundle.js
│   └── index.html
├── package.json
├── webpack.config.js

第六步：编写代码

在src/index.js中创建主应用：

import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
import { Provider } from 'dva';
import App from './App';

const app = dva();

ReactDOM.render(
  <Provider store={app._store}>
    <Router>
      <Switch>
        <Route path="/" exact component={App} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  </Provider>,
  document.getElementById('root')
);

在src/App.js中创建App组件：

import React, { Component } from 'react';
import { Layout, Menu, Icon } from 'antd';

const { Header, Content, Footer, Sider } = Layout;

class App extends Component {
  render() {
    return (
      <Layout>
        <Header className="header">
          <div className="logo" />
          <Menu
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={['1']}
            style={{ lineHeight: '64px' }}
          >
            <Menu.Item key="1">Nav 1</Menu.Item>
            <Menu.Item key="2">Nav 2</Menu.Item>
            <Menu.Item key="3">Nav 3</Menu.Item>
          </Menu>
        </Header>
        <Content style={{ padding: '0 50px' }}>
          <div style={{ background: '#fff', padding: 24, minHeight: 280 }}>Content</div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
      </Layout>
    );
  }
}

export default App;