reactjs - create - webpack-dev-server npm

El contenido no del paquete web se sirve desde/foo

Question

Simplemente no puedo iniciar este servidor, leo los documentos webpack-dev-server .

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

El código de muestra parece simple, pero simplemente no puedo iniciar este servidor con éxito, no importa lo que intenté, carpeta diferente, simplemente no puede obtener el contenido. ¿Me estoy perdiendo algo?

Cualquier ayuda sería muy apreciada.

Salida:

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/

Mi estructura de proyecto:

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

paquete.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"]
                }
            }
        ]
    }
};

Versión:

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

Answer 1

El primer problema es que está publicando el contenido de los assets/ pero no tiene ese directorio, tiene public/assets/ y eso ni siquiera es lo que quiere, porque su index.html está en public/ . Entonces, lo que realmente quieres es establecer la contentBase de contentBase en public/ :

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

Ahora todavía tendrá el problema de que webpack-dev-server no sirve el paquete correcto. Podría funcionar, pero eso se debe a que tiene el paquete en su sistema de archivos actual, que se usará en lugar del paquete que webpack-dev-server podría webpack-dev-server desde la memoria. El motivo es que el webpack-dev-server solo sirve desde la memoria si se golpea la ruta correcta. Suponiendo que esté incluyendo assets/bundle.js en su index.html , eso coincidiría con la ruta, pero está configurando publicPath: "/assets/" , por lo que buscará /assets/ y le agregará el nombre de archivo (que es assets/bundle.js , en realidad el paquete se sirve desde /assets/assets/bundle.js .

Para solucionarlo, puede eliminar la opción publicPath (establecer publicPath: "/" tiene el mismo efecto).

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

O puede cambiar la ruta de salida a /public/assets/ y el nombre de archivo a solo bundle.js . Esto también hará que tus fragmentos ingresen al directorio de activos, que probablemente sea lo que quieras de todos modos.

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

Nota: publicPath afecta a algunos cargadores que cambian la URL de los activos.