CODEWITHSUNDEEP
reactjswebpackbabeljs
SHIKHAR SINGH
SHIKHAR SINGH

Reputation: 439

Webpack not loading output files in localhost even after compiling successfully

Below is my piece of code for webpack: 

module.exports = env => {
return {
    entry: './src/index.js',
    devtool: "inline-source-map",
    output: {
        path: path.join(__dirname, 'src'),
        filename: 'index.html',
        publicPath: path.join(__dirname, 'src'),
    },
    optimization: {
        runtimeChunk: 'single',
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all'
                }
            }
        }
    },
    node: {
        fs: "empty"
    },
    devServer: {
        compress: true,
        inline: true,
        contentBase: './',
        port: '8080',
        disableHostCheck: true
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    query: {
                        presets: ["@babel/preset-env", "@babel/preset-react"]
                    }
                },

            },
            {
                test: /\.s?css$/,
                loaders: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file-loader?name=assets/[name].[hash].[ext]'
            }
        ]
    },
    resolve: {
        extensions: ['.js','.jsx']
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new webpack.optimize.AggressiveMergingPlugin(),
        new webpack.HashedModuleIdsPlugin(),

    ]
}
}

Also here is my package.json : 

"dependencies": {
"@reactioncommerce/components": "^0.65.1",
"@reactioncommerce/components-context": "^1.2.0",
"prop-types": "^15.7.2",
"react": "^16.8.5",
"react-dom": "^16.8.5",
"react-scripts": "2.1.8",
"reacto-form": "0.0.2",
"styled-components": "^3.4.10"


 },
  "scripts": {
    "start": "webpack --mode development --open --hot",
    "build": "webpack --mode production",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@babel/preset-env": "^7.4.2",
    "react-router-dom": "^5.0.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0"
  }

THe problem here is that the code compiles correctly and shows no error at all , but doesn't show the line : output is served from localhost:8080 And hence I don't know wether it is actually running or not.But I guess there is some issue with output path or something.Can somebody please point me in the right direction here. Thanks in advance.

Edit : 

<html>
<head>
    <meta charset="utf-8">
    <title>React.js using NPM, Babel6 and Webpack</title>
</head>
<body>
<div id="app" />

</body>
</html>

Upvotes: 2

Views: 3311

Answers (1)

Nino Filiu
Nino Filiu

Reputation: 18493

The issue is that your input and output are the same. entry should be the path to your(s) entry in your source code, it's your input. output defines options as to where your bundled file will be saved. These are two different files! You write your source code, then you build it into your bundle.

What is recommended is to have /src for your source code and /dist for your product code. Your directory should look like:

/src
  /index.js
  /index.html
  ... rest of your source code
/dist
  /bundle.js <-- will be generated by webpack

To have this, your webpack config object must look like:

{
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    // ...
  },
  // ...
}

Also, your index.html must reference the bundled file, but don't worry - that is being taken care of by html-webpack-module! Simply don't link any script in /src/index.html!

Upvotes: 1

Related Questions