Cómo crear múltiples rutas de salida en la configuración de Webpack

165

¿Alguien sabe cómo crear múltiples rutas de salida en un archivo webpack.config.js? Estoy usando bootstrap-sass que viene con algunos archivos de fuente diferentes, etc. Para que webpack procese estos, he incluido el cargador de archivos que funciona correctamente, sin embargo, los archivos que genera se guardan en la ruta de salida que especifiqué para El resto de mis archivos:

    output: {
      path: __dirname + "/js",
      filename: "scripts.min.js"
    }

Me gustaría lograr algo donde tal vez pueda ver los tipos de extensión para cualquier paquete web que esté generando y para cosas que terminan en .woff .eot, etc., para que se desvíen a una ruta de salida diferente. es posible?

Busqué en Google un poco y encontré este * problema en github donde se ofrecen un par de soluciones, edite:

pero parece que necesita saber el punto de entrada para poder especificar una salida utilizando el método hash, por ejemplo:

var entryPointsPathPrefix = './src/javascripts/pages';
var WebpackConfig = {
  entry : {
    a: entryPointsPathPrefix + '/a.jsx',
    b: entryPointsPathPrefix + '/b.jsx',
    c: entryPointsPathPrefix + '/c.jsx',
    d: entryPointsPathPrefix + '/d.jsx'
  },

  // send to distribution
  output: {
    path: './dist/js',
    filename: '[name].js'
  }
}

* https://github.com/webpack/webpack/issues/1189

Sin embargo, en mi caso, en lo que respecta a los archivos de fuentes, el proceso de entrada se abstrae y todo lo que sé es la salida. En el caso de que mis otros archivos se sometan a transformaciones, hay un punto conocido en el que estoy exigiendo que mis cargadores los manejen. Si hubiera una forma de averiguar dónde estaba sucediendo este paso, podría usar el método hash para personalizar las rutas de salida, pero no sé dónde se requieren estos archivos.

spb
fuente

Respuestas:

221

No estoy seguro de si tenemos el mismo problema ya que webpack solo admite una salida por configuración a partir de junio de 2016. Supongo que ya viste el problema en Github .

Pero separo la ruta de salida usando el compilador múltiple . (es decir, separando el objeto de configuración de webpack.config.js).

var config = {
    // TODO: Add common Configuration
    module: {},
};

var fooConfig = Object.assign({}, config, {
    name: "a",
    entry: "./a/app",
    output: {
       path: "./a",
       filename: "bundle.js"
    },
});
var barConfig = Object.assign({}, config,{
    name: "b",
    entry: "./b/app",
    output: {
       path: "./b",
       filename: "bundle.js"
    },
});

// Return Array of Configurations
module.exports = [
    fooConfig, barConfig,       
];

Si tiene una configuración común entre ellos, puede usar la biblioteca extendida o Object.assignen ES6 o el {...}operador extendido en ES7.

Yeo
fuente
No ejecuté el fragmento, puede producirse algún error o error tipográfico
Yeo
Ejecuté tu fragmento, funciona a las mil maravillas ... Sorprendido de que nadie haya visto esto, eh, desarrolladores frontend, sin paciencia, siempre con prisa ;-). Exporto configuraciones de la misma manera, pero mi declaración es diferente / estándar: var config = {entry: SOURCE_DIR + '/index.jsx', ....} No utilicé ningún compilador múltiple también: - \
Berenjena
¿O puede hacer un paquete web && cp, etc. en npm?
SuperUberDuper
1
Es muy útil para mí implementar un paquete npm tanto en la carpeta original (las pruebas automáticas están allí) como también en la carpeta de la aplicación que implementa el paquete. De esta manera, puedo omitir el paso de descarga de npm y probar en vivo mi código de paquete actualizado hasta que la nueva versión sea estable y esté lista para ser publicada en npm.
Adrian Moisa
<pre> <code> var config = {// TODO: Agregar un módulo de configuración común: {},}; </code> </pre> El module{}objeto es incorrecto. No es requerido Se extenderá / fusionó en el mismo nivel como palabras clave name, entry, output(de su ejemplo). <pre> <code> {module: {mode: "development", devtool: "source-map"}}, name: "a", entry: "./a/app", output: {path: "/ a ", filename:" bundle.js "}} </code> </pre>
Rob Waa
249

Webpack admite múltiples rutas de salida.

Establezca las rutas de salida como la clave de entrada. Y use la nameplantilla como salida.

configuración del paquete web:

entry: {
    'module/a/index': 'module/a/index.js',
    'module/b/index': 'module/b/index.js',
},
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
}

generado:

└── module
    ├── a
    │   └── index.js
    └── b
        └── index.js
