path - example - webpack output multiple files

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

Question

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

Answer 1

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;

Answer 2

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

Answer 3

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 https://github.com/webpack/webpack/issues/1189 .

Pero separo la ruta de salida utilizando el multi-compiler . (es decir, separar 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 extend o Object.assign en ES6 o el operador de propagación {...} en ES7.

Answer 4

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 el paquete web 2 (todavía no he probado con el paquete web 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

Answer 5

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. Use OccurenceOrderPlugin o recordsPath.

Answer 6

Webpack admite múltiples rutas de salida.

Establezca las rutas de salida como la clave de entrada. Y use el name como plantilla de 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