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