找不到bundle.js

Question

我知道之前已经问过这个问题,但老实说,我无法在任何地方找到答案 - 看起来好像我正在做我应该做的一切但是没有创建捆绑.所以我有这个webpack.config.js文件应该处理HMR + React和typescript(使用tsx语法),但它不是创建包.编译时没有错误,似乎没有问题,但是当我尝试获取它时,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'
    },
};

另一个奇怪的事情是,我认为这可能与通过节点执行此操作有关,因为当我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很新,​​所以任何帮助都会很棒!

Answer 1

那是因为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 /'.所以你可以从这个localhost:3000/public/bundle.js获取你可以获取bundle.js的url