Webpack-dev-server compiles files but does not refresh or make compiled javascript available to browser

Webpack-dev-server compiles files but does not refresh or make compiled javascript available to browser

Asked on November 19, 2018 in vue.js.
Add Comment


  • 2 Answer(s)

    Complications are caused by two items:

    module.exports = {                                              
        entry: './src/index.js',
        output: {
     
            // For some reason, the `__dirname` was not evaluating and `/public` was
            // trying to write files to a `public` folder at the root of my HD.
            path: __dirname + '/public',
     
            // Public path refers to the location from the _browser's_ perspective, so
            // `/public' would be referring to `mydomain.com/public/` instead of just
            // `mydomain.com`.
            publicPath: '/public',
            filename: 'bundle.js'
        },
        devtool: 'source-map',
        devServer:{
     
            // `contentBase` specifies what folder to server relative to the
            // current directory. This technically isn't false since it's an absolute
            // path, but the use of `__dirname` isn't necessary.
            contentBase: __dirname + '/public'
        },
        module:{
            loaders:[
                { test: /\.vue$/, loader: 'vue'}
            ]
        }
    };
    

    Let us look at this webpack.config.js as below:

    var path = require('path');
     
    module.exports = {
        entry: [
            './src/PlaceMapper/index.js'
        ],
        output:{
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'public/')
        },
        devtool: 'source-map',
        devServer:{
            contentBase: 'public'
        },
        module:{
            loaders:[
                { test: /\.vue$/, loader: 'vue'}
            ]
        }
    };
    
    Answered on November 19, 2018.
    Add Comment

    The answer for this problem is that output path isn’t organized properly.

    Solution for this configuration:

    const path = require('path');
     
    module.exports = {
      "entry": ['./app/index.js'],
      "output": {
        path: path.join(__dirname, 'build'),
        publicPath: "/build/",
        "filename": "bundle.js"
      }
    
    Answered on November 19, 2018.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.