Webpack-dev-server提供目录列表而不是应用程序页面


91

在此处输入图片说明

我只能在下看到实际的应用/public

的配置webpack.config.js如下:

var path    = require('path');
var webpack = require('webpack');

module.exports = {

  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './app/js/App.js'
],

  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
    publicPath: 'http://localhost:8080'
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['react-hot', 'babel-loader'],
        exclude: /node_modules/
      }
     ]
   },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]

};

项目层次结构为:

  • 应用程式

    • js
  • node_modules

  • 上市

    • 的CSS

    • img

    bundle.js

    index.html

  • package.json

  • webpack.config.js

我如何修改以确保该http://localhost:8080/条目本身是针对应用程序的?

Answers:


78

如果您使用的是webpack的开发服务器,则可以传入选项以/public用作基本目录。

devServer: {
    publicPath: "/",
    contentBase: "./public",
    hot: true
},

更多选项和一般信息,webpack配置文档,尤其是webpack开发服务器文档


1
感谢您的回答,这让我感到困惑。也感谢您发布两个文档的链接。
克里斯·施米茨

3
Webpack 2呢?我阅读了文档,但自己却找不到。
mayyiam

@mightyiam,您还将要设置publicPath属性。我将更新以包括在内。
凉鞋

1
我不知道谁能从文档中找出答案。谢谢。也许考虑重写有关这些属性的一些文档?
mayyiam

17

您还可以将--content-base标志添加到启动脚本中,例如

    "scripts": {
        "start:dev": "webpack-dev-server --inline --content-base ./public"
    }

4

就我而言,'index.html'设置时我拼写错误HTMLWebpackPlugin。如果您使用的是此插件,请仔细检查文件名。

var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

这帮助我解决了我通过webpack获取自动生成的HTML的事实。现在,通过设置此template参数,我可以毫无问题地指定自己的html。非常感谢!
danivicario

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.