javascript - webpack dev server does not show the content - Stack Overflow

admin管理员组

文章数量:1305299

I have the following problem when running the webpack dev server: when I run npm start, it show the following:

➜ directory git:(staging) ✗ npm start

directory @1.0.0 start directory BUILD_DEV=1 BUILD_STAGING=1 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js

http://localhost:8080/

webpack result is served from /undefined/

content is served from

directory 404s will fallback to /index.html

Hash: 75773622412153d5f921

Version: webpack 1.12.11

Time: 43330ms

I guess the problem might because the following line: webpack result is served from /undefined/

When I open the browser at http://localhost:8080/, it appear as follow:

Cannot GET /

and there is no thing in the console.

Do you have any ideas for this problem ?

UPDATE: WEBPACK CONFIG FILE

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 mon = {
  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(mon, {
    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,
        pressor: {
          screw_ie8: true,
          warnings: false,
        },
        press: {
          warnings: false,
        },
        output: {
          ments: 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(mon, config);
}

I have the following problem when running the webpack dev server: when I run npm start, it show the following:

➜ directory git:(staging) ✗ npm start

directory @1.0.0 start directory BUILD_DEV=1 BUILD_STAGING=1 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js

http://localhost:8080/

webpack result is served from /undefined/

content is served from

directory 404s will fallback to /index.html

Hash: 75773622412153d5f921

Version: webpack 1.12.11

Time: 43330ms

I guess the problem might because the following line: webpack result is served from /undefined/

When I open the browser at http://localhost:8080/, it appear as follow:

Cannot GET /

and there is no thing in the console.

Do you have any ideas for this problem ?

UPDATE: WEBPACK CONFIG FILE

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 mon = {
  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(mon, {
    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,
        pressor: {
          screw_ie8: true,
          warnings: false,
        },
        press: {
          warnings: false,
        },
        output: {
          ments: 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(mon, config);
}

• javascript
• reactjs
• npm
• webpack-dev-server

Share Improve this question Follow edited Aug 11, 2017 at 2:46 super1ha1 asked Feb 1, 2016 at 3:46 super1ha1super1ha1 62911 gold badge1010 silver badges1919 bronze badges 1

• 1 @no answer to solve this bug ? – super1ha1 Commented Feb 1, 2016 at 9:19

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Same problem occurred to me when i started using babel-loader > 6.

It was fixed by adding contentBase in webpack dev server configuration.

In my case it looked like this

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

I would be great to see your webpack config file to pin point the exact problem, but from the error message, there could be multiple problem

• Make sure you are on the right port
• Make sure your webpack config has path and public path setup
• Make sure you have contentBase setup as well

Without seeing your webpack file and more concrete detail, it is quite hard to pinpoint the issue. But you can always go to https://webpack.github.io/docs/webpack-dev-server.html for information on how to set it up.

本文标签： javascriptwebpack dev server does not show the contentStack Overflow