Build the React project manually using Webpack

1. Initialize the project

1. Create a directory and initialize the project

npm init
Copy the code

2. Add the following dependencies to package.json

NPM install -- Production dependencies = NPM install --production
"dependencies": {
    "react": "^ 16.8.6"."react-dom": "^ 16.8.6"."react-router-dom": "^ 5.0.1." "
  },
// devDependencies are set in modules and NPM i-save-dev [modules]
"devDependencies": {
// Install Babel related
"@babel/core": "^ 7.4.5"."@babel/preset-env": "^ 7.4.5"."@babel/preset-react": "^ 7.0.0." "."babel-loader": "^ 8.0.6"."babel-polyfill": "^ 6.26.0".// Plugins: Empty old files every time you build
"clean-webpack-plugin": "^ 3.0.0"./ / CSS
"css-loader": "^ 2.1.1".// Handle CSS compatibility
"postcss-loader": "^ 3.0.0"."autoprefixer": "^ 9.6.0".// Add less support
"less": "^ 3.9.0"."less-loader": "^ 5.0.0"./ / the plugin
"html-webpack-plugin": "^ 3.2.0"."style-loader": "^ 0.23.1".// Add webPack packaging
"webpack": "^ 4.33.0"."webpack-cli": "^ 3.3.3".// Provide a Web container that can be accessed locally at http://localhost:port
"webpack-dev-server": "^ 3.7.1." ".// Provide merging of configuration files
"webpack-merge": "^ 2"
}
Copy the code

Note: distinguish dependencies from devDependencies

When we use NPM install to install modules or plug-ins, there are two commands to write them to package.json: --save-dev = "save"; --save = "dev"; So the difference in package.json is that plug-ins installed with --save-dev are written to the devDependencies field, while plug-ins installed with --save are written to the devDependencies field. Write to the Dependencies block. What's the difference between devDependencies and dependencies objects in package.json? NPM install or NPM install --save belongs to Dependencies, which indicates the package that the code needs to run. NPM install --save-dev belongs to devDependencies. The plug-in in devDependencies is only used in the development environment, not in the production environment, and dependencies are published to the production environment. If you need to add jQuery dependencies to your project, write dependencies to add jQuery dependencies. Some of the build tools we use, such as Glup and WebPack, are packages that we use in development and don't care about once they go live, so write it in devDependencies.Copy the code

2. Install the preceding dependencies

npm install
Copy the code

3. The configuration bable

Create a new.babelrc file in the root directory

{
    "presets": [
        "@babel/preset-env"."@babel/preset-react"]},Copy the code

4. Add postcss.config.js to the root directory

module.exports = {  
    plugins: {  
      'autoprefixer': {browsers: 'last 5 version'}}}Copy the code

5. Create a webpack.base.config.js file in the root directory as the basic WebPack configuration

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
	// Import file
    entry: './src/index.js'.output: {
        filename: 'bundle.[hash].js'.path: path.join(__dirname, '/dist')},module: {
    	// Configure the corresponding rules
        rules: [{test: /\.css$/,
                use: ['style-loader'.'css-loader'.'postcss-loader'] {},test: /\.js[x]? $/,
                use: 'babel-loader'.exclude: /node_modules/
            }, {
                test: /\.less$/,
                use: ['style-loader',
                    { loader: 'css-loader'.options: { importLoaders: 1}},'less-loader']],}},// Configure the corresponding plug-in
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new CleanWebpackPlugin()
    ]
};
Copy the code

6. Create the webpack.dev.config.js file in the root directory to configure the development environment

The purpose of this file is to start webPack

const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.config.js');

module.exports = merge(baseConfig, {
	// Set to development mode
    mode: 'development'.devtool: 'inline-source-map'.// Configure the server directory and port
    devServer: {
        contentBase: './dist'.port: 3000}});Copy the code

7. New webpack under the root directory. The product. The config. Js files as the production environment configuration

The purpose of this file is to package the Webpack

const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.config.js');

module.exports = merge(baseConfig, {
	// Set to production mode
    mode: 'production'
});
Copy the code

8. Configure the script command in package.json

Used to execute NPM run start and NPM run build

  "scripts": {
    "start": "webpack-dev-server --open --config webpack.dev.config.js"."build": "webpack --config webpack.product.config.js"
  },
Copy the code

9. Create the SRC directory and index.html in the root directory

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge"> <title>Document</title> </head> <body> <div id="root"></div> </body> </html>Copy the code

10. Create entry files index.js and app.js in SRC

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.less';

ReactDOM.render(<App/>.document.getElementById('root'));
Copy the code

App.js

import React from 'react';

class App extends React.Component {
    render() {
        return <div>
            <h1 className="hello">Hello React & Webpack!</h1>
        </div>}}export default App;
Copy the code

11. Create the index.less file in the SRC directory and test the less file

@blog-color-red: #ff0000;

.hello {
    color: @blog-color-red;
}
Copy the code

12. Run the program

npm run start
Copy the code

13. Pack your files

npm run build
Copy the code

You can open the dist file in between folders, showing a red **Hello React & Webpack! * * the words