从头搭建一个webpack+react+less项目（二）

前言：这篇文章即将展示怎么在webpack中配置react以及less，如果你想知道前面怎么配置请参考我的上一篇文章

配置React

（1）安装React

//  第一步当然是先跑命令行啦
npm install react react-dom --save-dev
 //  修改 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')
);

这个时候执行npm start，surprise！是不是一堆错 这个时候你就需要进行下面的操作 （2）安装一些必要的Loader

// 这里需要安装的是 babel-preset-env   babel-loader  babel-polyfill babel-preset-react
//  来来俩 咱给他一把梭了  
npm install -D babel-preset-env babel-loader babel-polyfill babel-preset-react
// 这时候webpack-demo/webpack.config.js变这样了
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require("clean-webpack-plugin");

module.exports = {
    mode: 'development', //development 或者 production （你要选择的模式）
    entry: './src/index.js', // 入口
    output: { // 出口
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Output Management'
        })
    ],
    devServer: {
        contentBase: './dist'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,   //  查找所有js或者jsx文件
                exclude: /node_modules/, //  这里是忽略掉node_modules文件夹
                use: {
                    loader: 'babel-loader',
                }
            }
        ]
    }
};
// 这时候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'

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

这时候算是完工了，喜滋滋的npm start 想去看看结果，啥子情况，咋报错了，
Cannot find module '@babel/core' 这是个啥 莫慌，莫慌，这块是babel/core 和babel/loader版本不匹配一般来说下面的操作阔以解决问题

// 安装指定版本 babel/loader
npm install babel-loader@7.1.5

然后npm start 这样，是不是 发现自己的hello 展示到页面上了。 OK! 这样你的React部分就完成了，接下来less搞起

配置Less

(1) 安装less

npm install less --save-dev

当然只是这个是不够的，还有loader，这块需要style-loader css-loader less-loader

npm install style-loader css-loader less-loader --save-dev
// 接下来在webpack-demo/webpack.config.js中添加
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require("clean-webpack-plugin");

module.exports = {
    mode: 'development', //development 或者 production （你要选择的模式）
    entry: './src/index.js', // 入口
    output: { // 出口
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Output Management'
        })
    ],
    devServer: {
        contentBase: './dist'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,   //  查找所有js或者jsx文件
                exclude: /node_modules/, //  这里是忽略掉node_modules文件夹
                use: {
                    loader: 'babel-loader',
                }
            },
            {
                test: /\.less$/, // 查找所有less文件
                exclude: /node_modules/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    }
};
//  添加 webpack-demo/src/index.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')
);

然后npm start,哇哦 是不是发现的hello红了。
这样， 有关于基础webpack+react+less这些基础的东西就配置完成啦
后面的文章会继续介绍有关react-router,redux...的一系列配。
喜欢就点个赞吧，讨厌的话，反正不能扔臭鸡蛋，就点三次按钮吧