Wie importiere ich min Dateien mit Webpack

Question

Ich versuche, eine dritte Partei min js und min CSS aus einem Ordner mit Webpack zu importieren, aber ich kann diesen Ordner nicht mit Webpack finden.

Meine Struktur ist

-node_modules 
-src 
-lib 
    -min.js 
    -css 
    -min.css 

Aber ich diesen lib Ordner nicht erkennen kann. Ich habe versucht, alias auf meinem webpack.config.js

resolve: { 
    alias: { 
     'vue$': 'vue/dist/vue.esm.js', 
     'lib': './lib/' 
    } 
    }, 

I resolve.modules versucht:

resolve: { 
    modules: [path.resolve(__dirname, "lib")], 
    alias: { 
     'vue$': 'vue/dist/vue.esm.js', 
    } 
    }, 

Aber nicht so gut funktionierte. Was mache ich falsch?

Answer 1

Sie müssen nur auf diese Dateien in einer Ihrer *.js Dateien verweisen, die bereits im Bundle enthalten ist.

Unter der Annahme, die folgende Struktur:

-node_modules 

-src 
    -app.js 

-lib 
    -min.js 
    -css 
    -min.css 

und den Einstiegspunkt des Projekts ist ./src/app.js, fügen Sie diese 2 Zeilen Code gibt:

app.js:

import { min } from '../lib/min.js' 
 
import '../lib/css/min.css'

Das war's! Webpack kümmert sich um diese Bibliothek und das Stylesheet. Wenn Sie mehr über die erforderlichen Webpack Loader wissen müssen und wie Sie die Style-Datei extrahieren, finden Sie in meiner vorherigen Antwort here.