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

¿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.

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.

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

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

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

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/',
        }],
      },
    }),
],

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.

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;