Question

我才刚刚开始学习React，并且我想在React中减少使用。我对此进行了一些研究，他们说我应该在webpack.config.dev.js中编写配置，但是运行npm run eject之后，我只有一个文件：webpack.config.js。

我认为这可能是因为更新，新版本可能将webpack.config.dev.js和webpack.config.prod.js合并为`webpack.config.js。

然后我检查了webpack的主页，上面写着：

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

但是我不知道在哪里插入这些代码。我没有找到任何类似的代码。所以我想要一个简单的示例，说明如何在React中减少支持。

谢谢。

Answer 1

您需要在弹出后执行以下步骤，以减少使用中的反应

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,
     },
    }

那么您会很高兴，如果有任何疑问，请随时进行澄清

Answer 2

我相信您正在使用create-react-app入门套件。很好，但是如果您想在设置中添加更多功能，则入门套件会带来各自的麻烦。

您可以学习设置反应，而不是让入门套件为您处理。

无论如何您都可以尝试

您需要babel知识来处理转译：

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

像这样设置您的反应依赖项：

npm i react react-dom --save-dev

完成此设置后，请使用以下代码添加.bablerc文件：

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

设置依赖项来加载您的CSS /更少文件。这将获取您所需的CSS以及更少的所有加载器。

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

现在，您将需要一个HTML插件和一个用于Webpack的模板 .html 文件来提供您的响应。

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

模板文件（另存为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>

您现在将需要一个webpack devServer来服务生成的index.html

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

将以下内容添加到package.json文件中

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

现在，您应该拥有一个webpack.config.js文件，它看起来像这样。

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')
        }
    };
}

在您的src文件夹中还有一个app.js文件，

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

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

使用npm start运行开发版本。

希望这会有所帮助。如果您遇到任何问题，请告诉我。我同意这是第一次繁琐的工作。但从长远来看，它确实有助于扩展功能。

如何在React 16.7和Webpack 4.29中使用LESS？

2 个答案: