webpack 开发服务器不显示内容

Posted 2023-03-08

【中文标题】webpack 开发服务器不显示内容

【英文标题】：webpack dev server does not show the content

【发布时间】：2016-05-09 10:37:45

【问题描述】：

我在运行 webpack 开发服务器时遇到以下问题： 当我运行 npm start 时，它显示以下内容：

➜ 目录 git:(staging) ✗ npm start

目录@1.0.0 起始目录 BUILD_DEV=1 BUILD_STAGING=1 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js

http://localhost:8080/

webpack 结果来自 /undefined/

内容来自

目录 404 将回退到 /index.html

哈希：75773622412153d5f921

版本：webpack 1.12.11

时间：43330ms

我猜这个问题可能是因为以下行： webpack 结果来自 /undefined/

当我在 http://localhost:8080/ 打开浏览器时，显示如下：

无法获取/

并且控制台中没有任何东西。

你对这个问题有什么想法吗？

更新：WEBPACK 配置文件

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge = require('webpack-merge');
const nodeModulesDir = path.resolve(__dirname, 'node_modules');

const deps = [
  'moment/min/moment.min.js',
  'underscore/underscore-min.js',
];

/* Include SASS path here if you want to this in your sass files:
 *   @import 'bourbon';
 */
const bourbon = require('node-bourbon').includePaths;

const TARGET = process.env.npm_lifecycle_event;
const ROOT_PATH = path.resolve(__dirname);
const SASS_DEPS = [bourbon].toString();

const BUILD_NUMBER = process.env.CI_BUILD_NUMBER;

const common = 
  entry: path.resolve(ROOT_PATH, 'app/index.js'),
  output: 
    filename: BUILD_NUMBER + '-[hash].js',
    path: path.resolve(ROOT_PATH, 'build'),
    publicPath: `/$BUILD_NUMBER/`,
  ,
  module: 
    loaders: [
      
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass?includePaths[]=' + SASS_DEPS],
        include: path.resolve(ROOT_PATH, 'app'),
      ,
      
        test: /\.css$/,
        loaders: [
          'style',
          'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
          'sass?includePaths[]=' + SASS_DEPS,
          'postcss'
        ],
        include: path.resolve(ROOT_PATH),
        exclude: /(pure\/grids|Grids).*\.css$/,
      ,
      
        test: /(pure\/grids|Grids).*\.css$/,
        loaders: [
          'style',
          'css',
          'sass?includePaths[]=' + SASS_DEPS,
        ],
        include: path.resolve(ROOT_PATH),
      ,
      
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader?limit=10000&minetype=application/font-woff',
      ,
       test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader',
      ,
      
        test: /\.json$/,
        loader: 'json',
      ,
    ],
  ,
  plugins: [
    new HtmlWebpackPlugin(
      title: 'My App',
      template: path.resolve(ROOT_PATH, 'app/index.html'),
      inject: 'body',
      minify: 
        removeComments: true,
        collapseWhitespace: true,
      ,
    ),
    new webpack.DefinePlugin(
      __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'false')),
      __STAGING__: JSON.stringify(JSON.parse(process.env.BUILD_STAGING || 'false')),
      __API_HOST__: JSON.stringify(process.env.BUILD_STAGING ? 'my.api' : 'my.api'),
    ),
  ],
  resolve: 
    alias: 
      'styles': path.resolve(ROOT_PATH, 'app/styles'),
    ,
    extensions: ['', '.js', '.jsx', '.json'],
  ,
  postcss: function() 
    return [
      require('postcss-import'),
      require('autoprefixer'),
      require('postcss-cssnext'),
    ]
  
;

if (TARGET === 'start' || !TARGET) 
  module.exports = merge(common, 
    output: 
      filename: '[hash].js',
      path: path.resolve(ROOT_PATH, 'build'),
      publicPath: '/',
    ,
    devtool: 'eval-source-map',
    module: 
      loaders: [
        
          test: /\.jsx?$/,
          loaders: [
            'react-hot',
            'babel-loader'
          ],
          include: path.resolve(ROOT_PATH, 'app'),
        ,
      ],
    ,
    devServer: 
      colors: true,
      historyApiFallback: true,
      hot: true,
      inline: true,
      progress: true,
    ,
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
    ],
  );
 else if (TARGET === 'build' || TARGET === 'builds') 
  const config = 
    resolve: 
      alias: ,
    ,
    module: 
      loaders: [
        
          test: /\.jsx?$/,
          loader: 'babel-loader',
          include: path.resolve(ROOT_PATH, 'app'),
        ,
      ],
      noParse: [],
    ,
    plugins: [
      new webpack.optimize.UglifyJsPlugin(
        minimize: true,
        compressor: 
          screw_ie8: true,
          warnings: false,
        ,
        compress: 
          warnings: false,
        ,
        output: 
          comments: false,
        ,
      ),
      new webpack.optimize.DedupePlugin(),
      new webpack.DefinePlugin(
        'process.env':  'NODE_ENV': JSON.stringify(process.env.NODE_ENV) ,
      ),
    ],
  ;
  deps.forEach((dep) => 
    const depPath = path.resolve(nodeModulesDir, dep);
    config.resolve.alias[dep.split(path.sep)[0]] = depPath;
    config.module.noParse.push(depPath);
  );
  module.exports = merge(common, config);

【问题讨论】：

@no answer来解决这个错误？

【参考方案1】：

我很高兴看到您的 webpack 配置文件来查明确切的问题，但从错误消息来看，可能存在多个问题

确保你在右边port 确保你的 webpack 配置有 path 和 public path 设置 确保您已将contentBase 设置为 好

没有看到您的 webpack 文件和更具体的细节，很难确定问题所在。但您可以随时前往https://webpack.github.io/docs/webpack-dev-server.html 获取有关如何设置的信息。

【讨论】：

您好，谢谢您的回复，我更新了webpack配置文件！

【参考方案2】：

当我开始使用 babel-loader > 6 时，我也遇到了同样的问题。

通过在 webpack 开发服务器配置中添加 contentBase 已修复。

就我而言，它看起来像这样

new WebPackDevServer(webpack(config), 
    publicPath: config.output.publicPath,
    hot: true,
    historyApiFallback: true,
    contentBase: __dirname + '/public'
).listen(3000, 'localhost')