找不到bundle.js文件

Question

找不到bundle.js文件

14

我知道这个问题以前已经被问过了，但是我实在找不到答案——似乎我做了所有应该做的事情，但是bundle没有创建。所以我有一个webpack.config.js文件，应该处理HMR + React和typescript（使用tsx语法），但它没有创建bundle。编译时没有出现任何错误，看起来一切都很好，但是当我尝试获取它时，bundle返回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'
    },
};

还有一件奇怪的事情，我认为这可能与通过Node执行有关，因为当我只运行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还很陌生，所以任何帮助都将不胜感激！

- Jay

2个回答

4

我认为你需要将输出更改为以下内容：

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

- alex

你太厉害了，谢谢！这太完美了，我总是忘记 path.join 必须要有前缀“/”。 - Jay

哦，等一下，非常抱歉，我想我的 dist 文件夹里有一个过时的 bundle。我认为你是对的，这也是一个问题，但不幸的是它没有修复 localhost:3000/dist/bundle.js 请求时得到的 404 错误。 - Jay

是的，我也将我的设为一个数组。虽然我已经两种方式都尝试过，它们在过去都起作用了。 - Jay

你说得对，这应该没有关系。你可能想尝试的另一件事是将路径添加到这个位置：include: path.join(__dirname, '/src')。 - alex

{btsdaf} - alex

显示剩余4条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David · Accepted Answer

这是因为 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，请导入除了 dev-server 以外的所有模块。

尝试这个方法。

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/'。因此，对于你来说，可以从以下URL获取bundle.js: localhost:3000/public/bundle.js