react的幾種loader

css loader;

npm install --save-dev css-loader style-loader mini-css-extract-plugin

css-loader：解析@import這種語法 style-loader：把css插入到head標籤中

mini-css-extract-plugin:抽離css樣式讓index.html裏面的css樣式變成link引入

url loader;圖片等資源處理

npm install --save-dev url-loader;

post-css loader;處理css兼容

yarn add -D postcss-loader autoprefixer 或 npm install --save postcss-loader autoprefixer

babel-loader;

npm install --save babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime

@babel/core：babel核心文件 @babel/preset-env：es6轉es5 @babel/plugin-proposal-class-properties ：支持es6,class demo類語法 @babel/plugin-transform-runtime：es6轉es5時babel 會須要一些輔助函數，例如 _extend。這樣文件多的時候，項目就會很大。因此 babel 提供了 transform-runtime 來將這些輔助函數「搬」到一個單獨的模塊 babel-runtime 中，這樣作能減少項目文件的大小。