sgarcia sgarcia - 4 months ago 71
Node.js Question

webpack-dev-server watches and compiles files correctly, but browser can't access them

EDIT: Link to github repo where this example is hosted is here in case someone wants to run it




I'm getting the near exact same problem as another user (you can find the question here), in that running the webpack-dev-server does actually compile and watch files correctly (seeing the console output in the terminal), but the browser still can't view my site correctly. This is my webpack.config.js file:

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;


And this is my directory structure:

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


Currently, running
webpack-dev-server
outputs the following in the browser (note the lack of the
public/
directory which is where webpack normally outputs my html and javascript bundle):

Image 1

enter image description here




EDIT: Adding the devServer.contentBase property and setting it to
public
gets the browser to return a 403 error not found as shown here:

enter image description here

Answer

Okay, so I was able to reproduce the issue that you have on my project. To fix the issue I changed some things.

Here is what I have set up. I'm defining a bit less in the output and using jsx instead of js, but the results should be the same. You can replace my src with wherever your source code is.

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'
    }
};

So basically you would want this output in terminal:

terminal example

  • webpack result is served from / - tells us that whatever we build from will be at the root
  • content is served from src - tells us that it's building from that directory

Hope this helps