Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

The sample code looks simple,but I just can't start this server successfully,no matter what I tried,different folder,it just can't get the content !!!Am I missing something?

Any help would be great appreciate.

Output:

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/
My project 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
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
The first problem is that you're serving the content from assets/ but you don't have that directory, you have public/assets/ and that's not even what you want, because your index.html is in public/. So what you really want is setting the contentBase to public/:
devServer: {
    contentBase: __dirname + "/public/",
    inline: true,
    host: '0.0.0.0',
    port: 8080,
Now you'll still have the problem that webpack-dev-server doesn't serve the correct bundle. It might work, but that is because you have the bundle on your actual file system, which will be used instead of the bundle that webpack-dev-server would serve from memory. The reason for that is that webpack-dev-server only serves from memory if the correct path is hit. Assuming you're including assets/bundle.js in your index.html, that would match the path, but you're setting publicPath: "/assets/", so it will be looking for /assets/ and adds the filename to it (which is assets/bundle.js, in reality the bundle is served from /assets/assets/bundle.js.
To fix that you can either remove the publicPath option (setting publicPath: "/" has the same effect).
output: {
    path: __dirname + "/public",
    filename: "assets/bundle.js",
    chunkFilename: '[name].js'
Or you can change the output path to /public/assets/ and the filename to just bundle.js. This will also make your chunks go into the assets directory, which is probably what you want anyway.
output: {
    path: __dirname + "/public/assets/",
    publicPath: "/assets/",
    filename: "bundle.js",
    chunkFilename: '[name].js'
Note: publicPath affects some loaders that change the URL of assets.
                You answered my doubts,I can see the content,but why the outptu is still webpack output is served from / Content not from webpack is served from ~/WebstormProjects/react_back/public/
– McGrady
                Mar 11, 2017 at 6:33
                That's the server path, it's served from /, that is in that case http://0.0.0.0:8080/. It doesn't show where the content comes from but where you can request it.
– Michael Jungo
                Mar 11, 2017 at 10:38
If you are using the webpack dev server ^v4.0.0 (still an RC at the time of this post), the contentBase property is changed to static.
devServer: {
   // ...
   static: __dirname + "/public/",
   // ...
The CHANGELOG: https://github.com/webpack/webpack-dev-server/blob/master/CHANGELOG.md#static
                Yupp it's giving below error  [webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options has an unknown property 'contentBase'. These properties are valid: object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }
– Kapil Raghuwanshi
                Apr 6, 2022 at 7:32
This might be issue with 'react-scripts', for me it was not working for 3.4.1 version, I made the version to 3.4.0 and it is working now.
Open package.json file, and change "react-scripts": "3.4.0", if it is something else, OR you can try different versions as per your requirements. But this issues seems to be with "react-scripts" version so you need to check that.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.