javascript - nesting - webpack 4 css loader
Webpack 2: ADVERTENCIA en.png,.svg,.. DEPRECATED. Configure la opción optipng''s optimizationLevel en sus propias opciones.(optipng.optimizationLevel) (5)
Ahora necesita especificar sus opciones para el optimizador específico. por lo que una configuración de cargador web 1.x anterior como;
loaders: [
''file-loader?name=assets/[name].[ext]'',
''image-webpack-loader?progressive=true&optimizationLevel=7&interlaced=true''
]
se convierte
use: [
{
loader: ''file-loader'',
options: {
query: {
name:''assets/[name].[ext]''
}
}
},
{
loader: ''image-webpack-loader'',
options: {
query: {
mozjpeg: {
progressive: true,
},
gifsicle: {
interlaced: true,
},
optipng: {
optimizationLevel: 7,
}
}
}
}]
Tenga en cuenta el objeto de opciones, con la consulta incrustada dentro de él.
Ver https://webpack.js.org/guides/migrating/ y enviar comentarios sobre este tema; https://github.com/tcoopman/image-webpack-loader/issues/68#issuecomment-275848595
Esta ADVERTENCIA se imprime ~ 20 veces al ejecutar el webpack ; procesa y webpack muy bien, pero ¿qué significa? ¿Como me deshago de esto?
Buscar en Google proporciona poca o ninguna ayuda desafortunadamente.
Aquí está mi configuración de paquete web:
const ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require("webpack");
module.exports = {
entry: {
dashboard: ''./js/main.js'',
vendor: ["fixed-data-table","react","react-dom","jquery", "bootstrap", "vis",],
},
output: { path: "../public", filename: ''bundle.js'' },
plugins: [
new webpack.optimize.CommonsChunkPlugin({name: "vendor", filename: "static/vendor.bundle.js"}),
new ExtractTextPlugin("/static/[name].css"),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
],
module: {
loaders: [
{
test: /.js?$/,
loader: ''babel-loader'',
exclude: /node_modules/,
query: {
presets: [
''es2015'', ''react'', ''stage-0'',
],
}
},
{
test: //.css$/,
loader: ExtractTextPlugin.extract({ fallback: ''style-loader'', use: ''css-loader''}),
},
{
test: //.(jpe?g|png|gif|svg)$/i,
loaders: [
''file-loader?hash=sha512&digest=hex&name=~/.local/share/Trash/[hash].[ext]'',
''image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'', {
loader: ''image-webpack-loader'',
}
],
},
{
test: //.(eot|svg|ttf|woff|woff2)$/,
loader: ''file-loader?name=~/.local/share/Trash/[name].[ext]''
}
]
},
};
Muestra de ADVERTENCIAS (¡hay muchas!)
WARNING in ./~/vis/dist/img/network/addNodeIcon.png
DEPRECATED. Configure gifsicle''s interlaced option in it''s own options. (gifsicle.interlaced)
@ ./~/css-loader!./~/vis/dist/vis.min.css 6:12847-12887
@ ./~/vis/dist/vis.min.css
WARNING in ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.svg
DEPRECATED. Configure gifsicle''s interlaced option in it''s own options. (gifsicle.interlaced)
@ ./~/css-loader!./~/bootstrap/dist/css/bootstrap.min.css 6:3700-3752
@ ./~/bootstrap/dist/css/bootstrap.min.css
Ninguno de los anteriores estaba funcionando para mí, inspirándose en el ejemplo de configuración webpack2 oficial https://github.com/tcoopman/image-webpack-loader/blob/master/test/webpack2.config.js esto es lo que funcionó para mí
{
test: //.(png|jpe?g|gif|svg)$/,
use: [
{
loader: ''file-loader'',
options: {
// path where the images will be saved
name: ''assets/img/[name].[ext]''
}
},
{
loader: ''image-webpack-loader'',
options: {
mozjpeg: {
quality: 65
},
pngquant:{
quality: "10-20",
speed: 4
},
svgo:{
plugins: [
{
removeViewBox: false
},
{
removeEmptyAttrs: false
}
]
},
gifsicle: {
optimizationLevel: 7,
interlaced: false
},
optipng: {
optimizationLevel: 7,
interlaced: false
}
}
}
]
}
La siguiente configuración de webpack2 de image-webpack-loader funciona bien para mí:
{
loader: ''image-webpack-loader'',
options: {
progressive: true,
optipng: {
optimizationLevel: 7,
},
mozjpeg: {
quality: 65
},
gifsicle: {
interlaced: true,
},
pngquant: {
quality: ''65-90'',
speed: 4
}
}
}
Webpack 2 ahora admite la sintaxis de "objeto de consulta", lo que significa que puede crear un objeto separado para los parámetros de consulta. Así es como lo recomienda image-webpack-loader en su documentación . Lo actualicé con los nuevos estándares de nomenclatura de webpack 2:
rules: [ // rules is formerly "loaders" in webpack 1
{
test: //.(svg|jpe?g|png|gif|ico)(/?{0}(?=/?|$))/,
use: [ // use is formerly "loaders" in webpack 1
// file-loader has a bug where it doesn''t yet recognize query object
// syntax for webpack 2, so the query options `assets/images/[name].[ext]`
// are ignored until they fix that,
// {
// loader: ''file'',
// query: {
// name: ''assets/images/[name].[ext]''
// }
//},
''file?name=assets/images/[name].[ext]'', // or just ''file-loader''
{
loader: ''image-webpack'',
query: {
progressive: true,
optimizationLevel: 7,
interlaced: false,
pngquant: {
quality: ''65-90'',
speed: 4
}
}
// you can also do it like this:
// query: {
// mozjpeg: {
// progressive: true,
// },
// gifsicle: {
// interlaced: false,
// },
// optipng: {
// optimizationLevel: 7,
// }
// }
}
]
}
]
Tenga en cuenta que las rules son las mismas que las cargadores de primer nivel del paquete web 1, y el use es el mismo que el de los loaders webpack 1 en el nivel del cargador individual (el que está después de la test ). Como puede ver, antes era confuso, razón por la cual se ha cambiado el nombre del esquema en el paquete web 2.
Esto se debe a tener parámetros en el objeto de consulta que ahora pertenecen a uno de los objetos secundarios.
por ejemplo:
Esto es malo:
''file-loader'',
{
loader: ''image-webpack-loader'',
query: {
progressive: true,
optimizationLevel: 7,
pngquant: {
quality: ''65-90'',
speed: 4
},
mozjpeg: {
progressive: true
},
gifsicle: {
interlaced: true
},
optipng: {
optimizationLevel: 7
}
}
}
donde esto es bueno:
''file-loader'',
{
loader: ''image-webpack-loader'',
query: {
pngquant: {
quality: ''65-90'',
speed: 4
},
mozjpeg: {
progressive: true
},
gifsicle: {
interlaced: true
},
optipng: {
optimizationLevel: 7
}
}
}