web-dev-qa-db-fra.com

Le contenu ne provenant pas du webpack est servi depuis / foo

Je ne peux tout simplement pas démarrer ce serveur, j'ai lu les documents webpack-dev-server .

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

L'exemple de code semble simple, mais je ne peux pas démarrer ce serveur avec succès, peu importe ce que j'ai essayé, un dossier différent, il ne peut tout simplement pas obtenir le contenu !!! Ai-je raté quelque chose?

Toute aide serait grandement appréciée.

Production:

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/

Ma structure de projet:

├── [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

package.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
reactjswebpackwebpack-dev-server
10
McGrady

Le premier problème est que vous diffusez le contenu de assets/ mais vous n'avez pas ce répertoire, vous avez public/assets/ et ce n'est même pas ce que vous voulez, car votre index.html est dans public/. Donc, ce que vous voulez vraiment, c'est définir contentBase sur public/:

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

Vous aurez maintenant toujours le problème que webpack-dev-server ne sert pas le bon ensemble. Cela peut fonctionner, mais c'est parce que vous avez le bundle sur votre système de fichiers réel, qui sera utilisé à la place du bundle qui webpack-dev-server servirait de mémoire. La raison en est que webpack-dev-server ne sert de mémoire que si le chemin correct est atteint. En supposant que vous incluez assets/bundle.js dans votre index.html, cela correspondrait au chemin, mais vous définissez publicPath: "/assets/", il recherchera donc /assets/ et y ajoute le nom de fichier (qui est assets/bundle.js, en réalité le bundle est servi à partir de /assets/assets/bundle.js.

Pour résoudre ce problème, vous pouvez supprimer l'option publicPath (paramètre publicPath: "/" a le même effet).

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

Ou vous pouvez changer le chemin de sortie en /public/assets/ et le nom de fichier juste bundle.js. Cela fera également entrer vos morceaux dans le répertoire des ressources, 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 qui modifient l'URL des actifs.

22
Michael Jungo