在react项目中配置webpack并添加less

1，创建项目
npm install -g create-react-app /搭建一个全局的脚手架/
create-react-app my-demo /创建项目 my-demo是项目名字/
2，安装webpack插件
“webpack”: “4.44.2”,
“webpack-cli”: “^4.3.0”,
“webpack-dev-server”: “3.11.0”,
3，配置webpack.common.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
 
module.exports = {
  // 设置为生产（production）模式
  // 生产模式默认会将js代码压缩
  // 如果你好奇打包后的文件长什么样
  // 可以将mode设置为"development"，将devtool设为"none"
  mode: "production",
  // 设置入口文件
  entry: "./src/index.js",
  output: {
    // 设置出口文件名
    filename: "main.js",
    // 设置出口文件的目录
    path: path.resolve(__dirname, "dist"),
    publicPath: "/"
  },
  resolve: {
    // 设置扩展，这样导入文件时可以省去写扩展名
    extensions: [".js", ".json", ".jsx"]
  },
  module: {
    rules: [
      {
       // 对".js"或".jsx"结尾的文件使用babel-loader进行转译
       // babel-loader的配置放到".babelrc"文件内
        test: /\.jsx?$/,
        use: "babel-loader"
      },
      {
        // 对css文件先后使用css-loader和style-loader
        // css-loader可以将导入项目的css变为js模块
        // style-loader可以让页面打开时，利用js将css模块
        // 内的样式注入到html头部的style标签内
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        // 使用file-loader来加载图片文件
        test: /\.(png|jpg|jpeg|svg|gif)$/,
        use: "file-loader"
      },
      {
        test:/\.less$/,
        use: [
             'style-loader',
             'css-loader',
             'less-loader'
        ]
      }
    ]
  },
  plugins: [
    // // 该插件能将生成的入口js文件注入到模板html内
    // new HtmlWebpackPlugin({
    //   // 设置模板的路径
    //   template: "./src/template.html",
    //   // 设置favicon的路径
    //   favicon: "./src/assets/favicon-32x32-next.png"
    // })
  ]
};

3，修改scripts
“build”: “webpack --config webpack.common.js”,执行npm run build测试安装结果
4，安装less插件
npm install css-loader@4
npm install style-loader@1
npm install less@4 less-loader@5
npm run eject（必须先commit）不可逆
5，修改build文件夹下的webpack.config.js（需要修改三处）

// 添加// style files regexes
const lessRegex =/\.less$/;
const lessModuleRegex =/\.module\.less$/;
// getStyleLoaders函数中添加lessOptions
const getStyleLoaders = (cssOptions, lessOptions, preProcessor)=>{
	const loaders = [
      {
        loader: require.resolve('less-loader'),
        options: lessOptions,
      },
}
// module中rules中添加less
{
   test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
    },
    'less-loader'
  ),
  sideEffects: true,
},
{
   test: lessModuleRegex,
   use: getStyleLoaders(
     {
       importLoaders: 2,
       sourceMap: isEnvProduction
         ? shouldUseSourceMap
         : isEnvDevelopment,
       modules: {
         getLocalIdent: getCSSModuleLocalIdent,
       },
     },
     'less-loader'
   ),
 },

修改css文件为less文件测试是否成功