webpack
Ładowarki
Szukaj…
Uwagi
Programy ładujące Webpack mogą być skonfigurowane jako „preLoaders”, „loaders” i „postLoaders”. Chociaż nie muszą tak być, konfiguracje, które wykorzystują szorowanie lub inne konieczne lub szeregowe operacje, mogą wykorzystać te etapy budowy w przygotowaniu.
Kluczem do zrozumienia programów ładujących i ich zastosowania jest to, że Webpack będzie uruchamiał każdy moduł na wymaganym grafie przez system ładujący. Zgodnie z powyższym przykładem oznacza to, że gdy Webpack zacznie przeszukiwać importowane aplikacje, zidentyfikuje wymagane pliki, a używając prostego wyrażenia regularnego określi, który plik lub typ pliku wymaga jakiego modułu ładującego lub serii programów ładujących.
Powyżej widać, że wszystkie pliki „.js” lub „.jsx” będą es-lintowane przez moduł ładujący eslint w fazie preLoader. Inne typy plików js|x będą również uruchamiane przez moduł ładujący babel w fazie głównego modułu ładującego. Ponadto, w tej samej fazie, wszystkie pliki .scss zostaną załadowane do modułu ładującego sass . Umożliwia to importowanie plików Sass do modułów JS i wysyłanie ich do wynikowego pakietu JS lub nawet do innego osobnego pakietu CSS (za pomocą wtyczki ).
Uwaga: importowanie plików .scss będzie działać tylko z pakietem Webpack i odpowiednim programem ładującym. Węzeł nie zrozumie tego rodzaju importu bez preprocesora lub transpilatora.
W przykładzie .scss należy również zwrócić uwagę na możliwość „łańcuchowania” ładowarek za pomocą ! wykrzyknik jako „rura” między różnymi ładowarkami. Powyższy przykład potokuje dane wyjściowe „sass-loader” do „css-loader” i wreszcie do „style-loader”. Można to również wykonać za pomocą tablicy programów loaders: ['style-loader', 'css-loader', 'sass-loader'] . Dostępne są również różne opcje dla wbudowanych definicji modułu ładującego i postępuj zgodnie ze składnią parametru zapytania często występującą w adresach URL.
Zobacz także: https://webpack.github.io/docs/loaders.html
Skonfiguruj za pomocą preLoadera dla eslint, babel dla jsx i css loadera.
Poniższa konfiguracja może być używana jako konfiguracja podstawowa do tworzenia pakietu jako biblioteki. Zauważ, że konfiguracja modułu zawiera listę preLoaderów i programów ładujących.
// webpack.config.js
var path = require('path');
module.exports = {
entry: path.join(__dirname, '..', 'src/index.js'),
output: {
path: path.join(__dirname, '..', '/lib'),
filename: outputFile,
library: 'myCoolBundle.js',
libraryTarget: 'umd',
umdNamedDefine: true
},
module: {
preLoaders: [
{
test: /(\.jsx|\.js)$/,
loader: "eslint-loader",
exclude: /node_modules/,
}
],
loaders: [
{
test: /(\.jsx|\.js)$/,
loader: ['babel'],
exclude: /(node_modules)/,
include: path.join(__dirname, '..'),
query: {
presets: [ 'es2015', 'react']
}
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader!sass-loader"]
}
]
},
resolve: {
root: path.resolve(__dirname, '..', './src'),
extensions: ['', '.js', '.jsx', '.scss'],
fallback: path.join(__dirname, '../node_modules')
},
eslint: {
configFile: path.resolve(__dirname, '..', '.eslintrc'),
}
};