找不到 webpack bundle.js [英] webpack bundle.js not found

查看：44
本文介绍了找不到 webpack bundle.js的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用 webpack 开发服务器，但无法访问我的 bundle.js 文件.

我正在使用 这个 webpack 配置 没有 bower-webpack-plugin.

package.json

<代码>{"name": "react_modules","版本": "1.0.0",描述": ""，"main": "index.js",脚本":{"start": "npm run serve | npm run dev","服务": "./node_modules/.bin/http-server -p 8080","dev": "webpack-dev-server -d --progress --colors --port 8090"},作者": ""，"license": "ISC",开发依赖":{"babel-core": "^6.0.20","babel-loader": "^6.0.1","babel-preset-es2015": "^6.0.15","引导程序": "^3.3.5","bower-webpack-plugin": "^0.1.9","css-loader": "^0.21.0",事件":^1.1.0"，"extract-text-webpack-plugin": "^0.9.0","文件加载器": "^0.8.4","历史": "^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","少": "^2.5.3","less-loader": "^2.2.1","lodash": "^3.10.1","node-sass": "^3.4.1","object-assign": "^4.0.1","路径": "^0.12.7",反应":^0.14.2"，"react-dom": "^0.14.2","react-hot-loader": "^1.3.0",反应路由器":^ 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");模块.出口 = {条目:'./src/index.jsx'，输出: {文件名:'bundle.js',sourceMapFilename: "[文件].map",publicPath: 'http://localhost:8090/assets'},调试:真的，开发工具:'内联源映射'，模块: {装载机: [{测试:/\.js[x]?$/,加载器:['react-hot', 'babel'],排除:/node_modules/},{测试:/\.scss$/,加载器:['style', 'css?sourceMap', 'sass?sourceMap']},{测试:/\.less$/,加载器:['style', 'css?sourceMap', 'less?sourceMap']},{测试:/\.css$/,加载器:['样式'，'css']},{ test:/\.woff$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },{ test:/\.woff2$/, loader: "url-loader?limit=10000&mimetype=application/font-woff2" },{ 测试:/\.(eot|ttf|svg|gif|png)$/，加载器:文件加载器"}]},插件: [新的 BowerWebpackPlugin()],解决: {扩展名:['', '.js', '.jsx']}};

index.html

<头><title>应用</title><身体><div id="内容"><!-- 这是根 react 组件将被渲染的地方 -->

<!-- 包含 webpack-dev-server 脚本，以便我们的脚本在我们进行更改时重新加载 --><!-- 我们将在端口 8090 上运行 webpack 开发服务器，因此请确保它是正确的 --><script src="http://localhost:8090/webpack-dev-server.js"></script><!-- 包括包含我们所有脚本的包，由 webpack 生成--><!-- bundle 由 webpack-dev-server 提供，所以也从 localhost:8090 提供它 --><script type="text/javascript" src="http://localhost:8090/assets/bundle.js"></script></html>

控制台输出

and:react_modules and$ npm run start>react_modules@1.0.0 start/Users/and/devel/react_modules>npm 运行服务 |npm 运行开发>react_modules@1.0.0 dev/Users/and/devel/react_modules>webpack-dev-server -d --progress --colors --port 80900% 编译 http://localhost:8090/webpack-dev-server/webpack 结果来自 http://localhost:8090/assets内容来自/Users/and/devel/react_modules哈希:dd2f28f3fef16a34048b版本:webpack 1.12.2时间:612ms./src/index.jsx 中的错误模块构建失败:SyntaxError:/Users/and/devel/react_modules/src/index.jsx: Unexpected token (5:2)3 |4 |ReactDOM.render(>5 |<h1>你好，世界！</h1>,|^6 |document.getElementById('内容')7 |);8 |在 Parser.pp.raise (/Users/and/devel/react_modules/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:24:13)在 Parser.pp.unexpected (/Users/and/devel/react_modules/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:91:8)在 Parser.pp.parseExprAtom (/Users/and/devel/react_modules/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:507:12)在 Parser.pp.parseExprSubscripts (/Users/and/devel/react_modules/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:260:19)在 Parser.pp.parseMaybeUnary (/Users/and/devel/react_modules/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:240:19)在 Parser.pp.parseExprOps (/Users/and/devel/react_modules/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:171:19)在 Parser.pp.parseMaybeConditional (/Users/and/devel/react_modules/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:153:19)在 Parser.pp.parseMaybeAssign (/Users/and/devel/react_modules/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:120:19)在 Parser.pp.parseExprListItem (/Users/and/devel/react_modules/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:966:16)在 Parser.pp.parseCallExpressionArguments (/Users/and/devel/react_modules/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:336:20)webpack:包现在有效.

当我运行开发服务器时，我得到 404 Not Found http://localhost:8090/assets/bundle.js

解决方案

根据你的 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 配置 并启用两个预设:

.babelrc

<代码>{预设":[es2015"，反应"]}

然后再次运行服务器:

npm run dev

然后 http://localhost:8090/assets/bundle.js 应该显示捆绑的模块.

我的诊断:

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

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

> 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.

When I run dev server, I get 404 Not Found http://localhost:8090/assets/bundle.js

解决方案

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 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.

这篇关于找不到 webpack bundle.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