logo标签列表

webpack打包文件bundle.js未找到。

webpackwebpack-dev-server
8
我使用webpack开发服务器，但无法访问我的bundle.js文件。
编辑：我正在使用此webpack配置，但没有使用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>

控制台输出

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.

当我运行开发服务器时，我得到了404未找到错误http://localhost:8090/assets/bundle.js。
5个回答
8
根据您的package.json文件，您正在使用新的babel 6版本。然而，您没有安装此新版本所需的所有依赖项。根据babel-loader，您还需要安装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配置并启用两个预设：
{
  "presets": ["es2015", "react"]
}

然后再次运行服务器：

npm run dev

然后http://localhost:8090/assets/bundle.js应该显示已打包的模块。

我的诊断：

您无法获取bundle.js，因为您的npm run dev在尝试应用babel加载器时会引发一些错误，因为它没有正确配置。然后，当您尝试请求bundle.js文件时，会出现404错误，因为它尚未生成。

谢谢回复。我安装了babel-preset-es2015，但是没有帮助（bundle.js仍然找不到）。请查看我的编辑过的package.json。 - Matt
@Matt 请检查更新后的答案。在新的Babel 6中，您需要设置您的预设。 - dreyescat
1

在index.html中指定bundle.js的路径通常会出现问题。Webpack bundle.js未找到的原因是您需要在index.html中指定绝对路径。例如，假设您的bundle.js和index.html生成在dist文件夹下，则应该像下面这样：

<script src="/bundle.js"></script>
1
在 .env 文件中指定首页。
PUBLIC_URL=https://example.com

这对我有用。
0

我建议您尝试更改index.html文件中的脚本路径为：

<script type="text/javascript" src="bundle.js"></script>
我尝试过了，但没有帮助。顺便提一下，在控制台里的消息是 webpack result is served from http://localhost:8090/assets。 - Matt
0

因为它不是bundle.js，而是bundled.js，至少这对我来说是解决了问题的方法：

<script type="text/javascript" src="/bundled.js"></script>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接