使用antd 3.3.3配置webpack 3.11.0

时间:2018-03-31 18:06:15

标签: webpack antd

未捕获错误:模块构建失败:错误:ENOENT将antd升级到3.3.3后

我们最近升级到了Antd 3.3.3。迁移到antd 3.3.3后,项目编译成功..但是当我们尝试访问页面时抛出以下错误。

 Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open
     

'/用户/ yaal / UI / node_modules / RC-对话框/ ES / DialogWrap.js'

     

/ node_modules / CSS-装载机?? REF! - 1-1 ./ node_modules / antd / DIST / antd.css   模块构建失败:错误:ENOENT:没有这样的文件或目录,打开   '/Users/yaal/git/helix/UI/node_modules/antd/dist/antd.css'

     

/node_modules/rc-calendar/es/index.js模块构建失败:错误:   ENOENT:没有这样的文件或目录,打开   '/Users/yaal/git/helix/UI/node_modules/rc-calendar/es/index.js'@   ./node_modules/antd/lib/date-picker/index.js 11:18-40 @   ./src/components/PersonalDetails.js

找到我的webpack.config.js

const HtmlPlugin = require('html-webpack-plugin');
const path = require('path');
const fs = require('fs');

const lessToJs = require('less-vars-to-js');

const themeVariables = lessToJs(
  fs.readFileSync(path.join(__dirname, './ant-default-vars.less'), 'utf8')
);

module.exports = {
  entry: './src/index.jsx',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build')
  },


  devtool: 'source-map',

  resolve: {
    extensions: ['.webpack.js', '.web.js', '.tsx', '.js', '.json', '.less']
  },
  devServer: {
    historyApiFallback: true
  },

  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        include: path.join(__dirname, 'src'),
        exclude: [/node_modules/]
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader?url=false',
            options: {
              modules: false,
              importLoaders: 1,
              localIdentName: '[name]__[local]___[hash:base64:5]',
              sourceMap: true
            }
          }
        ]
      },
      {
        test: /\.less$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          {
            loader: 'less-loader',
            options: {
              modules: false,
              javascriptEnabled: true,
              modifyVars: themeVariables
            }
          }
        ]
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loader: 'url-loader?name=images/[name].[ext]'
      }

    ]
  }
};

.babelrc

{
      "presets": ["react", "flow", "env", "stage-0"],
      "plugins": [
        "transform-object-rest-spread",
        ["transform-es2015-arrow-functions", { "spec": true }],
        ["import", { "libraryName": "antd", "style": "css" }]
      ]
    }

1 个答案:

答案 0 :(得分:0)

更新依赖包后问题得到解决。