webpack bundle.js pas trouvé
- Je utiliser webpack serveur de dev, mais ne peut pas accéder à mon bundle.js
fichier.
Edit: je suis en utilisant cette webpack config sans bower-webpack-plugin.
paquet.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>
sortie de la console
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.
Quand je lance le serveur de dev, je reçois 404 not Found http://localhost:8090/assets/bundle.js
OriginalL'auteur Matt | 2015-11-03
Vous devez vous connecter pour publier un commentaire.
Selon votre
package.json
vous utilisez la nouvelle babel 6 libération. Cependant, vous n'avez pas toutes les dépendances nécessaires pour cette nouvelle version. Selon babel-chargeur vous devez installerbabel-preset-es2015
trop:Que vous êtes également à l'aide de Réagir, vous avez besoin de réagir prédéfini pour être installé aussi. Donc installer les deux:
De créer un fichier dans votre dossier de package appelé
.babelrc
de garder le babel configuration et activer les deux présélections:.babelrc
Puis exécutez de nouveau le serveur:
Puis http://localhost:8090/assets/bundle.js devrait montrer que les suites module.
Mon diagnostic:
Vous ne pouvez pas obtenir la
bundle.js
parce que votrenpm run dev
jette quelques erreurs en essayant d'appliquer le chargeur de babel, car il n'est pas correctement configuré. Ensuite, lorsque vous essayez de demander labundle.js
fichier vous obtenez une erreur 404 car il n'a pas été généré.Vérifier la mise à jour de réponse. Avec la nouvelle Babel 6, vous devez configurer vos paramètres prédéfinis.
Merci, ça fonctionne 🙂
OriginalL'auteur dreyescat
J'allais essayer de modifier votre script chemin dans index.html fichier:
webpack result is served from http://localhost:8090/assets
OriginalL'auteur Pavel Golovan
Le problème la plupart du temps avec de pointage de faisceau de js dans index.html. La raison webpack bundle.js pas trouvé, parce que vous devez spécifier le chemin d'accès absolu dans index.html. Dire supposons que votre bundle.js et index.html est généré sous dist dossier, alors il devrait être quelque chose comme ci-dessous
OriginalL'auteur Hemadri Dasari