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

Question

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

javascriptnode.jswebpackwebpack-dev-server

3

编辑：这个例子托管在Github仓库上，如果有人想要运行它，请点击链接

我遇到了和另一个用户几乎完全相同的问题（你可以在这里找到该问题：链接），即运行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错误未找到，如下所示：

- sgarcia.dev

你是如何在终端中运行开发服务器的？ - technicallyjosh

webpack-dev-server --colors --progress - sgarcia.dev

1

publicPath 不应该是一个文件系统路径。 - robertklep

刚刚意识到在运行开发服务器之前需要编译。:P @sgarcia 我认为在编译后运行webpack-dev-server是没有意义的。开发服务器的目的是从源代码提供内容并在您更改文件时即时重新编译。如果您想要一个稳定的编译包服务，可以使用express、koa甚至nginx来提供输出的静态内容文件夹。 - technicallyjosh

1

@sgarcia，抱歉我的错误。我正在将你的配置与我的进行比较。 - technicallyjosh

显示剩余4条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- technicallyjosh · Accepted Answer

好的，我能够在我的项目中重现你遇到的问题。为了解决这个问题，我做了一些更改。

以下是我设置的内容。我在输出中定义了一些较少的内容，并使用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 - 告诉我们它正在从该目录构建

希望这能够帮助你。