Contenu pas de webpack est servi à partir de /foo

J'ai juste ne peut pas démarrer ce serveur, j'ai lu le webpack-dev-serveur docs.

devServer: {
  contentBase: path.join(__dirname, "dist"),
  compress: true,
  port: 9000
}

L'exemple de code a l'air simple,mais je ne peux pas démarrer ce serveur avec succès,peu importe ce que j'ai essayé,dans un autre dossier,il juste ne peut pas obtenir le contenu!!!Ai-je raté quelque chose?

Toute aide serait très apprécier.

De sortie:

Project is running at http://0.0.0.0:8080/
webpack output is served from /assets/
Content not from webpack is served from ~/WebstormProjects/react_back/assets/

Mon projet structure:

├── [drwxr-xr-x ]  src
│ └── [-rw-r--r-- ]  index.js
├── [drwxr-xr-x ]  public
│ ├── [-rw-r--r-- ]  index.html
│ ├── [drwxr-xr-x ]  assets
│ │ └── [-rw-r--r-- ]  bundle.js
│ └── [-rw-r--r-- ]  favicon.ico
├── [-rw-r--r-- ]  package.json
├── [-rw-r--r-- ]  npm-debug.log
├── [-rw-r--r-- ]  webpack.config.js

paquet.json

  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --devtool eval"
  },

webpack.config.js

module.exports = {
    entry: __dirname + "/src/index.js",
    output: {
        path: __dirname + "/public",
        publicPath: "/assets/",
        filename: "assets/bundle.js",
        chunkFilename: '[name].js'
    },
    devServer: {
        contentBase: __dirname + "/assets/",
        inline: true,
        host: '0.0.0.0',
        port: 8080,
    },
    module: {
        loaders: [
            {
                test: /\.(jpg|jpeg|gif|png|ico)$/,
                exclude: /node_modules/,
                loader: 'file-loader?name=[name].[ext]'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ["es2016", "react", "env", "stage-2"]
                }
            }
        ]
    }
};

Version:

➜  node -v
v7.6.0
➜  webpack-dev-server -v
webpack-dev-server 2.4.1
webpack 2.2.1

OriginalL'auteur McGrady | 2017-03-10

  1. 14

    Le premier problème, c'est que vous serviez le contenu de assets/ mais vous n'avez pas ce répertoire, vous avez public/assets/ et c'est même pas ce que vous voulez, parce que votre index.html est dans public/. Donc, ce que vous voulez vraiment est le réglage de la contentBase à public/:

    devServer: {
    contentBase: __dirname + "/public/",
    inline: true,
    host: '0.0.0.0',
    port: 8080,
},

    Maintenant, vous avez encore le problème que webpack-dev-server ne sert pas le bon paquet. Il pourrait fonctionner, mais c'est parce que vous avez le paquet sur votre système de fichier, qui sera utilisé à la place du bundle qui webpack-dev-server servirait à partir de la mémoire. La raison en est que webpack-dev-server sert uniquement à partir de la mémoire si le chemin d'accès correct est atteint. En supposant que vous êtes, y compris assets/bundle.js dans votre index.html, qui correspond au chemin d'accès, mais de la configuration de publicPath: "/assets/", de sorte qu'il sera à la recherche de /assets/ et ajoute le nom de fichier (qui est assets/bundle.js, en réalité, le bundle est servi à partir de /assets/assets/bundle.js.

    Pour corriger cela, vous pouvez soit supprimer le publicPath option (réglage publicPath: "/" a le même effet).

    output: {
    path: __dirname + "/public",
    filename: "assets/bundle.js",
    chunkFilename: '[name].js'
},

    Ou vous pouvez modifier le chemin de sortie de /public/assets/ et le nom du fichier à juste bundle.js. Cela permettra également de faire vos morceaux d'aller dans le répertoire actif, ce qui est probablement ce que vous voulez de toute façon.

    output: {
    path: __dirname + "/public/assets/",
    publicPath: "/assets/",
    filename: "bundle.js",
    chunkFilename: '[name].js'
},

    Remarque: publicPath affecte certains chargeurs de modifier l'URL d'actifs.

    Vous avez répondu à mes doutes,je peux voir le contenu,mais pourquoi le outptu est encore webpack output is served from / Content not from webpack is served from ~/WebstormProjects/react_back/public/
    C'est le chemin d'accès au serveur, il est servi à partir de /, qui est dans ce cas http://0.0.0.0:8080/. Il ne montre pas où le contenu vient, mais où vous pouvez en faire la demande.

    OriginalL'auteur Michael Jungo