凉衫薄

人生哪能多如意,万事只求半称心。
React
一、安装node 步骤省略 二、安装全局依赖 npm install webpack webpack-dev-server webpack-cli -g 三、初始化项目 mkdir react-demo cd react-demo npm init -y 四、安装react相关依赖 npm install react react-dom --save 五、安装babel相关依赖 npm install babel-core babel-loader babel-preset-env babel-preset-react --save 六、安装css、less、url相关loader npm install css-loader style-loader less-loader less url-loader --save 七、项目结构 react-demo   |——dist (项目打包输出路径)     |——index.html     |——bundle.js (webpack打包后生成)   |——src (源码文件夹)     |——index.jsx (入口文件)     |——component (组件文件夹)       |——HelloWorld.jsx   |——package.json (npm init生成文件)   |——webpack.config.js (webpack配置文件)   |——.babelrc (babel配置文件) 按照该结构生成对应文件和文件夹 mkdir dist mkdir -p src/component touch ./dist/index.html ./src/component/HelloWorld.jsx ./src/index.jsx webpack.config.js .babelrc 八、完善代码及配置 index.html App
HelloWorld.jsx import React, {Component} from "react"; class HelloWorld extends Component{ render(){ return (
hello world
) } } export default HelloWorld; index.jsx import React from "react"; import ReactDOM from "react-dom"; import HelloWorld from "./component/HelloWorld.jsx"; ReactDOM.render(, document.getElementById("root")); webpack.config.js const path = require('path'); module.exports = { entry: path.resolve(__dirname, './src/index.jsx'), output: { path: path.resolve(__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.resolve(__dirname, './dist/'), host: 'localhost', port: '3000', inline: true, open: true, }, } .babelrc { "presets": [ "env", "react" ] } 九、修改package.json "scripts": { "start": "webpack-dev-server --mode development", "build": "webpack --mode production" } 十、运行 npm run start