web-dev-qa-db-ja.com

bundle.jsが見つかりません

私はこの質問が以前に尋ねられたことを知っていますが、私は正直にどこにも答えを見つけることができません-バンドルが作成されていませんが、私はすべきことをすべてやっているかのように見えます。だから私はこれを持っている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'
    },
};

もう1つの奇妙なことは、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にかなり慣れていないので、どんな助けも素晴らしいでしょう！

javascriptreactjstypescriptwebpack
12
Jay

これは、webpack-dev-serverがbundle.jsをメモリから提供しているためです。これはbundle.jsを高速に提供するために行われます。 bundle.jsをディスクに吐き出す生産用の別のwebpack構成を追加できます。

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です。

16
David

出力を次のように変更する必要があると思います。

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