usa - curso webpack

Webpack: ExtractTextPlugin: ¿No se debe generar un archivo JS vacío por separado cuando se tienen varios puntos de entrada css?

Question

Tengo varios puntos de entrada de CSS:

entry: {
  ...
  styles: [
    ...
  ],
  fonts: [
    ...
  ]
},

y estoy usando ExtractTextPlugin para agrupar CSS por separado:

  new ExtractTextPlugin({
    filename: `[name].bundle.css`
  }),

Así que, como salida, tengo 2 archivos CSS: styles.css y fonts.css que son correctos pero también vacíos styles.js y fonts.js . ¿Hay alguna manera de no generar archivos JS vacíos?

Answer 1

Solo agregue los archivos principales de JavaScript como entradas y requiera todas las fuentes y estilos a través de require(''./style.css'')

webpack.config.js:

entry: {
  ''main'': ''app/main'',
},
output: {
  path: ''static'',
  publicPath: ''/static/'',
  filename: ''[name].bundle.js'',
  chunkFilename: ''[chunkhash].bundle.js'',
},
module: {
  rules: [
    {
      test: //.css$/,
      use: ExtractTextPlugin.extract({
        fallback: ''style-loader'',
        use: ''css-loader''
      }),
    }]
},
plugins: [
  new ExtractTextPlugin(''[name].bundle.css''),
],

Eso le daría un /static/main.bundle.css con todos los css (transitivos) incluidos desde su aplicación / main.js.

Lo mismo para las fuentes, pero necesitaría una segunda instancia de ExtractTextPlugin como:

const extractCSS = new ExtractTextPlugin(''stylesheets/[name].bundle.css'');
const extractFonts = new ExtractTextPlugin(''stylesheets/[name].bundle.woff'');

module.exports = {
  module: {
    rules: [
      {
        test: //.css$/,
        use: extractCSS.extract([ ''css-loader'', ''postcss-loader'' ])
      },
      {
        test: //.woff$/i,
        use: extractFonts.extract([ ''url-loader'' ])
      },
    ]
  },
  plugins: [
    extractCSS,
    extractFonts
  ]
};

Consulte la documentación: varias instancias para obtener más información al respecto.

Answer 2

No creo que haya ninguna forma de hacer lo que intentas hacer, la misma pregunta se ha hecho en el rastreador de problemas github , sin ninguna solución. Si el problema es que html-webpack-plugin agrega los archivos js vacíos, debería poder solucionarlo especificando explícitamente qué fragmentos incluir o excluir .

Answer 3

Arreglé un plugin de webpack para eliminar archivos adicionales en función de su tamaño de salida final, ya que tenía el mismo problema, dado que estos archivos tienden a ser muy pequeños, parece ser solo un caso de comprobar qué tan grandes son y eliminar el tamaño pequeño, inútiles.

Instalar usando npm o yarn

npm install webpack-extraneous-file-cleanup-plugin --save-dev
yarn add webpack-extraneous-file-cleanup-plugin --dev

En su archivo webpack.config.js :

const ExtraneousFileCleanupPlugin = require(''webpack-extraneous-file-cleanup-plugin'');

module.exports = {
  ...
  plugins: [
    new ExtraneousFileCleanupPlugin({
      extensions: [''.js'']
    })
  ]
}

Puede ver la lista completa de opciones en el complemento de limpieza de archivos extraíbles de Webpack Página de Github