来自webpack的内容不是来自/ foo

Question

我只是无法启动此服务器,我阅读了webpack-dev-server文档.

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

示例代码看起来很简单,但我无法成功启动此服务器,无论我尝试了什么,不同的文件夹,它只是无法获取内容 !!!我错过了什么？

任何帮助都会非常感激.

输出:

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/

我的项目结构:

??? [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"]
                }
            }
        ]
    }
};

版:

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

Answer 1

第一个问题是你正在提供内容,assets/但你没有那个目录,你有public/assets/,甚至不是你想要的,因为你index.html的目录public/.所以你真正想要的是设置contentBase为public/:

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

现在,您仍然会遇到webpack-dev-server无法提供正确捆绑的问题.它可能有用,但这是因为你在实际的文件系统上有一个bundle,它将被用来代替webpack-dev-server从内存中提供的bundle .原因是webpack-dev-server只有在正确的路径被击中时才从内存中提供.假设你包含assets/bundle.js在你的index.html,那将匹配路径,但你正在设置publicPath: "/assets/",所以它将寻找/assets/并添加文件名(assets/bundle.js实际上,捆绑服务来自/assets/assets/bundle.js.

要解决此问题,您可以删除该publicPath选项(设置publicPath: "/"具有相同的效果).

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

或者您可以将输出路径/public/assets/和文件名更改为just bundle.js.这也会使你的块进入资产目录,这可能是你想要的.

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

注意:publicPath影响一些更改资产URL的加载器.

Answer 2

如果您使用的是 webpack 开发服务器^v4.0.0（在本文发布时仍然是 RC），则该contentBase属性将更改为static.

devServer: {
   // ...
   static: __dirname + "/public/",
   // ...
},

变更日志：https://github.com/webpack/webpack-dev-server/blob/master/CHANGELOG.md#static