Mini-css-extract-plugin

W poprzednim wpisie poznałeś podstawy Webpackamini-css-extract-plugin, dzisiaj wykorzystamy tą wiedzę w praktycę i stworzymy konfigurację projektu.

Tym razem bierzemy się za temat konfiguracyjny, dzisiejszy materiał będzie nieco dłuższy i pokażemy Ci naszą propozycję na skonfigurowanie projektu przy użyciu Webpacka. W dzisiejszych czasach mamy wiele narzędzi pozwalających nam szybciej wystartować z nowym projektem i mało, kto samodzielnie konfiguruje całe środowisko. Na przykład, w ekosystemie Reacta mamy Create React App. Dzięki niemu za pomocą jednego polecenia dostajemy gotową, podstawową konfiguracje. Po skorzystaniu z generatora dostajemy gotowy setup i zapominamy do czasu następnego użycia.

Mini-css-extract-plugin

Dotychczas tworząc aplikacje z użyciem Reacta używałem create-react-app. Tym razem postanowiłem zrobić to manualnie. Do tego celu wykorzystałem Webpack'a. Poniżej przedstawiam jak krok po kroku skonfigurować taką aplikację. Po uruchomieniu powyższej komendy, będziemy mogli podać informacje dotyczące projektu, takie jak jego nazwa, wersja, licencja czy autor. Po ich podaniu, co jest opcjonalne, zostanie utworzony plik package. Po zainstalowania Webpacka i innych dodatków, należy utworzyć plik konfiguracyjny. Można to zrobić za pomocą polecenia:. Will your application have multiple bundles? Wybrałem "No", ponieważ będzie to prosta aplikacja z jednym plikiem wynikowym. Which will be your application entry point? Tu podajemy ścieżkę do pliku wejściowego aplikacji. In which folder do you want to store your generated bundles? Zostawiłem domyślną opcję - dist. Do sekcji scripts została dodana wartość "build" z wartością "webpack", która, jak sama nazwa wskazuje, służy do budowania aplikacji.

To samo tyczy się TypeScripta. Robimy to za pomocą poniższego polecenia: yarn init, mini-css-extract-plugin. Twój adres e-mail nie zostanie opublikowany.

.

This plugin extracts CSS into separate files. It's recommended to combine mini-css-extract-plugin with the css-loader. Please use html-webpack-plugin for automatic generation link tags or create index. If you need set devtool to another value you can enable source maps generation for extracted CSS using sourceMap: true for css-loader. Works like output.

Mini-css-extract-plugin

This plugin extracts CSS into separate files. It's recommended to combine mini-css-extract-plugin with the css-loader. Note that if you import CSS from your webpack entrypoint or import styles in the initial chunk, mini-css-extract-plugin will not load this CSS into the page. Please use html-webpack-plugin for automatic generation link tags or create index. If you need set devtool to another value you can enable source maps generation for extracted CSS using sourceMap: true for css-loader. Works like output. Specifying chunkFilename as a function is only available in webpack 5.

Totally workwear stadium

Pewnie wielokrotnie, w trakcie eksperymentów lub nauki tworzyłeś plik index. Teraz jeśli spróbujesz odpalić cokolwiek, prawdopodobnie zobaczysz błąd. Po skorzystaniu z generatora dostajemy gotowy setup i zapominamy do czasu następnego użycia. Dodajmy więc odpowiedni plugin:. Dla webpacka domyślnie jest to webpack. Na sam koniec style-loader doda nasze style do pliku index. Zanim przejdziemy do wyjaśnienia, czym są module bundlery, dowiedzmy się, jakie korzyści płyną z ich użycia. W naszej przykładowej aplikacji warto skonfigurować także TypeScripta, więc doinstalujmy go wraz z typami dla Reacta:. Tu również zmieniłem rozszerzenie z ts na tsx. Niestety każdy kolejny skrypt to dodatkowy request dla przeglądarki powodujący spadek wydajności:. Może zdarzyć się tak, że będziesz potrzebował osobnej konfiguracji dla trybu prod i dev , w takim przypadku przychodzi nam z pomocą wtyczka webpack-merge :. Mamy już napisany config to teraz przyszła pora na konfigurację uruchomieniową, użyjemy w tym celu pliku package. Co jest do tego potrzebne?

This plugin extracts CSS into separate files. This plugin should be used only on production builds without style-loader in the loaders chain, especially if you want to have HMR in development.

Sass-loader ładuje pliki scss a node-sass jest jego dependency, więc też potrzebujemy tej paczki. W tym celu, w katalogu komponentu obok pliku. W tym pliku również musimy nareszcie określić jak ma wyglądać plik wynikowy, ustalmy, że będzie to plik o dynamicznie tworzonej nazwie hash:8 oznacza, że hash będzie się składał tylko z 8 znaków w folderze dist:. W poprzednim wpisie poznałeś podstawy Webpacka , dzisiaj wykorzystamy tą wiedzę w praktycę i stworzymy konfigurację projektu. Możliwości module bundlerów jest oczywiście o wiele więcej, tutaj wymieniłem tylko kilka z nich. Po zainstalowaniu stwórz folder w katalogu głównym o nazwie build-utils , a w nim webpack. Dzieje się to dlatego, że Webpack każdy nasz plik traktuje jako moduł. Dla konfiguracji developerskiej możemy też określić jak chcemy ładować nasze style, doinstalujmy w tym celu 4 paczki:. W pliku package. Jednym z nich, który będzie bardzo przydatny jest HtmlWebpackPlugin służący do utworzenia pliku HTML w folderze wynikowym oraz dołączenie do niego zbundlowanego skryptu. Aby to zrobić instalujemy paczkę webpack-merge:. Dzięki niemu za pomocą jednego polecenia dostajemy gotową, podstawową konfiguracje. Oprócz lodaderów mamy również dostępnych wiele pluginów. Na produkcji potrzebujemy dodać nasz plugin i zmienić style-loader na MiniCssExtractPlugin. Do tego potrzebny jest plugin HtmlWebpackPlugin.