Menu
I use webpack dev server, but can't access my bundle.js file.
Edit: I am using this webpack config without bower-webpack-plugin.
package.json
{
"name": "react_modules",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "npm run serve | npm run dev",
"serve": "./node_modules/.bin/http-server -p 8080",
"dev": "webpack-dev-server -d --progress --colors --port 8090"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.0.20",
"babel-loader": "^6.0.1",
"babel-preset-es2015": "^6.0.15",
"bootstrap": "^3.3.5",
"bower-webpack-plugin": "^0.1.9",
"css-loader": "^0.21.0",
"events": "^1.1.0",
"extract-text-webpack-plugin": "^0.9.0",
"file-loader": "^0.8.4",
"history": "^1.13.0",
"http-server": "^0.8.5",
"jquery": "^2.1.4",
"jquery-ui": "^1.10.5",
"json-markup": "^0.1.6",
"jsx-loader": "^0.13.2",
"less": "^2.5.3",
"less-loader": "^2.2.1",
"lodash": "^3.10.1",
"node-sass": "^3.4.1",
"object-assign": "^4.0.1",
"path": "^0.12.7",
"react": "^0.14.2",
"react-dom": "^0.14.2",
"react-hot-loader": "^1.3.0",
"react-router": "^1.0.0-rc4",
"sass-loader": "^3.1.1",
"style-loader": "^0.13.0",
"svg-sprite-loader": "0.0.11",
"url-loader": "^0.5.6",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.12.1"
}
}
webpack.config.js
const BowerWebpackPlugin = require("bower-webpack-plugin");
module.exports = {
entry: './src/index.jsx',
output: {
filename: 'bundle.js',
sourceMapFilename: "[file].map",
publicPath: 'http://localhost:8090/assets'
},
debug: true,
devtool: 'inline-source-map',
module: {
loaders: [
{
test: /\.js[x]?$/,
loaders: ['react-hot', 'babel'],
exclude: /node_modules/
},
{
test: /\.scss$/,
loaders: [ 'style', 'css?sourceMap', 'sass?sourceMap' ]
},
{
test: /\.less$/,
loaders: [ 'style', 'css?sourceMap', 'less?sourceMap' ]
},
{
test: /\.css$/,
loaders: [ 'style', 'css']
},
{ test: /\.woff$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.woff2$/, loader: "url-loader?limit=10000&mimetype=application/font-woff2" },
{ test: /\.(eot|ttf|svg|gif|png)$/, loader: "file-loader" }
]
},
plugins: [
new BowerWebpackPlugin()
],
resolve: {
extensions: ['', '.js', '.jsx']
}
};
index.html
<!DOCTYPE html>
<html>
<head>
<title>App</title>
</head>
<body>
<div id="content">
<!-- this is where the root react component will get rendered -->
</div>
<!-- include the webpack-dev-server script so our scripts get reloaded when we make a change -->
<!-- we'll run the webpack dev server on port 8090, so make sure it is correct -->
<script src="http://localhost:8090/webpack-dev-server.js"></script>
<!-- include the bundle that contains all our scripts, produced by webpack -->
<!-- the bundle is served by the webpack-dev-server, so serve it also from localhost:8090 -->
<script type="text/javascript" src="http://localhost:8090/assets/bundle.js"></script>
</body>
</html>
console output
and:react_modules and$ npm run start
> [email protected] start /Users/and/devel/react_modules
> npm run serve | npm run dev
> [email protected] dev /Users/and/devel/react_modules
> webpack-dev-server -d --progress --colors --port 8090
0% compilehttp://localhost:8090/webpack-dev-server/
webpack result is served from http://localhost:8090/assets
content is served from /Users/and/devel/react_modules
Hash: dd2f28f3fef16a34048b
Version: webpack 1.12.2
Time: 612ms
ERROR in ./src/index.jsx
Module build failed: SyntaxError: /Users/and/devel/react_modules/src/index.jsx: Unexpected token (5:2)
3 |
4 | ReactDOM.render(
> 5 | <h1>Hello, world!</h1>,
| ^
6 | document.getElementById('content')
7 | );
8 |
at Parser.pp.raise (/Users/and/devel/react_modules/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:24:13)
at Parser.pp.unexpected (/Users/and/devel/react_modules/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:91:8)
at Parser.pp.parseExprAtom (/Users/and/devel/react_modules/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:507:12)
at Parser.pp.parseExprSubscripts (/Users/and/devel/react_modules/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:260:19)
at Parser.pp.parseMaybeUnary (/Users/and/devel/react_modules/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:240:19)
at Parser.pp.parseExprOps (/Users/and/devel/react_modules/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:171:19)
at Parser.pp.parseMaybeConditional (/Users/and/devel/react_modules/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:153:19)
at Parser.pp.parseMaybeAssign (/Users/and/devel/react_modules/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:120:19)
at Parser.pp.parseExprListItem (/Users/and/devel/react_modules/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:966:16)
at Parser.pp.parseCallExpressionArguments (/Users/and/devel/react_modules/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:336:20)
webpack: bundle is now VALID.
When I run dev server, I get 404 Not Found http://localhost:8090/assets/bundle.js
867
According to your package.json you are using the new babel 6 release. However you don't have all the required dependencies for this new release. According to babel-loader you need to install babel-preset-es2015 too:
npm install babel-loader babel-core babel-preset-es2015 --save-dev
As you are also using React, you need the react preset to be installed too. So install both:
npm install --save-dev babel-preset-es2015 babel-preset-react
Create a file in your package folder called .babelrc to keep the babel configuration and enable both presets:
{
"presets": ["es2015", "react"]
}
And then run the server again:
npm run dev
Then http://localhost:8090/assets/bundle.js should show the bundled module.
My diagnosis:
You cannot get the the bundle.js because your npm run dev throws some errors trying to apply the babel loader because it is not properly configured. Then, when you try to request the bundle.js file you get a 404 error because it has not been generated.
127
The problem mostly with pointing bundle js in index.html. The reason webpack bundle.js not found because you need to specify absolute path in index.html. Say suppose your bundle.js and index.html is generated under dist folder then it should be something like below
<script src="/bundle.js"></script>
Specify the home page In .env file
PUBLIC_URL=https://example.com
This worked for me.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
