找不到 bundle.js

Posted 2023-03-13

【中文标题】找不到 bundle.js

【英文标题】：Can't find bundle.js

【发布时间】：2016-12-27 05:40:45

【问题描述】：

我知道以前有人问过这个问题，但老实说，我在任何地方都找不到答案——看起来好像我正在做我应该做的一切，但没有创建捆绑包。所以我有这个webpack.config.js 文件，它应该处理 HMR + React 和 typescript（使用 tsx 语法），但它没有创建包。编译时不会抛出任何错误，并且似乎做得很好，但是当我尝试获取它时，捆绑包返回 404。这是我的文件结构：

someApp/
  src/
    index.tsx
    components/
      Hello.tsx
  dist/
  webpack.config.js
  ...

这是我的 webpack 配置：

var path = require('path')
var webpack = require('webpack')

module.exports = 
    entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        './src/index.tsx'
    ],
    output: 
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js',
        publicPath: '/public/'
    ,

    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],

    devtool: 'eval',

    resolve: 
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
    ,

    module: 
        loaders: [
            
                test: /\.tsx?$/,
                loaders: [
          'react-hot-loader',
          'ts-loader'
        ],
        include: path.join(__dirname, '/src')
            
        ],

        preLoaders: [
             test: /\.js$/, loader: 'source-map-loader' 
        ]
    ,
    externals: 
        'react': 'React',
        'react-dom': 'ReactDOM'
    ,
;

另一个奇怪的事情是，我认为它可能与通过节点执行它有关，因为当我自己运行 webpack 时，它会编译捆绑包。这是我启动服务器的代码：

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(webpack(config), 
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true
).listen(3000, 'localhost', function (err, result) 
  if (err) 
    return console.log(err)
  

  console.log('Listening at http://localhost:3000/')

)

也许我遗漏了一些东西，但我对 webpack 还很陌生，所以任何帮助都会很棒！

【参考方案1】：

我认为您需要将输出更改为：

output: 
    path: path.join(__dirname, '/dist'), // <- change last argument
    filename: 'bundle.js',
    publicPath: '/public/'
,

【讨论】：

你是个野兽，谢谢老兄！这太完美了，我总是忘记 path.join 必须有前缀 /。

啊等等，很抱歉，我想我的 dist 文件夹中有一个陈旧的包。我认为你是对的，这也是一个问题，但遗憾的是它没有解决我在请求 localhost:3000/dist/bundle.js 时得到的 404@

我也总是将入口点作为一个数组： entry: [ './src/index.tsx' ],

是的，我也有我的数组。虽然我两种方式都做过，而且它们在过去都有效

你说得对，没关系。您可能想尝试的另一件事是将路径添加到此： include: path.join(__dirname, '/src')

【参考方案2】：

那是因为 webpack-dev-server 从内存中提供 bundle.js。这样做是为了让 bundle.js 服务更快。你可以为生产添加另一个 webpack 配置，将 bundle.js 输出到磁盘

module.exports = 
    entry: './src/index.tsx',
    output: 
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/public/'
    ,
.
.
.

以及所有其他模块，只是不要包含您的开发服务器

如果你想像 localhost:3000//..../bundle.js 那样获取 bundle.js

试试这个

var path = require('path')
var webpack = require('webpack')

module.exports = 
    entry:'./src/index.tsx',
    output: 
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/public/'
    ,

    //plugins: [
      //  new webpack.HotModuleReplacementPlugin()
    //],

    devtool: 'eval',

    resolve: 
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
    ,

    module: 
        loaders: [
            
                test: /\.tsx?$/,
                loaders: [
          'react-hot-loader',
          'ts-loader'
        ],
        include: path.join(__dirname, 'src')
            
        ],

        preLoaders: [
             test: /\.js$/, loader: 'source-map-loader' 
        ]
    ,
    externals: 
        'react': 'React',
        'react-dom': 'ReactDOM'
    ,
;

编辑：如果你想获取 bundle.js

您必须使用 publicPath 中定义的内容：'/public/'。所以对你来说，你可以从中获取 bundle.js 的 url 是 localhost:3000/public/bundle.js

【讨论】：

谢谢大卫！虽然它从磁盘提供服务非常棒，但捆绑文件无法从localhost:3000/dist/bundle.js 获得。您是否从我的配置文件中看到了这种情况的任何原因？也许我只是对我应该从哪个路径请求该捆绑包感到困惑

你没有做错任何事，但是 webpack-dev-server 从内存中提供 bundle.js，我认为没有办法改变它，你可以做的是添加另一个 webpack。输出到磁盘的 config.js 文件，如果你不包含 'webpack-dev-server/client?localhost:3000', 'webpack/hot/only-dev-server'，它将输出到磁盘

感谢您解释大卫！我想你误解了我，虽然我知道开发服务器从内存中提供 bundle.js，但我不应该能够请求 localhost:3000/dist/bundle.js 并接收它吗？我知道它不会在 dist 文件夹中，因为它不会写入磁盘，但我应该可以请求它，不是吗？

另外，我尝试删除引用 webpack dev server 和 hot reload only dev server 的那两行，通过我的节点脚本运行时它仍然没有写入磁盘

localhost:3000/dist/bundle.js 你不能像那样从内存中获取 bundle.js，但是看看我的代码，我刚刚发布的工作