Shulou(Shulou.com)06/02 Report--

In this article Xiaobian for you to introduce in detail "how to quickly create a React project and configure webpack", the content is detailed, the steps are clear, the details are handled properly, I hope this "how to quickly create a React project and configure webpack" article can help you solve your doubts, following the editor's ideas slowly in depth, together to learn new knowledge.

1. Quickly create React project npm install-g create-react-app / / Global install create-react-app (only need to be installed once) create-react-app demo / / create project cd demo / / enter the project directory

Attention, Create React App requires Node 14 or higher. A higher version of node needs to be installed.

The directory structure of the project created

-Demo / / Project name-node_modules / / Storage third-party package-public-favicon.ico-index.html-manifest.json-src / / Page codes are written below-App.css-App.js-App.test.js-index.css-index.js / / Project entry-logo.svg-serviceWorker.js-setupTest.js.gitignorepackage.jsonREADME.mdyarn.lock2. Install the required packages

Since react and react-dom are included in package.json, it has been installed by default, so we can install the UI framework ant design.

Npm I-- save antd

Two basic items for installing webpack

Npm i webpack webpack-cli-save-dev

Install webpack

Npm I-D webpack

Install webpack server webpack-dev-server to make it easier to start

Npm I-- save-dev webpack-dev-server

Automatically create html file html-webpack-plugin

Npm I-- save-dev html-webpack-plugin

Clear the useless file clean-webpack-plugin and delete the redundant files in each package

Npm I-- save-dev clean-webpack-plugin

Style compiling loader plug-in

Npm I-- save-dev style-loader css-loader / / css-related loadernpm I-- save-dev node-sass sass-loader / / scss-related loadernpm I-save-dev file-loader url-loader / / load other files, such as pictures and fonts

Install babel

Npm I-save-dev @ babel/core @ babel/cli @ babel/preset-env @ babel/preset-react @ babel/plugin-proposal-class-propertiesnpm I-- save @ babel/polyfillnpm I-- save-dev babel-loader3. Create the webpack.config.js file in the root directory as follows: const path = require ('path'); const webpack = require (' webpack'); const HtmlPlugin = require ('html-webpack-plugin') Module.exports = {devtool: 'inline-source-map', entry: {index:'. / src/index.js'}, output: {filename: 'bundle.js', path: path.resolve (_ _ dirname,' build')}, module: {rules: [{test: /\ .css $/, use: ['style-loader' 'css-loader']}, {test: /\ .scss $/, use: [' style-loader', 'css-loader',' sass-loader']}, {test: /\. (png | svg | jpg | gif) $/, loader: 'url-loader', options: {limit: 10000 Name: 'img/ [name]. [hash: 7] .[ ext]'}, {test: /\. (js | jsx) $/, use: 'babel-loader', exclude: / node_modules/}]}, devServer: {/ / contentBase:'. / build', port: 8081 / / inline: true, hot: true}, plugins: [new webpack.HotModuleReplacementPlugin (), new HtmlPlugin ({template: 'public/index.html'})]} 4. Add the file .babelrc to the root directory with the following code: {"presets": ["@ babel/preset-env", "@ babel/preset-react"], "plugins": ["@ babel/plugin-proposal-class-properties"]} 5. Modify package.json "scripts": {"start": "webpack-dev-server-- open-- mode production", "watch": "webpack--watch", "build": "webpack--mode production", "dev": "webpack--mode development& webpack-dev-server-- open-- mode development", "test": "react-scripts test", "eject": "react-scripts eject"}, 6. Modify the public/index.html file demo 7. Modify src/index.js file import React from 'react';import ReactDOM from' react-dom';import App from'. / App';ReactDOM.render (, document.getElementById ('root')); 8. Modify the src/App.js file import React, {Component} from 'react';import'. / App.css'; / / introduce the style file class App extends Component {constructor (props) {super (props); this.state = {};} render () {return (I am the home page);} export default App;9. Modify the src/App.css file. Main {background: darkgray; width: 500px; height: 500px; margin: 0 auto;} 10. In the project root directory under the implementation of npm run dev read here, this "how to quickly create a React project and configure webpack" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more about the article, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.