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: ' }, 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> <!-- 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=""></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=""></script> </body> </html> console output
and:react_modules and$ npm run start > react_modules@1.0.0 start /Users/and/devel/react_modules > npm run serve | npm run dev > react_modules@1.0.0 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 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
4 Answers
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:
.babelrc
{ "presets": ["es2015", "react"] } And then run the server again:
npm run dev Then 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.
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= This worked for me.
I'd try to change your script path in index.html file to:
<script type="text/javascript" src="bundle.js"></script> 
