web-dev-qa-db-fra.com

Impossible de trouver bundle.js

Je sais que cette question a déjà été posée, mais honnêtement, je ne trouve la réponse nulle part - il semble que je fais tout ce que je dois, mais le bundle n'est pas créé. J'ai donc ce webpack.config.js fichier censé gérer HMR + React et TypeScript (avec la syntaxe tsx), mais il ne crée pas le bundle. Ne jette aucune erreur lors de la compilation et semble bien se passer, mais le paquet renvoie un 404 lorsque j'essaye de le récupérer. Voici ma structure de fichiers:

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

Et voici ma configuration 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'
    },
};

Une autre chose étrange est que je pense que cela pourrait avoir quelque chose à voir avec l'exécution de cela via le nœud, car lorsque je lance simplement webpack par lui-même, il compile le bundle. Voici mon code pour démarrer le serveur:

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/')

})

Peut-être que je manque quelque chose, mais je suis assez nouveau dans le webpack, donc toute aide serait incroyable!

javascriptreactjstypescriptwebpack
12
Jay

C'est parce que webpack-dev-server sert bundle.js à partir de la mémoire. Ceci est fait pour rendre le service bundle.js rapide. Vous pouvez ajouter une autre configuration de webpack pour la production qui crache bundle.js sur le disque

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

et tous vos autres modules, n'incluez simplement pas votre serveur de développement

si vous voulez récupérer bundle.js comme localhost: 3000 //..../ bundle.js

essaye ça

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'
    },
};

EDIT: si vous souhaitez récupérer bundle.js

vous devez utiliser ce qui est défini dans le publicPath: '/ public /'. donc pour vous l'url que vous pouvez récupérer bundle.js est cet localhost: 3000/public/bundle.js

16
David

Je pense que vous devez changer votre sortie en ceci:

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