css - page - webpack version

Con Webpack, ¿es posible generar solo CSS, excluyendo el output.js?

Question

Estoy usando Webpack con el extract-text-webpack-plugin .

En mi proyecto, tengo algunos scripts de compilación. Se supone que uno de los scripts de compilación debe agrupar y minimizar CSS solo. Como uso Webpack para los otros scripts, me pareció una buena idea utilizar Webpack incluso cuando solo quiero agrupar y minimizar CSS .

Está funcionando bien, excepto que no puedo deshacerme del archivo output.js . No quiero el archivo de salida resultante webpack. Solo quiero el CSS para este script en particular.

¿Hay alguna manera de deshacerse del JS resultante? Si no, ¿sugiere alguna otra herramienta específica para el manejo de CSS? Gracias.

Answer 1

Hay una manera fácil, no se requiere ninguna herramienta adicional.

Hay una forma fácil y no necesita bibliotecas adicionales, excepto las que ya está utilizando: Webpack con el extract-text-webpack-plugin .

En breve:

Haga que los archivos js y css de salida tengan un nombre idéntico, luego el archivo css anulará el archivo js.

Un ejemplo real (webpack 2.x):

import path from ''path''
import ExtractTextPlugin from ''extract-text-webpack-plugin''

const config = {
  target: ''web'',
  entry: {
    ''one'': ''./src/one.css'',
    ''two'': ''./src/two.css''
  },
  output: {
    path: path.join(__dirname, ''./dist/''),
    filename: ''[name].css'' // output js file name is identical to css file name
  },
  module: {
    rules: [
      {
        test: //.css$/,
        use: ExtractTextPlugin.extract({
          fallback: ''style-loader'',
          use: ''css-loader''
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin(''[name].css'') // css file will override generated js file
  ]
}

Answer 2

Desafortunadamente, eso no es posible actualmente por diseño. webpack comenzó como un agrupador de JavaScript que es capaz de manejar otros "módulos web", como CSS y HTML. JavaScript se elige como idioma base, ya que puede alojar todos los otros idiomas simplemente como cadenas . El complemento-texto-webpack-plugin está simplemente extrayendo estas cadenas como un archivo independiente (por lo tanto, el nombre).

Probablemente estés mejor con PostCSS que proporciona varios complementos para post-procesar CSS de manera efectiva.

Answer 3

Una solución es ejecutar el webpack con la API de nodo y controlar la salida con la opción memory-fs . Simplemente dile que ignore el archivo js resultante. Establezca la ruta de salida en "/" en webpackConfig.

var compiler = webpack(webpackConfig);
var mfs = new MemoryFS();
compiler.outputFileSystem = mfs;
compiler.run(function(err, stats) {
    if(stats.hasErrors()) { throw(stats.toString()); }
    mfs.readdirSync("/").forEach(function (f) {
        if(f === ("app.js")) { return; } // ignore js-file
        fs.writeFileSync(destination + f, mfs.readFileSync("/" + f));
    })
});