Webpack开发服务器无法获取资源。

Question

我正在使用Webpack-4。目前的情况是，当webpack-dev-server运行时，/build目录下的文件根本不会被更新，而且它显示文件目录。

如果我删除/build目录下的文件，webpack-dev-server会报错“cannot get /”。我假设它应该从内存中加载这些文件。

const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebPackPlugin({
   template: "./src/index.html",
   filename: "./index.html"
});

const path = require('path');

module.exports = {
output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build/'),
},

module: {
    rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: ["env","react"]
                }
            }
        },
        { 
            test: /\.html$/,
            use: [{
                loader: "html-loader",
                options: {
                    minimize: true
                }
            }]
        }
    ]
},
plugins: [
    htmlPlugin
],
devServer: {       
    contentBase: "./build/",
    port: 5555
}
}

- Sahin Erbay

---

请在module.exports（上面的输出配置）中定义入口点（entry: './main.js'）。 - tarzen chugh

Webpack 4有一个默认的入口/src/index.js。 - Sahin Erbay

Answer 1

以下是一些帮助我理解和调试本地 webpack-dev-server 配置的小贴士：

1. 要查看 webpack-dev-server 在内存中提供哪些文件，请在浏览器中键入 http://localhost:{yourport}/webpack-dev-server。然后，您可以单击其中一个文件（链接），它将显示该文件所提供的路由和内容。
2. 当您启动 webpack-dev-server 时（即使用 npm start），它会在控制台中显示基于您的webpack.config.js 文件提供内容的位置。（有关详细说明，请参见下文）
3. 如果您想要热重载（我不知道为什么不想要），则需要在命令行中指定它（在您的 package.json 启动脚本中），而不是在配置文件中指定。由于某种原因，将其放入配置文件中无效。因此，请使用类似以下的内容：

package.json

"scripts": {
    "start": "webpack-dev-server --config webpack.config.js --hot --inline"
},

webpack.config.js配置

...
output: {
    filename: '[name].bundle.js',
    path: path.join(__dirname, 'public', 'scripts'),
},
...
devServer: {
    contentBase: path.join(__dirname, "public"),
    publicPath: 'http://localhost:8080/scripts/',
    port: 8080
},
...

输出

 i ｢wds｣: Project is running at http://localhost:8080/    
 i ｢wds｣: webpack output is served from http://localhost:8080/scripts/
 i ｢wds｣: Content not from webpack is served from C:\Workspace\WebSite\public

在输出的第2行中，注意由于配置中的contentBase，http://localhost:8080/scripts/实际上指向磁盘上的C:\Workspace\WebSite\public\scripts。(这也是webpack放置它的文件的位置 :) !!!) 在publicPath配置中，尾随的反斜杠很重要。

- Stephane

---

我真的非常想感谢你的回答！经过数小时的搜索，问题最终被发现是由于使用了path.resolve('./dist')来设置publicPath，这实际上是应用程序内部的绝对路径。这就是为什么浏览器无法看到编译后的样式/脚本。这个答案应该被标记为完整的答案！！ - Mohammed AlBanna