web-dev-qa-db-fra.com

Comment définir plusieurs entrées et sorties de fichiers dans un projet avec webpack?

Comment définir plusieurs entrées/sorties de fichiers dans un projet avec webpack?

Je suis http://webpack.github.io/docs/tutorials/getting-started/ compilation réussie si un seul fichier est inséré dans une entrée/sortie ...

annuaire

app
webpack.config.js
./assets
././javascripts/Administrator/Article/Create/Base.js
././javascripts/Administrator/Article/Edit/Base.js
././javascripts/Account/Index/Base.js
././javascripts/Contact/Index/Base.js
...

comment sortir comme ça?

././javascripts/Administrator/Article/Create/bundle.js
././javascripts/Administrator/Article/Edit/bundle.js
././javascripts/Account/Index/bundle.js
././javascripts/Contact/Index/bundle.js

webpack.config.js

module.exports = {
  entry: {
    'AdministratorArticleCreate':['./assets/javascripts/Administrator/Article/Create/Base.js']
  },
  output: {
    path: 
  }

    // if only one file
    // entry: "./assets/javascripts/Administrator/Article/Create/Base.js",
    // output: {
    //     // path: __dirname,
    //     path: "./assets/javascripts/Administrator/Article/Create/",
    //     filename: "bundle.js"
    // }
};
javascriptnode.jswebpack
57
user1775888

Pour de nombreux points d'entrée, utilisez des tableaux en tant que valeur de la propriété entry:

entry: {
  app: ['./app/main.js', '.lib/index.js'],
  vendors: ['react']
}

app et vendors sont des tableaux, vous pouvez donc y placer autant de chemins de fichiers que nécessaire.

Pour le cas de sortie:

output: {
  path: staticPath,
  filename: '[name].js'
}

Le [name] est tiré de entry propriétés, donc si nous avons app et vendors comme propriétés, nous aurons 2 fichiers de sortie - app.js et vendors.js.

Lien vers la documentation

57
Kania

Si vous voulez sortir dans plusieurs répertoires, vous pouvez utiliser le chemin comme nom d'entrée. Par exemple, si vous voulez cette structure de répertoire:

apps
├── dir1
│   └── js
│       ├── main.js [entry 1]
│       └── bundle.js [output 1]
└── dir2
    ├── index.js [entry 2]
    └── foo.js [output 2]

Ensuite, essayez ceci dans votre module.exports:

{
  entry: {
    'dir1/js/bundle': path.resolve(__dirname, '/apps/dir1/js/main.js'),
    'dir2/foo' : path.resolve(__dirname, '/apps/dir2/index.js')
  },
  output: {
    path: path.resolve(__dirname, '/apps'),
    filename: '[name].js'
  },
  ...
}
48
Peter Tseng

voici ce qui a vraiment résolu le problème:

entry:  {
    app : __dirname + "/app/views/app/app.js",
    admin : __dirname + "/app/views/admin/admin.js"
}

output: {
    path: __dirname + "/public",
    filename: "[name].js"
},
20
João Gomes

Que faire si vous voulez obtenir les fichiers de sortie au format foo.css et bar.js à la fois? les réponses ci-dessus semblent incapables de gérer cela.

La bonne façon est d'utiliser multi-compilateur . Un fichier d'entrée un objet de configuration un fichier de sortie. De ceci réponse .

4
tcpiper

ce plugin webpack web-webpack-plugin peut le résoudre de manière exemplaire.

AutoWebPlugin peut trouver toutes les entrées de page dans un répertoire, puis configure automatiquement un WebPlugin pour chaque page générant un fichier html. Vous pouvez l'utiliser comme suit:

config webpack 

module.exports = {
    plugins: [
        new AutoWebPlugin(
            // the directory hold all pages
            './src/', 
            {
            // the template file path used by all pages
            template: './src/template.html',
            // javascript main file for current page,if it is null will use index.js in current page directory as main file
            entity: null,
            // extract common chunk for all pages and then put it into a file named common,if it is null then not do extract action
            // achieve by CommonsChunkPlugin
            commonsChunk: 'common',
            // pre append to all page's entry
            preEntrys:['./path/to/file1.js'],
            // post append to all page's entry
            postEntrys:['./path/to/file2.js'],
        }),
    ]
};

répertoire src 

── src
│   ├── home
│   │   └── index.js
│   ├── ie_polyfill.js
│   ├── login
│   │   └── index.js
│   ├── polyfill.js
│   ├── signup
│   │   └── index.js
│   └── template.html

répertoire de sortie 

├── dist
│   ├── common.js
│   ├── home.html
│   ├── home.js
│   ├── ie_polyfill.js
│   ├── login.html
│   ├── login.js
│   ├── polyfill.js
│   ├── signup.html
│   └── signup.js

AutoWebPlugin trouve toute la page home login signup répertoire dans ./src/, pour ces trois pages home login signup utilisera index.js en tant que fichier principal et sortie trois fichiers html home.html login.html signup.html`

voir doc: détecter automatiquement l'entrée HTML

3
吴浩麟

Cette question a deux ans et je pense donc que l'auteur est presque certainement passé à autre chose, mais pour ceux qui débarquent ici plus récemment, j'avais un besoin très similaire et j'étais capable d'écrire mon propre plugin pour autoriser des chemins/noms de sortie dynamiques à partir de points d'entrée connus et/ou inconnus.

Mon problème et le processus de pensée pour la solution peuvent être trouvés ici .

Et le Node se package ici .

2
sanjsanj

Vous pouvez détecter plusieurs entrées et générer des fichiers de sortie distincts en utilisant des modèles glob sync .

Mettez ceci dans votre webpack.config.js (sans le ...)

const glob = require("glob");
...
module.exports = (env, options) => ({
  ...
  entry: glob.sync("./javascripts/**/*.js").reduce((acc, item) => {
    const path = item.split("/");
    path.pop();
    const name = path.join('/');
    acc[name] = item;
    return acc;
  }, {}),
  output: {
    filename: "[name]/bundle.js",
    path: path.resolve(__dirname, "")
  },
  ...
});

Ce "devrait" vous donner la sortie souhaitée.

2
Peter

Pour mon cas d'utilisation, j'avais réellement besoin d'utiliser différents modèles basés sur l'environnement. Pour cela j'ai passé la variable NODE_ENV

module.exports = (env, argv) => {
  const ENVIRONMENT = env.NODE_ENV;
  let INDEX_HTML = 'index.html';
  if (ENVIRONMENT === 'staging') {
    INDEX_HTML = 'index-stg.html';
  }

Ensuite:

if (NODE_ENV === 'staging') {
   INDEX_HTML = 'index-stg.html';
}

Dans la sortie:

output: {
      path: process.cwd() + '/build',
      filename: `[name].js`,
      chunkFilename: `[${HASH_MODE}].[name].js`
    },

plugins:

new HtmlWebpackPlugin({
        inject: true,
        template: `app/${INDEX_HTML}`,
      }),
1
llamacorn