我使用webpack dev服务器，但无法访问我的bundle.js文件。
编辑：我在没有 bower-webpack-plugin 的情况下使用this webpack config。
的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>
控制台输出
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 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.
当我运行dev服务器时，我得到404 Not Found http://localhost:8090/assets/bundle.js
答案 0 :(得分：7)
根据您package.json您正在使用的新babel 6版本。但是，您不具备此新版本所需的所有依赖项。根据{{3}}，您还需要安装babel-preset-es2015：
npm install babel-loader babel-core babel-preset-es2015 --save-dev
由于您还在使用React，因此您还需要安装react预设。所以安装两个：
npm install --save-dev babel-preset-es2015 babel-preset-react
在名为.babelrc的包文件夹中创建一个文件，以保留babel-loader并启用这两个预设：
{
"presets": ["es2015", "react"]
}
然后再次运行服务器：
npm run dev
然后babel configuration应该显示捆绑的模块。
我的诊断：
你无法获得bundle.js，因为你的npm run dev在尝试应用babel加载程序时会抛出一些错误，因为它没有正确配置。然后，当您尝试请求bundle.js文件时，您会收到404错误，因为尚未生成。
答案 1 :(得分：1)
在.env文件中指定主页
PUBLIC_URL=https://example.com
这对我有用。
答案 2 :(得分：0)
我尝试将index.html文件中的脚本路径更改为：
<script type="text/javascript" src="bundle.js"></script>
答案 3 :(得分：0)
问题主要是指向index.html中的bundle js。找不到webpack bundle.js的原因，因为您需要在index.html中指定绝对路径。假设您的bundle.js和index.html是在dist文件夹下生成的，则应该像下面这样
<script src="/bundle.js"></script>