happy hacking 2021-07-29 13:09 采纳率: 0%
浏览 226
已结题

react-antd-日期选择器不能用

import dayjs from 'dayjs';
在 src目录下 使用是没有问题的。
在node_modules里面有个rc-picker 中也有import dayjs from 'dayjs';
但dayjs 是undefined;
导致 antd 的DatePicker不能用。
同样的代码在create-react-app 是可以使用的。觉得应该是webpack问题,不知道该怎么处理。

/** 这是用于开发环境的webpack配置文件 **/

const path = require("path"); // 获取绝对路径用
const webpack = require("webpack"); // webpack核心
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 动态生成html插件
const CopyPlugin = require("copy-webpack-plugin"); // 用于直接复制public中的文件到打包的最终文件夹中
const HappyPack = require("happypack"); // 多线程编译
const AntdDayjsWebpackPlugin = require("antd-dayjs-webpack-plugin");
const PUBLIC_PATH = "/"; // 基础路径

module.exports = {
  mode: "development",
  entry: [
    "webpack-hot-middleware/client?reload=true&path=/__webpack_hmr", // webpack热更新插件,就这么写
    "./src/index.js", // 项目入口
  ],
  output: {
    path: __dirname + "/", // 将打包好的文件放在此路径下,dev模式中,只会在内存中存在,不会真正的打包到此路径
    publicPath: PUBLIC_PATH, // 文件解析路径,index.html中引用的路径会被设置为相对于此路径
    filename: "bundle-[contenthash].js", // 编译后的文件名字
  },
  devtool: "inline-source-map", // 报错的时候在控制台输出哪一行报错
  optimization: {
    splitChunks: {
      chunks: "all",
    },
  },
  module: {
    rules: [
      // {
      // 编译前通过eslint检查代码 (注释掉即可取消eslint检测)
      // test: /\.js?$/,
      // enforce: "pre",
      // use: ["eslint-loader"],
      // include: path.resolve(__dirname, "src"),
      // },
      {
        // .js .jsx用babel解析
        test: /\.js?$/,
        use: ["happypack/loader"],
        exclude: /node_modules/
      },
      {
        // .css 解析
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        // .less 解析
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          "postcss-loader",
          {
            loader: "less-loader",
            options: { lessOptions: { javascriptEnabled: true } },
          },
        ],
      },
      {
        // 文件解析
        test: /\.(eot|woff|otf|svg|ttf|woff2|appcache|mp3|mp4|pdf)(\?|$)/,
        include: path.resolve(__dirname, "src"),
        use: [
          {
            loader: "file-loader",
            options: {
              name: "assets/[name].[hash:4].[ext]",
            },
          },
        ],
      },
      {
        // 图片解析
        test: /\.(png|jpg|jpeg|gif)$/i,
        include: path.resolve(__dirname, "src"),
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 8192,
              name: "assets/[name].[hash:4].[ext]",
            },
          },
        ],
      },
      {
        // wasm文件解析
        test: /\.wasm$/,
        include: path.resolve(__dirname, "src"),
        type: "webassembly/experimental",
      },
      {
        // xml文件解析
        test: /\.xml$/,
        include: path.resolve(__dirname, "src"),
        use: ["xml-loader"],
      },
    ],
  },
  plugins: [
    new AntdDayjsWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(), // 热更新插件
    new webpack.DefinePlugin({
      "process.env": "dev",
    }),
    new HappyPack({
      loaders: ["babel-loader"],
    }),
    new HtmlWebpackPlugin({
    }),
    // 拷贝public中的文件到最终打包文件夹里
    new CopyPlugin({
      patterns: [
        {
          from: "./public/**/*",
          to: "./",
          globOptions: {
            // ignore: ["**/favicon.png", "**/index.html"],
          },
          noErrorOnMissing: true,
        },
      ],
    }),
  ],
  resolve: {
    preferRelative:true,
    extensions: [".js", ".jsx", ".less", ".css", ".ts"], //后缀名自动补全
    alias: {
      crypto:false,
      "@": path.resolve(__dirname, "src"),
    },
  },
};


//.babrlrc
{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-syntax-dynamic-import",
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "react-loadable/babel",
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
}


代码地址:https://gitee.com/avecol/webpack.git

  • 写回答

2条回答 默认 最新

  • happy hacking 2021-07-29 17:43
    关注

    处理了。preferRelative:true 问题,去掉就好了

    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 7月29日
  • 创建了问题 7月29日

悬赏问题

  • ¥15 数学的三元一次方程求解
  • ¥20 iqoo11 如何下载安装工程模式
  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题