web-dev-qa-db-fra.com

Comment ajouter un mappage générique dans l'entrée du webpack

J'ai besoin de Webpack tout le fichier js dans le dossier de script.J'ai essayé

module.exports = {
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ["babel-loader"],
      }
    ],
  },
  entry: "./src/scripts/*.js",
  output: {
    path: './src/build',
    filename: '[name].js'
  }
};

Je reçois une erreur comme celle-ci,

ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./s
rc/scripts/* in E:\Web project\ReactJS\react-tutorial
resolve file
  E:\Web project\ReactJS\react-tutorial\src\scripts\* doesn't exist
  E:\Web project\ReactJS\react-tutorial\src\scripts\*.webpack.js doesn't exist
  E:\Web project\ReactJS\react-tutorial\src\scripts\*.web.js doesn't exist
  E:\Web project\ReactJS\react-tutorial\src\scripts\*.js doesn't exist
  E:\Web project\ReactJS\react-tutorial\src\scripts\*.json doesn't exist
resolve directory
  E:\Web project\ReactJS\react-tutorial\src\scripts\* doesn't exist (directory d
efault file)
  E:\Web project\ReactJS\react-tutorial\src\scripts\*\package.json doesn't exist
 (directory description file)

Il ne cherche pas tout le fichier js mais il recherche * .js comme celui-ci. Aidez-moi à comprendre ce que j'ai oublié

node.jswebpack
42
Praveen Raj

La valeur entry doit être résolue en un fichier spécifique ou en une liste de fichiers spécifiques.

Depuis le webpack docs :

Si vous passez une chaîne: La chaîne est résolue en un module chargé au démarrage.

Si vous passez un tableau: Tous les modules sont chargés au démarrage. Le dernier est exporté.

Si vous essayez simplement de définir un module, modifiez votre valeur entry pour qu'elle pointe vers votre fichier d'application principal, puis utilisez-en d'autres modules.

Si vous voulez vraiment regrouper tous les fichiers d'un répertoire, voir arseniews answer

10
duncanhall

Avoir un ou plusieurs points d'entrée devrait suffire dans la plupart des cas d'utilisation, mais si vous voulez vraiment vouloir regrouper tous les fichiers du répertoire, vous pouvez utiliser ce qui suit:

Comme expliqué ici: https://github.com/webpack/webpack/issues/37

var glob = require("glob");
// ...
entry: glob.sync("./src/scripts/*.js")
76
arseniew

Webpack attend une liste de fichiers pour la configuration entry, pas un motif global .

Vous devrez lister les fichiers manuellement ou automatiquement avec cet extrait de code

var fs = require('fs'),
    entries = fs.readdirSync('./src/scripts/').filter(function(file) {
        return file.match(/.*\.js$/);
    });

puis passez-le à la configuration de webpack.

14
kombucha

J'ai eu quelques problèmes avec les chemins de fichiers dans Webpack 2.4.1, donc fait ceci. Outre plusieurs entrées, cela crée également plusieurs fichiers .html.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const fs = require('fs');

function getEntries (){
    return fs.readdirSync('./src/pages/')
        .filter(
            (file) => file.match(/.*\.js$/)
        )
        .map((file) => {
            return {
                name: file.substring(0, file.length - 3),
                path: './pages/' + file
            }
        }).reduce((memo, file) => {
            memo[file.name] = file.path
            return memo;
        }, {})
}

const config = {
    entry: getEntries, 
    output: {
        path: resolve('./public'),
        filename: '[name].js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'My App',
            filename: '[name].html',
            template: './pages/_template.html'
        })
    ]
}
5
Jkarttunen

Juste en utilisant glob.sync donnera des noms de fichiers séquentiels, tels que 0.[hash].js et 1.[hash].js, parce que entry attend un objet avec le nom du fichier dans la clé et son emplacement dans la valeur, mais glob.sync renvoie un tableau.

La méthode suivante présente l'avantage de produire un objet avec des clés et des valeurs basées sur les noms de fichiers. Vous pouvez également ajouter des entrées supplémentaires, telles que vendor et common. Nécessite lodash.

const glob = require("glob");
const _ = require('lodash');

module.exports = {
  entry: Object.assign({},
    _.reduce(glob.sync("./src/*.js"),
      (obj, val) => {
        const filenameRegex = /([\w\d_-]*)\.?[^\\\/]*$/i;
        obj[val.match(filenameRegex)[1]] = val;
        return obj;
      },
    {}),
    {
      vendor: [
        'lodash'
      ]
    }
  ),
  output: {
    filename: '[name].[chunkhash].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

Ce dernier produira l'objet suivant et le passera à entry, à condition que nous ayons index.js et app.js dans le ./src répertoire:

{
    index: './src/index.js',
    app: './src/app.js',
    vendor: [ 'lodash' ]
}
2
Víctor González