This article will show you how to configure React and less in webpack

Configure the React

(1) Install React

NPM install react react-dom --save-dev // modify webpack-demo/ SRC /index.js import react from'react'
import { render } from 'react-dom'

class Hello extends React.Component {
    render() {
        return(< p > hello react! </p> ) } } render( <Hello/>, document.getElementById('root'));Copy the code

NPM start, surprise! At this time you need to perform the following operations (2) install some necessary Loader

// Babel-polyfill babel-polyfill babel-preset-react // NPM install -d is recommended to preset-env babel-loader // Preset -env babel-loader babel-polyfill babel-preset-react // webpack-demo/webpack.config.js const path = preset-env babel-loader babel-polyfill babel-preset-react require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require("clean-webpack-plugin");

module.exports = {
    mode: 'development', // Development or production (which model you want to choose) Entry:'./src/index.js'Output: {// export filename:'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Output Management'
        })
    ],
    devServer: {
        contentBase: './dist'
    },
    module: {
        rules: [
            {
                test: / \. (js | JSX) $/, / / find all js or exclude JSX file: / node_modules /, / / here is ignored node_modules folders use: {loader:'babel-loader',}}]}}; // webpack-demo/ SRC /index.js will look like thisfunction component() {
    const element = document.createElement('div');


    // element.innerHTML = 'hello,handsome boy/beautiful girls';
    element.id = 'root';


    return element;
}

document.body.appendChild(component());

import React from 'react'
import { render } from 'react-dom'

class Hello extends React.Component {
    render() {
        return(< p > hello react! </p> ) } } render( <Hello/>, document.getElementById('root'));Copy the code

NPM start Cannot find module ‘@babel/core’ Cannot find module ‘@babel/core’ Cannot find module ‘@babel/core’ This is a mismatch between the Babel /core and Babel /loader versions

Babel /loader NPM install [email protected]Copy the code

Then NPM start does this to see if your Hello is displayed on the page. OK! So you’re done with the React part, and then less

Configuration is Less

(1) less installation

npm install less --save-dev
Copy the code

Of course, only this is not enough. There is also loader, which requires style-loader CSS-loader less-loader

NPM install style-loader css-loader less-loader --save-dev // Add const path = to webpack-demo/webpack.config.js require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require("clean-webpack-plugin");

module.exports = {
    mode: 'development', // Development or production (which model you want to choose) Entry:'./src/index.js'Output: {// export filename:'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Output Management'
        })
    ],
    devServer: {
        contentBase: './dist'
    },
    module: {
        rules: [
            {
                test: / \. (js | JSX) $/, / / find all js or exclude JSX file: / node_modules /, / / here is ignored node_modules folders use: {loader:'babel-loader',}}, {test: /\. Less $/, // Exclude: /node_modules/, use: ['style-loader'.'css-loader'.'less-loader'}]}}; / / add webpack - demo/SRC/index. The less#root {
  color: red;
}
// webpack-demo/src/index.js
function component() {
    const element = document.createElement('div');


    // element.innerHTML = 'hello,handsome boy/beautiful girls';
    element.id = 'root'


    return element;
}

document.body.appendChild(component());

import React from 'react'
import { render } from 'react-dom';
import './index.less'

class Hello extends React.Component {
    render() {
        return(< p > hello react! </p> ) } } render( <Hello/>, document.getElementById('root'));Copy the code

Then NPM start, wow is not found hello red. So, about basic webpack + react + less these basic things will be configured Future articles will continue to introduce about the react – the router, story… A series of matches. If you like it, click the “like” button. If you hate it, you can’t throw rotten eggs, just click the button three times