webpack
Ładowarki i wtyczki
Szukaj…
Uwagi
Programy ładujące i wtyczki tworzą elementy składowe pakietu Webpack.
Programy ładujące są zwykle delegowane do jednego zadania i typu pliku. Są łatwiejsze do skonfigurowania i zwykle wymagają mniej kodu z szablonem.
Z drugiej strony wtyczki mają dostęp do wewnętrznego systemu kompilacji Webpacka za pośrednictwem haków, dzięki czemu są bardziej wydajne. Wtyczki mogą modyfikować w pełni skonfigurowane środowisko Webpack i mogą wykonywać niestandardowe działania podczas całego procesu kompilacji.
Na przykład w przypadku naszych plików CSS można użyć modułu ładującego, aby automatycznie dodać prefiksy dostawcy do właściwości, a wtyczka może posłużyć do utworzenia zminimalizowanego arkusza stylów w procesie kompilowania pakietu.
Pierwsze kroki z ładowarkami
Na początek npm install żądane npm install dla twojego projektu.
Wewnątrz obiektu konfiguracji eksportowanego w webpack.config.js właściwość module pomieści wszystkie module webpack.config.js .
const source = `${__dirname}/client/src/`;
module.exports = {
// other settings here
module: {
loaders: [
{
test: /\.jsx?$/,
include: source,
loaders: ['babel?presets[]=es2015,presets[]=react', 'eslint']
},
{
test: /\.s?css$/,
include: source,
loaders: ['style', 'css', 'autoprefixer', 'sass']
}
]
},
};
W powyższej konfiguracji używamy trzech podstawowych ustawień naszych ładowników:
- test: tutaj łączymy moduły ładujące z określonymi rozszerzeniami za pomocą RegExp. Pierwszy zestaw programów ładujących jest wykonywany dla wszystkich plików .js i .jsx. Drugi zestaw jest wykonywany na wszystkich plikach .css i .scss.
- include: Jest to katalog, w którym chcemy, aby nasze programy ładujące działały. Opcjonalnie możemy równie łatwo użyć właściwości
excludeaby zdefiniować katalogi, których nie chcemy dołączać. - programy ładujące: jest to lista wszystkich programów ładujących, które chcemy uruchomić na plikach określonych w
testiinclude.
Ważne jest, aby pamiętać, że moduły ładujące są wykonywane od prawej do lewej w każdej tablicy modułów ładujących oraz od dołu do góry w poszczególnych definicjach. Poniższy kod wykona sass, autoprefixer, css, style w następującej kolejności: sass, autoprefixer, css, style .
loaders: [
{
test: /\.s?css$/,
include: source,
loaders: ['style', 'css', 'autoprefixer']
},
{
test: /\.s?css$/,
include: source,
loaders: ['sass']
}
]
Jest to częste źródło zamieszania i błędów dla programistów, którzy dopiero zaczynają pracę z webpack. Na przykład, gdy używamy składni JSX i ES6, chcemy pobrudzić ten kod, a nie skompilować kod dostarczony przez nasz moduł ładujący babel. Dlatego nasz moduł ładujący eslint znajduje się po prawej stronie modułu ładującego babel.
Przyrostek -loader jest opcjonalny podczas wyświetlania listy naszych -loader .
loaders: ['sass']
... jest równa:
loaders: ['sass-loader']
Alternatywnie możesz użyć właściwości modułu loader (liczba pojedyncza) wraz z łańcuchem oddzielającym listę modułów loader za pomocą ! postać.
loaders: ['style', 'css']
... jest równa:
loader: "style!css"
ładowanie plików maszynopisu
Aby korzystać z maszynopisu w pakiecie internetowym, musisz zainstalować typescript i ts-loader
npm --save-dev install typescript ts-loader
Teraz możesz skonfigurować pakiet WWW do korzystania z plików maszynopisu
// webpack.config.js
module.exports = {
..
resolve: {
// .js is required for react imports.
// .tsx is required for react tsx files.
// .ts is optional, in case you will be importing any regular ts files.
extensions: ['.js', '.ts', '.tsx']
},
module: {
rules: [
{
// Set up ts-loader for .ts/.tsx files and exclude any imports from node_modules.
test: /\.tsx?$/,
loaders: isProduction ? ['ts-loader'] : ['react-hot-loader', 'ts-loader'],
exclude: /node_modules/
}
]
},
...
};