凉衫薄

人生哪能多如意,万事只求半称心。
React
基于webpack4的react后台管理系统构建 一、安装node 步骤省略 二、初始化项目 mkdir react-admin cd react-admin npm init -y 三、安装webpack依赖 npm install webpack webpack-dev-server webpack-cli html-webpack-plugin --save-dev 四、安装react相关依赖 npm install react react-dom --save-dev 五、安装babel相关依赖 npm install babel-core babel-loader babel-preset-env babel-preset-react babel-plugin-transform-object-rest-spread --save-dev 六、安装css、less、url相关loader npm install css-loader style-loader less-loader less url-loader --save-dev 七、安装redux以及路由等相关依赖 npm install redux react-redux react-router-dom --save-dev 八、安装网络库 npm install axios qs --save-dev 九、安装组件库 npm install antd --save-dev 十、项目结构 react-admin   |——dist (项目打包输出路径)     |——index.html     |——bundle.js (webpack打包后生成)   |——config (配置文件目录)     |——webpack.config.js (webpack配置文件)   |——src (源码文件夹)     |——action (存放各模块redux的action目录)     |——component (存放各模块组件)     |——container (存放容器,通过高阶函数连接各种组件)     |——reducer (存放各模块redux的reducer目录)     |——router (存放各模块路由)     |——index.jsx (入口文件)   |——index.html (主html文件)   |——package.json (npm init生成文件)   |——webpack.config.js (webpack配置文件)   |——.babelrc (babel配置文件) 按照该结构生成对应文件和文件夹 八、完善代码及配置 webpack.config.js const path = require('path'); const HTMLPlugin = require('html-webpack-plugin'); module.exports = { devtool: 'eval-source-map', entry: path.join(__dirname, '../src/index.jsx'), output: { path: path.join(__dirname, '../dist'), filename: 'bundle.js' }, module: { rules: [ { test: /\.(js|jsx)$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.(le|c)ss$/, use: ['style-loader', 'css-loader', 'less-loader'] }, { test: /\.(png|jpg|jpeg|gif)$/, loader: 'url-loader', options: { limit: 10000 } } ] }, devServer: { contentBase: path.join(__dirname, "../dist/"), host: 'localhost', port: '3000', inline: true, open: true, compress: true }, plugins: [ new HTMLPlugin({ template: path.join(__dirname, '../index.html') }) ] } .babelrc { "presets": [ "env", "react" ], "plugins": [ "transform-object-rest-spread" ] } 九、修改package.json "scripts": { "start": "webpack-dev-server --config ./config/webpack.config.js --mode development", "build": "webpack --config ./config/webpack.config.js --mode production" }, 十、运行 npm run start