Cómo operar el paquete web usando el complemento jquery.mCustomScrollbar

Lo que les traigo esta vez es cómo usar el complemento jquery.mCustomScrollbar con webpack. ¿Cuáles son las precauciones para usar el complemento jquery.mCustomScrollbar con webpack? El siguiente es un caso práctico, echemos un vistazo.

jquery.mCustomScrollbar está escrito en el método webpack en npm

Pero solo dice que haga referencia a js, y también debe coincidir con el CSS de mCustomScrollbar para usarlo normalmente.

Si descomprimes el mCustomScrollbar descargado y lo solicitas en js, encontrarás que siempre obtendrás un error al usar webpack.

Cuando recibe un error de este tipo, significa que está utilizando el método de importación mCustomScrollbar escrito en npm y no ha cambiado el nombre de la carpeta donde lo descargó.

Simplemente cambie el nombre de la carpeta donde se encuentra jquery.mCustomScrollbar.css para que no contenga malihu-custom-scrollbar-plugin, por ejemplo, colóquelo en su propia carpeta css~~~.

Dado que la configuración en la configuración coincide con malihu-custom-scrollbar-plugin cargado usando imports-loader, el CSS importado no se puede cargar usando css-loader y se informará un error.

En la imagen de fondo utilizada por el complemento CSS, cuando el paquete web está empaquetado, otros tipos, excepto js, ​​necesitan agregar un cargador. Cuando el paquete web introduce imágenes, debe confiar en el cargador del cargador de URL. .

Se encontró un error de referencia de imagen durante el empaquetado:

1. El cargador de URL está instalado

1. >

1. El cargador de URL está instalado, pero el cargador de URL no se utiliza para cargar imágenes. loader

npm instala url-loader ---save-dev2, configura el archivo config.js del paquete web

módulo: {

cargadores: [

{

prueba:/\.css$/, <

cargador: 'style-loader!css-loader'

}, p>

{ prueba：/\.(gif|jpg|png|woff|svg|eot|ttf)\?*$/, cargador: 'url-loader?limit=8192amp; hash: 8].[nombre].[ext]'},

//{ test:/\.png$/, cargador: 'file-loader?name=images/[hash: 8] .[ nombre].[ext]"}

],

} Creo que domina el método después de leer el caso de este artículo. Para obtener más información interesante, preste atención ¡A otros artículos relacionados de Gxl net!

Lectura recomendada:

Análisis de casos de uso de inyección de dependencia y reflexión JS

Cómo usar Webpack para el desarrollo de proyectos