我刚开始学习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中支持更少。
谢谢。
弹出后需要执行以下步骤以减少反应
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,
},
}
然后你会很高兴，如果有的话随时要求澄清
我相信你正在使用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 / less文件。这将获取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运行开发版本。
希望这可以帮助。如果您遇到任何问题，请告诉我。我同意这是第一次繁琐的工作。但从长远来看，它确实有助于扩展功能。