webpack-dev-server 正确监视和编译文件，但浏览器无法访问它们

Posted 2023-02-22

【中文标题】webpack-dev-server 正确监视和编译文件，但浏览器无法访问它们

【英文标题】：webpack-dev-server watches and compiles files correctly, but browser can't access them

【发布时间】：2016-11-19 00:52:15

【问题描述】：

编辑：托管此示例的 github 存储库的链接是 here，以防有人想要运行它

---

我遇到了与另一个用户几乎完全相同的问题（您可以找到问题here），因为运行 webpack-dev-server 确实可以正确编译和监视文件（在终端中查看控制台输出)，但浏览器仍然无法正确查看我的网站。这是我的 webpack.config.js 文件：

var webpack = require('webpack'),
    path = require('path'),
    // webpack plugins
    CopyWebpackPlugin = require('copy-webpack-plugin');

var config = 
    context: path.join(__dirname,'app'),
    entry: './index.js',
    output: 
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js',
        publicPath: path.join(__dirname, 'public')
    ,
    devServer: 
        // contentBase: './public/'
    ,
    plugins: [
        // copies html to public directory
        new CopyWebpackPlugin([
             from: path.join(__dirname, 'app', 'index.html'),
                to:  path.join(__dirname, 'public')
        ]),
        // required bugfix for current webpack version
        new webpack.OldWatchingPlugin()
    ],
    module: 
        loaders: [
            // uses babel-loader which allows usage of ECMAScript 6 (requires installing babel-preset-es2015)
            test: /\.js$/, loader: 'babel', exclude: /node_modules/, query:  presets: ['es2015'],
            // uses the css-loader (loads css content) and style-loader (inserts css from css-loader into html)
            test: /\.css$/, loader: 'style!css', exclude: /node_modules/
        ]
    
;

module.exports = config;

这是我的目录结构：

+--- webpack/
   +--- app/
      +--- index.html
      +--- index.js
      +--- styles.css
   +--- package.json
   +--- webpack.config.js

目前，运行 webpack-dev-server 在浏览器中输出以下内容（注意缺少 public/ 目录，这是 webpack 通常输出我的 html 和 javascript 包的地方）：

---

编辑：添加 devServer.contentBase 属性并将其设置为 public 会使浏览器返回未找到的 403 错误，如下所示：

【问题讨论】：

你是如何从终端运行开发服务器的？

webpack-dev-server --colors --progress

注意到您的contentBase 已被注释掉。 webpack.github.io/docs/webpack-dev-server.html。如果未指定contentBase，则内容库默认为运行命令的目录

publicPath 不应是文件系统路径。

@sgarcia 我的错误。我现在正在将您的配置与我的配置进行比较。

【参考方案1】：

好的，所以我能够重现您在我的项目中遇到的问题。为了解决这个问题，我改变了一些东西。

这是我设置的。我在输出中定义的少一点，使用 jsx 而不是 js，但结果应该是一样的。您可以将我的src 替换为您的源代码所在的位置。

const config = 
    entry: './src/App.jsx',
    output: 
        filename: 'app.js'
    ,
    module: 
        loaders: [
            
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: 
                    presets: ['es2015', 'react', 'stage-0'],
                    plugins: ['add-module-exports']
                
            ,
            
                include: /\.json$/, loaders: ['json-loader']
            ,
            
                test: /\.scss$/,
                loaders: ['style', 'css?modules', 'sass']
            ,
            
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file?name=fonts/[name].[ext]'
            
        ]
    ,
    plugins: [
        new webpack.ProvidePlugin(
            'Promise': 'exports?module.exports.Promise!es6-promise',
            'fetch': 'imports?self=>global!exports?global.fetch!isomorphic-fetch'
        ),
        new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.DedupePlugin(),
        new webpack.DefinePlugin(
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        )
    ],
    resolve: 
        root: path.resolve('./src')
    ,
    devServer: 
        contentBase: 'src'
    
;

所以基本上你会希望在终端中得到这个输出：

webpack result is served from / - 告诉我们，我们构建的任何东西都将位于根目录 content is served from src - 告诉我们它是从那个目录构建的

希望对你有帮助

【讨论】：

我在您发布答案前几秒钟就解决了它，因为您的答案是最接近的人，我将授予最佳答案。破坏我项目中所有内容的行是将config.output.publicPath 设置为一个目录，而我应该将它设置为/ 或根本不设置它。感谢您为 Josh 所做的一切努力！

啊，好吧！是的，我最终在我的配置中省略了它。很好的发现。没问题！总是很高兴排除故障和学习新事物。编码愉快。