Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.6k views
in Technique[技术] by (71.8m points)

reactjs - Content not from webpack is served from /foo

I just can't start this server, I read the webpack-dev-server docs.

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

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
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...