zhengkenghong
fuente
44
En mi caso, quiero que una salida no contenga chunkhash, ¿hay alguna solución simple para eso? Gracias.
raRaRa
1
@zhengkenghong Creo que la ruta de salida generada lo necesitaría dist. Entonces, en lugar de module/a/index.jsser una ruta de salida, debería ser module/a/dist/index.jsO de lo contrario, está anulando sus archivos de entrada.
dance2die
1
La distcarpeta @Sung ya está configurada en la ruta de salida. Entonces el archivo generado sería dist/module/a/index.js, lo cual no mencioné.
zhengkenghong
44
Creo que esta debería ser la respuesta aceptada, ya que es la respuesta de los documentos webpack 4. -> webpack.js.org/concepts/output/#multiple-entry-points
Será el
1
@raRaRa Tarde a la fiesta, pero puede hacerlo utilizando una función output.filenamecomo se documenta aquí: webpack.js.org/configuration/output/#outputfilename
Thomas
22

Si puede vivir con múltiples rutas de salida que tienen el mismo nivel de profundidad y estructura de carpetas, hay una manera de hacerlo en webpack 2 (todavía no he probado con webpack 1.x)

Básicamente, no sigue las reglas de documentación y proporciona una ruta para el nombre de archivo.

module.exports = {
    entry: {
      foo: 'foo.js',
      bar: 'bar.js'
    },

    output: {
      path: path.join(__dirname, 'components'),
      filename: '[name]/dist/[name].bundle.js', // Hacky way to force webpack   to have multiple output folders vs multiple files per one path
    }
};

Eso tomará esta estructura de carpetas

/-
  foo.js
  bar.js

Y convertirlo en

/-
  foo.js
  bar.js
  components/foo/dist/foo.js
  components/bar/dist/bar.js
cmswalker
fuente
@ccnixon está documentado aquí webpack.js.org/configuration/output/#outputfilename seach para "todavía permitido".
John Henckel
3

Escribí un complemento que, con suerte, puede hacer lo que quiera, puede especificar puntos de entrada conocidos o desconocidos (usando glob ) y especificar salidas exactas o generarlas dinámicamente usando la ruta y el nombre del archivo de entrada. https://www.npmjs.com/package/webpack-entry-plus

sanjsanj
fuente
3

Definitivamente puede devolver una variedad de configuraciones desde su archivo webpack.config. Pero no es una solución óptima si solo desea que una copia de los artefactos esté en la carpeta de la documentación de su proyecto, ya que hace que webpack construya su código duplicando el tiempo total de construcción.

En este caso, recomendaría usar el complemento FileManagerWebpackPlugin en su lugar:

const FileManagerPlugin = require('filemanager-webpack-plugin');
// ...
plugins: [
    // ...
    new FileManagerPlugin({
      onEnd: {
        copy: [{
          source: './dist/*.*',
          destination: './public/',
        }],
      },
    }),
],
Alejandro
fuente
1

Solo puede tener una ruta de salida.

de los documentos https://github.com/webpack/docs/wiki/configuration#output

Opciones que afectan la salida de la compilación. Las opciones de salida le indican a Webpack cómo escribir los archivos compilados en el disco. Tenga en cuenta que, si bien puede haber múltiples puntos de entrada, solo se especifica una configuración de salida.

Si utiliza algún hashing ([hash] o [chunkhash]) asegúrese de tener un orden consistente de los módulos. Utilice OccurenceOrderPlugin o recordsPath.

ex-zac-tly
fuente
Gracias. Voy a dejar la Q en caso de que alguien pueda encontrar una solución.
spb
¿Cuál es su caso de uso para requerir 2 rutas de salida? Parece que quiere 2 aplicaciones o 1 aplicación y 1 módulo.
ex-zac-tly
Pensé que necesitaba uno que estuviera dedicado a la salida generada por el cargador de archivos que estaba yendo a la raíz del proyecto, mientras que lo quería en su propia carpeta. Terminé simplemente redirigiendo la ruta de salida en el cargador en sí según mi respuesta a continuación.
spb
1
Esto no es completamente cierto. Técnicamente, solo puede especificar una ruta de salida, pero se aplicará para cada clave en un objeto de entrada, lo que le permite tener múltiples salidas - webpack.js.org/concepts/entry-points
sanjsanj
0

De hecho, terminé yendo a index.js en el módulo del cargador de archivos y cambiando a dónde se emitieron los contenidos. Probablemente esta no sea la solución óptima, pero hasta que haya otra forma, está bien, ya que sé exactamente lo que está manejando este cargador, que son solo fuentes.

//index.js
var loaderUtils = require("loader-utils");
module.exports = function(content) {
    this.cacheable && this.cacheable();
    if(!this.emitFile) throw new Error("emitFile is required from module system");
    var query = loaderUtils.parseQuery(this.query);
    var url = loaderUtils.interpolateName(this, query.name || "[hash].[ext]", {
        context: query.context || this.options.context,
        content: content,
        regExp: query.regExp
    });
    this.emitFile("fonts/"+ url, content);//changed path to emit contents to "fonts" folder rather than project root
    return "module.exports = __webpack_public_path__ + " + JSON.stringify( url) + ";";
}
module.exports.raw = true;
spb
fuente
1
No sé si esto sigue siendo un problema para usted, pero eche un vistazo a npmjs.com/package/webpack-entry-plus
sanjsanj