Je commence tout juste à apprendre React et je veux en utiliser moins dans React. J'ai fait des recherches à ce sujet et ils m'ont dit que je devrais écrire la configuration dans webpack.config.dev.js mais, après avoir exécuté npm run eject, je n'ai reçu qu'un seul fichier :webpack.config.js .

Je pense que c'est peut-être parce que la mise à jour , la nouvelle version peut combiner webpack.config.dev.js et webpack.config.prod.js à `webpack.config.js .

Et j'ai vérifié la page d'accueil de webpack, ça dit:

// webpack.config.js
module.exports = {
  ...
  module: {
    rules: [{
      test: /\.js$/,
      issuer: /\.less$/,
      use: [{
        loader: 'js-to-less-loader'
      }]
    }]
  }
};

Mais je ne sais pas où insérer ce code. Je n'ai trouvé aucun code comme celui-là. Je veux donc un exemple simple sur la façon de prendre en charge moins dans React.

Merci.

1
Neko 19 mars 2019 à 09:49

2 réponses

Meilleure réponse

Vous devez suivre les étapes suivantes après l'éjection pour utiliser moins de réaction

1. Go to webpack.config.js file and search for cssRegex change it from /\.css$/ to /\.(?:le|c)ss$/
2. install less and less loader using npm install -S less less-loader
3. search for getStyleLoaders method in webpack config file and add the following object to array of loaders specified over there
    {
     loader: require.resolve('less-loader'),
     options: {
      importLoaders: 1,
     },
    }

Ensuite, vous serez prêt à partir, n'hésitez pas à demander des éclaircissements le cas échéant

2
Sumanth Madishetty 19 mars 2019 à 07:51

Je pense que vous utilisez le kit de démarrage create-react-app. Eh bien, c'est bien, mais si vous souhaitez ajouter plus de fonctionnalités à votre configuration, les kits de démarrage sont livrés avec leurs propres complications.

Vous pouvez apprendre à configurer réagir au lieu de laisser le kit de démarrage le gérer pour vous.

Quoi qu'il en soit, vous pouvez essayer ceci,

Vous aurez besoin des dépendances babel pour gérer la transpilation :

npm install babel-core babel-loader babel-preset-env babel-preset-react --save-dev

Configurez vos dépendances de réaction comme ceci :

npm i react react-dom --save-dev

Une fois que vous avez terminé cette configuration, incluez votre fichier .bablerc avec le code suivant :

{
  "presets" : [
    "env",
    "react"
  ]
}

Configurez les dépendances pour charger vos fichiers css/less. Cela récupérera tous les chargeurs dont vous avez besoin pour css et moins.

npm install less less-loader style-loader css-loader --save--dev

Vous aurez maintenant besoin d'un plugin HTML et d'un fichier modèle .html pour webpack pour servir votre réaction.

npm i html-webpack-plugin html-loader --save-dev

Le fichier modèle (enregistrez-le sous src/index.html) :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<style>
    * {
        box-sizing: border-box;
    }
</style>
<body>
    <div class='content' id='app'></div>
</body>
</html>

Vous aurez maintenant besoin d'un webpack devServer pour servir l'index.html généré

npm install webpack-dev-server --save-dev

Ajoutez ce qui suit à votre fichier package.json

"scripts": {
  "start": "webpack --mode development",
  "build": "webpack --mode production"
}

A présent, vous devriez avoir un fichier webpack.config.js, qui ressemble assez à ceci.

const path = require('path');
const webpack = require('webpack');

const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = (env, argv) => {
    const {
        mode
    } = argv;
    return {
        module: {
            entry: path.join(__dirname, 'src', 'app.js'),
            watch: mode !== 'production',
            output: {
                path: path.join(__dirname, 'dist'),
                filename: mode === 'production' ? 'bundle.min.js' : 'bundle.js'
            },
            rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
            ],
            plugins: [
                new HtmlWebPackPlugin({
                    title: 'App',
                    template: "./src/index.html",
                    filename: "./index.html"
                })
            ]
        },
        devServer: {
            contentBase: path.join(__dirname, 'dist')
        }
    };
}

Et un fichier app.js dans votre dossier src comme ça,

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/style.less'

ReactDOM.render( <div> Hello from react! </div>, document.getElementById("app"));

Utilisez npm start pour exécuter la version de développement.

J'espère que cela t'aides. Faites-moi savoir si vous rencontrez des problèmes. Je suis d'accord que c'est un travail fastidieux pour la première fois. Mais cela aide à long terme à évoluer avec les fonctionnalités.

1
priyeshdkr 19 mars 2019 à 08:06