Webpack not loading output files in localhost even after compiling successfully
Question
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>
1 answers
solution1
1 ACCPTED 2019-03-26 14:27:08
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 !
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.