Mini-css-extract-plugin

W mini-css-extract-plugin wpisie poznałeś podstawy Webpackadzisiaj wykorzystamy tą wiedzę w praktycę i stworzymy konfigurację projektu. Plik konfiguracyjny Webpacka to w ostateczności kod JavaScriptu, więc nic nie stoi nam na przeszkodzie, żeby zrobić w nim funkcję. Pamiętacie jak podawaliśmy mode w poprzednim wpisie mini-css-extract-plugin package, mini-css-extract-plugin.

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. W przypadku skomplikowanego i bardzo spersonalizowanego projektu często gotowe zestawy narzędziowe będą niewystarczające a umiejętność konfiguracji całego środowiska od zera może okazać się ogromną zaletą. Zanim przejdziemy do wyjaśnienia, czym są module bundlery, dowiedzmy się, jakie korzyści płyną z ich 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?

Mamy już napisany config to teraz przyszła pora na konfigurację uruchomieniową, użyjemy w tym celu pliku package, mini-css-extract-plugin. Pamiętacie jak podawaliśmy mode w poprzednim wpisie do package. Importujemy samą paczkę, tworzymy funkcję, która będzie zaciągała nasz plik na podstawie 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.

Mini-css-extract-plugin

The mini CSS extract plugin is a powerful tool that can help developers improve the performance of their websites. This can result in a faster loading time for users, which can lead to improved user experience and increased conversions. In this article, we will take a closer look at the mini CSS extract plugin and how it can be used to improve the performance of your websites.

65 kg converted to pounds

Tu podajemy ścieżkę do pliku wejściowego aplikacji. W naszej przykładowej aplikacji warto skonfigurować także TypeScripta, więc doinstalujmy go wraz z typami dla Reacta:. Artykuł nie wyczerpuje całości tematu. To samo tyczy się TypeScripta. W katalogu głównym projektu stwórzmy jeszcze plik. Bo w programowaniu liczą się ludzie. Przyszła pora na konfigurację dla środowisk produkcyjnych, fragment z mergowaniem konfiguracji common będzie taki sam jak wcześniej, zmienimy natomiast mode na production oraz zmodyfikujemy nieco output:. React wykorzystuje JSX więc mieniłem rozszerzenie pliku index z ts na tsx. Możemy to zmienić dodając w konfiguracji webpack'a wpis:. 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 :. Na produkcji potrzebujemy dodać nasz plugin i zmienić style-loader na MiniCssExtractPlugin. Webpack od wersji 4 nie wymaga od nas pliku konfiguracyjnego. We wspólnej konfiguracji dodajmy jeszcze wcześniej wspomniany HtmlWebpackPlugin i wskażmy mu nasz index. Musimy jeszcze zaimportować plik css w naszym entry point , czyli w naszym przypadku w index.

This plugin extracts CSS into separate files. It's recommended to combine mini-css-extract-plugin with the css-loader.

Podczas budowania aplikacji otrzymałem kolejny błąd: ReferenceError: document is not defined W tym przypadku problemem był konflikt paczek w pliku konfiguracyjnym Webpacka. Blog Zespół Newsletter. Tu również zmieniłem rozszerzenie z ts na tsx. Ten pierwszy będzie głównym plikiem, w którym wyrenderujemy całą aplikację, a drugi głównym komponentem, w którym w przyszłości będziesz mógł dodawać Routing, Context API itp. React wykorzystuje JSX więc mieniłem rozszerzenie pliku index z ts na tsx. 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:. In which folder do you want to store your generated bundles? Został utworzony plik konfiguracyjny - webpack. Oprócz lodaderów mamy również dostępnych wiele pluginów. Zostawiłem domyślną opcję - dist. Ponadto, ustawiając atrybut hot na true możemy aktywować hot module realoading. Przyszła pora na konfigurację dla środowisk produkcyjnych, fragment z mergowaniem konfiguracji common będzie taki sam jak wcześniej, zmienimy natomiast mode na production oraz zmodyfikujemy nieco output:. Teraz możemy uruchamiać naszą aplikację lub ją budować poleceniami npm run … lub po prostu klikając w package. Ostatnią sekcją, której dodanie usprawni naszą pracę jest wcześniej wspomniany serwer developerski, którego doinstalujemy:. W tym celu musimy użyć funkcji merge.