Question

在找到节点模块时，我无法弄清楚为什么路径错误。这是我的/webpack-dev-server.js

const chalk = require('chalk');
const webpack = require('webpack');
const env = require('../server/environment');
const WebpackDevServer = require('webpack-dev-server');
const webpackConfig = require('./webpack.config.development.js');

const server = new WebpackDevServer(webpack(webpackConfig), {
  publicPath: '/client',
  contentBase: '/client',
  inline: true,
  hot: true,
  compress: true,
  stats: false,
  quiet: true,
  noInfo: true,
  lazy: false,
  historyApiFallback: true,
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Headers': 'X-Requested-With'
  },
  proxy: {
    "*": 'http://localhost:3000'
  }
});

server.listen(env.WEBPACK_PORT, 'localhost', (err) => {
  if (err) {
    console.log(chalk.red(err));
  }
  console.log(chalk.yellow(`Webpack server listening on http://localhost:${env.WEBPACK_PORT}`));
});

包括基本的webpack开发设置。当我启动上面的webpack-dev-server时，我在控制台中收到以下错误：

AppContainer.scss?048e:4Uncaught Error: Cannot find module "!!./../../../node_modules/css-loader/index.js?modules!./../../../node_modules/autoprefixer-loader/index.js!./../../../node_modules/sass-loader/index.js!./AppContainer.scss"

我看到node_modules的路径不正确。奇怪的是，如果我运行一台Express服务器并且只需要webpack-dev-server就可以了......

这是我的webpack配置：

import path from 'path';
import webpack from 'webpack';
import env from '../server/environment';

export default {

  target: 'web',

  devtool: 'cheap-module-eval-source-map',

  entry: [
    `webpack-dev-server/client?http://localhost:${env.WEBPACK_PORT}`,
    'webpack/hot/dev-server',
    'babel-polyfill',
    './client/index'
  ],

  output: {
    path: path.join(__dirname, '../client'),
    pathInfo: true,
    publicPath: `http://localhost:${env.WEBPACK_PORT}/client/`,
    filename: 'index.js'
  },

  resolve: {
    root: path.join(__dirname, '..'),
    modulesDirectories: [
      'node_modules',
      'client'
    ],
    extensions: ['', '.json', '.js']
  },

  plugins: [
    new webpack.DefinePlugin({
      __DEV__: env.isDev,
      __PRODUCTION__: env.isProd,
      __TOKEN_KEY__: JSON.stringify(env.TOKEN_KEY),
      __ENV__: JSON.stringify(env.ENV)
    }),
    new webpack.HotModuleReplacementPlugin()
  ],

  module: {
    noParse: /\.min\.js/,
    loaders: [
      { test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file' },
      { test: /\.(woff|woff2)$/, loader: 'file-loader?prefix=font/&limit=5000' },
      {
        test: /\.ttf(\?v=\d+.\d+.\d+)?$/,
        loader: 'file-loader?limit=10000&mimetype=application/octet-stream'
      },
      {
        test: /\.svg(\?v=\d+.\d+.\d+)?$/,
        loader: 'file-loader?limit=10000&mimetype=image/svg+xml'
      },
      { test: /\.(jpe?g|png|gif)$/i, loaders: ['file'] },
      { test: /\.ico$/, loader: 'file-loader?name=[name].[ext]' },
      { test: /\.json$/, loader: 'json' },
      { test: /\.scss$/, loader: 'style!css?modules!autoprefixer!sass' },
      {
        test: /\.js$/,
        loaders: ['react-hot', 'babel'],
        exclude: /node_modules/
      }
    ]
  }
};

Answer 1

我需要正确扩展基本配置类。

Webpack无法找到正确的模块

1 个答案: