Pregunta 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 fuentes diferentes, etc. Para el paquete web para procesar estos he incluido el cargador de archivos que funciona correctamente, sin embargo, los archivos que genera se guardan en la ruta de salida especificada para el resto de mis archivos:

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

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

Hice un poco de google y me encontré con este * problema en github donde se ofrecen un par de soluciones, editar: 

pero parece que necesitas saber el punto de entrada para poder especificar una salida usando el método hash p.ej:

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 el resultado. en el caso de mis otros archivos en proceso de transformación, hay un punto conocido en el que los estoy requiriendo para 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.


73
2018-03-09 21:44


origen


Respuestas:


No estoy seguro si tenemos el mismo problema ya que el paquete web solo admite una salida por configuración a partir de ahora. Supongo que ya has visto el problema en Github.

Pero separo la ruta de salida usando el compilador múltiple. (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 ampliar biblioteca o Object.assign en ES6 o {...} operador de propagación en ES7.


108
2018-06-30 19:53



Webpack admite múltiples rutas de salida.

Establezca las rutas de salida como la tecla de entrada. Y usa el name como plantilla de salida.

configuración de 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

105
2017-07-24 11:03



Si puede vivir con múltiples rutas de salida con el mismo nivel de profundidad y estructura de carpetas, hay una forma de hacerlo en el paquete web 2 (aún no se ha probado con el paquete web 1.x)

Básicamente, no sigue las reglas del documento y proporciona una ruta para el nombre del 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

9
2018-04-28 22:02



Solo puede tener una ruta de salida.

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

Opciones que afectan el resultado de la compilación. las opciones de salida 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 usa hash ([hash] o [chunkhash]) asegúrese de tener un ordenamiento consistente de los módulos. Use el OccurenceOrderPlugin o el recordPath.


2
2018-03-09 23:01



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


1
2017-11-30 17:53



De hecho acabé yendo a index.js en el módulo de carga de archivos y cambiando dónde se emitieron los contenidos. Probablemente esta no sea la solución óptima, pero hasta que haya alguna otra forma, está bien, ya que sé exactamente qué 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;

0
2018-03-10 01:36