webpack include 和 exclude的配置问题

[miyizs]

直接在页面中如下引入 import { Modal } from 'rctui'; webpack报错很多下面为部分内容

ERROR in ./node_modules/rctui/Datepicker/Datetime.js
Module parse failed: /Users/rox/Desktop/xstar-center-fe/node_modules/rctui/Datepicker/Datetime.js Unexpected token (205:6)
You may need an appropriate loader to handle this file type.
|
|     return (
|       <div className={_datepickers.timeContainer}>
|         <Clock current={current} active={!!timeStage}
|           stage={timeStage}
 @ ./node_modules/rctui/Datepicker/index.js 3:0-33
 @ ./node_modules/rctui/index.js
 @ ./src/components/common/CommonModal.jsx
 @ ./src/containers/Fund/index.jsx
 @ ./src/routes/fundSubroutes.js
 @ ./src/routes/index.js
 @ ./src/containers/index.jsx
 @ ./src/index.jsx
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server babel-polyfill ./libs/charting_library.min.js ./src

ERROR in ./node_modules/rctui/Datepicker/Range.js
Module parse failed: /Users/rox/Desktop/xstar-center-fe/node_modules/rctui/Datepicker/Range.js Unexpected token (41:55)
You may need an appropriate loader to handle this file type.
|
|   render () {
|     const { className, value, min, max, con, hasError, ...other } = this.props
|
|     const type = other.type.replace('-range', '')
 @ ./node_modules/rctui/index.js 9:0-62 10:0-63
 @ ./src/components/common/CommonModal.jsx
 @ ./src/containers/Fund/index.jsx
 @ ./src/routes/fundSubroutes.js
 @ ./src/routes/index.js
 @ ./src/containers/index.jsx
 @ ./src/index.jsxy @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server babel-polyfill ./libs/charting_library.min.js ./src

参考这个问题web-dev-server时遇到下列问题好像是 exclude的地方添加了/node_modules/,于是在webpack中改为如下配置然后报下面的错

 {
        test: /\.jsx?$/,
        loader: 'happypack/loader?id=js',
        exclude: /node_modules/,
        include: ['/node_modules/rctui']
},

ERROR in ./src/index.jsx
Module parse failed: /Users/roxy/Desktop/xstar-center-fe/node_modules/eslint-loader/index.js??ref--0!/Users/rox/Desktop/xstar-center-fe/src/index.jsx Unexpected token (7:2)
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
|   <Container />,
|   document.getElementById('app'),
| );
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server babel-polyfill ./libs/charting_library.min.js ./src

请问这样该如何解决

webpack的配置如下

module.exports = env => ({
  entry: {
    app: ['babel-polyfill', './src'],
  },
  output: {
    path: `${__dirname}/dist`,
    filename: '[name].bundle.js',
    chunkFilename: '[name].bundle.js',
  },
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          emitWarning: env === 'development',
        },
      }, {
        test: /\.jsx?$/,
        loader: 'happypack/loader?id=js',
        exclude: /node_modules/,
        include: ['/node_modules/rctui'],
      },
      {
        test: /\.(css)$|\.(scss)$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'happypack/loader?id=css',
        }),
      },
      {
        test: /\.jpe?g$|\.gif$|\.png$|\.ico$|\.svg$|\.eot$|\.woff$|\.ttf$/,
        loader: 'url-loader',
        options: {
          limit: '10000',
          name: '[name].[hash:5].[ext]',
        },
      },
      {
        test: /\.styl$/,
        use: extractStylus.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            { loader: 'postcss-loader', options: { sourceMap: true } },
            'stylus-loader',
          ],
        }),
      },
    ],
    noParse: [/moment.js/],
  },
  resolve: {
    modules: ['node_modules'],
    extensions: ['.js', '.jsx'],
  },
  target: 'web',
  devServer: {
    proxy: {
      '/api': {
        target: process.env.DEV_SERVER_PROXY,
        secure: false,
      },
    },
    setup(app) {
      app.use('/charting_library', express.static('libs/'));
    },
    port: process.env.DEV_SERVER_PORT,
    historyApiFallback: true,
    hot: true,
  },
  plugins: [
    ...env === 'development' ? [
      new webpack.DllReferencePlugin({
        context: __dirname,
        manifest: path.join(__dirname, 'dll', 'bundle-manifest.json'),
      }),
      new AddAssetHtmlPlugin({
        filepath: require.resolve((`${__dirname}/dll/bundle.dll.js`)),
        hash: true,
        includeSourcemap: false,
      }),
    ] : [],
    new webpack.EnvironmentPlugin(Object.keys(process.env)),
    new webpack.NormalModuleReplacementPlugin(/element-react[/\\]src[/\\]locale[/\\]lang[/\\]zh-CN/, 'element-react/src/locale/lang/en'),
    new CleanWebpackPlugin('./dist', {
      verbose: env === 'production',
      dry: env === 'development',
    }),
    new HtmlWebpackPlugin({
      favicon: './src/styles/images/favicon.ico',
      template: './src/index.html',
      hash: env === 'production',
    }),
    new ExtractTextPlugin({
      filename: '[name].css',
      allChunks: true,
      disable: env === 'development',
    }),
    extractStylus,
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: ({ context }) => context && context.includes('node_modules'),
    }),
    new webpack.optimize.UglifyJsPlugin({
      output: { comments: false },
    }),
    new HappyPack({
      id: 'js',
      threadPool: happyThreadPool,
      loaders: env === 'dev' ? [
        {
          path: 'react-hot-loader',
        }, {
          path: 'babel-loader',
        },
      ] : [
        {
          path: 'babel-loader',
          options: {
            cacheDirectory: env === 'development',
          },
        },
      ],
    }),
    new HappyPack({
      id: 'css',
      threadPool: happyThreadPool,
      loaders: [
        {
          path: 'css-loader',
        }, {
          path: 'postcss-loader',
        }, {
          path: 'stylus-loader',
        }, {
          path: 'sass-loader',
        },
      ],
    }),
  ],
});

[miyizs]

已经参考过Lobos/react-example项目 还是没有找到解决方法

[vipcxj]

webpack 7对于这个问题有个相关的bug汇报，那个bug只会出现在windows平台上。更新的版本有修复这个bug（虽然是不完美的修复）所以你可以试试更新webpack的版本