webpack-dev-server监视并正确编译文件，但浏览器无法访问它们
编辑 ：链接到Github回购在这个例子是托pipe在这里以防万一有人想运行它
我得到了与另一个用户几乎完全相同的问题（你可以在这里find问题），在运行webpack-dev-server实际上编译和正确观察文件（看terminal输出控制台），但浏览器仍然无法正确查看我的网站。 这是我的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在浏览器中输出以下内容（注意缺lesspublic/目录，这是webpack通常输出html和javascript包的地方）：
编辑 ：添加devServer.contentBase属性并将其设置为public获取浏览器返回403错误找不到如下所示：
好的，所以我能够重现你在我的项目上的问题。 为了解决这个问题，我改变了一些东西。
这是我设立的。 我在输出中定义了less一些，使用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' } };
所以基本上你会想在terminal输出：
-
webpack result is served from /告诉我们，无论我们build立的将是根 -
content is served from src– 告诉我们它是从那个目录build立的
希望这可以帮助