webpack學習(三)使用第三方加載器去加載css less等&url-load的使用&babel配置

一、加載CSS文件

加載css文件不能直接用link 所以我們肯定要用 import來導入這個css文件

這樣直接導入是會報錯的
在main.js直接導入會報錯

// 使用import 導入樣式表
import './css/index.css' //如何直接這樣導入會報錯

注意: 因爲webpack默認的打包處理值是針對js文件，無法處理其他的非JS類型的文件
如果非要處理這些非JS文件需要藉助第三方加載器 loader
當前我們要打包處理css文件所以需要安裝兩個插件:
npm i style-loader -D
npm i css-loader -D
連寫: npm i style-loader css-loader -D

安裝完成後需要在webpack.config.js中配置

webpack.config.js中新增一個配置節點叫做：module,它是一個對象，在module對象身上有一個rules屬性，
是個數組，負責存放第三方文件和匹配和處理規則：

  module: { //這個節點用於配置所有的第三方模塊加載器
        rules: [
            {test: /\.css$/,use:['style-loader','css-loader']} //配置處理.css文件第三方 loader規則
        ]
        
    }

調用方式: webpack首先是執行import ‘./css/index.css’ 發現是午無法處理的，就去webpack.config.js中
去找這個模塊看有沒有解析後綴名爲.css模塊的加載器，如果有事從右往左依次開始執行。如果沒有則會報錯。這個上面是 先執行 css-loader加載器 後執行 style-loader加載器。如果解析到最後了，發現已經沒有加載器了。會將加載器的執行結果交給webpack打包輸出到bundle.js中去。

以後遇到的這種第三方沒法解析的都這樣去做

二、處理css文件中路徑地址
默認情況下，webpack無法處理css文件中的url 地址，不管是圖片還是字體庫，只要是url地址，都處理不了
在本地項目中安裝地址加載器: url-loader

安裝命令:  npm i url-loader file-loader -D

在webpack.config.js中使用

url-loader可以寫的參數

    rules: [
            {test: /\.css$/,use:['style-loader','css-loader']},//配置處理.css文件第三方 loader規則
            
            // 這樣是對所有的圖片都進行base64處理，小圖片不處理，大圖片進行處理
            //  {test: /\.(jpg|png|gif|bmp|jpeg)$/,use: ['url-loader']},//處理圖片路徑的加載器
            // {test: /\.(jpg|png|gif|bmp|jpeg)$/,use: ['url-loader?limit=194470']},//處理圖片路徑的加載器
            // 這裏的limit 給定的值 是圖片的大小，單位是 byte ,如果當前給定的值大於或等於圖片的大小，會轉換成base64，如果當前給定的值小於圖片的大小值，就不會轉成base64

                     // 讓文件保持原來的名稱不變
            // {test: /\.(jpg|png|gif|bmp|jpeg)$/,use: ['url-loader?limit=194470&name=[name].[ext]']},
   
                     // 讓文件保持原來的名稱不變 但是前面加了8位的哈希值
            {test: /\.(jpg|png|gif|bmp|jpeg)$/,use: ['url-loader?limit=194470&name=[hash:8]-[name].[ext]']},
        ]

二、在webpack中使用bootstrap

第一步:安裝 bootstrap

命令: npm -i bootstrap -S

第二步:

使用import導入 bootstrap
// 注意:如果要通過路徑的形式去引入 node_modules 中相關的文件，可以直接省略路徑前面的
// node_modeles 這一層目錄 直接寫包的名字然後後面跟上具體的文件路徑 
//不寫這個目錄默認去node_modeles這個目錄下找
import 'bootstrap/dist/css/bootstrap.css'

第三步:
當前bootstrap版本是4.X以上版本，所以如果要使用圖標就必須安裝圖標的css,4以上的圖標樣式分離
了。

命令: npm i https://github.com/iconic/open-iconic.git -S

第四步:導入圖標：

import 'open-iconic/font/css/open-iconic-bootstrap.css'

再在webpack.config.js中去配置加載器

// 處理字體圖標加載器

    {test: /\.(ttf|eot|svg|woff|woff2|otf)$/, use: 'url-loader'},//處理字體文件的loader

三、解析高級的ES6語法配置 Babel

在webpack中 默認只能處理一部分 ES6的新語法，一些更高級的ES6語法或者ES7的語法，
webpack是處理不了的這個時候就需要藉助第三方的loader 來幫助webpack 處理這些高級的
語法。當第三方loader 把高級語法轉爲低級語法之後會把結果交給 webpack去打包到 bundle.js

通過: Balel 可以幫我我們將高級的語法轉爲低級的語法
在 webpack 中運行如下兩套命令，安裝兩套包，去安裝 Babel 相關的loader 功能

第一套包: npm i babel-core babel-loader babel-plugin-transform-runtime -D
第二套包: npm i babel-preset-env babel-preset-stage-0 -D

然後再 webpack的配置文件中 webpack.config.js中 在module 節點下的 rules 數組中
添加一個新的匹配規則

{test:'/\.js$/',use:'babel-loader',exclude:/node_modules}

注意: 在配置 babel 的loader 規則的時候必須把 node_modules 目錄 通過 exclude選項進行排除掉.

原因: 1.如果不排除 node_modules 則 Balel 會把 node_modules 中所有第三方js文件
都打包編譯，這樣會非常消耗CPU，同時打包速度非常慢
2. 哪怕最終Babel 把所有的node_modules中的js 都轉換完畢，但是項目也無法正常的運行

在項目根目錄中，新建一個叫做 .babelrc 的Babel 配置文件,這個配置文件屬於JSON格式，所以在寫 .babelrc 寫如下的配置

{
"presets": ["env","stage-0"],  //預設 可以翻譯成Babel語法  env
"plugins":["transform-runtime"]  //上面安裝了有個插件叫 babel-plugin-transform-runtime
}

注意：因爲我當前的版本已經是webpack4以上版本了，在安裝babel時候運行上面第一套命令的時候出現了警告。

npm WARN [email protected] requires a peer of @babel/core@^7.0.0 but none is installed.
 You must install peer dependencies yourself.

找到解決方案的博客:https://www.cnblogs.com/codebook/p/10285475.html
2.1 [email protected]是webpack用於Babel 7.x的一個整合loader模塊，Babel 7.x已經把所有的相關的包從babel-遷移到了@babel的npm環境倉庫。

所以上述警告是合適的，你可以通過使用@babel/core代替babel-core來安裝：

所以第一套命令是：

npm i @babel/core  babel-loader babel-plugin-transform-runtime -D

警告上面那一套，如果你的babel是七以下的可能會適用。但是你要是按照 npm i babel-core -S這種命令來，是會報錯的

報錯：

ERROR in ./src/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] /Users/mac/Documents/04前端學習/04code/01Vue/webpack-study/src/main.js:
As of v7.0.0-beta.55, we’ve removed Babel’s Stage presets.
Please consider reading our blog post on this decision at
https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets
for more details. TL;DR is that it’s more beneficial in the
long run to explicitly add which proposals to use.

這種錯就是最新的babel已經不是這樣配置的了。

最新配置步驟:

npm install babel-loader babel-core babel-preset-env -D

npm i @babel/plugin-transform-runtime -D

npm i @babel/runtime -D

npm i @babel/core@^7.0.0 -D

npm i @babel/preset-env -D

npm i @babel/plugin-proposal-class-properties -D

npm i babel-loader @babel/core @babel/runtime @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime -D

---

 "@babel/core": "^7.4.5",
"@babel/plugin-proposal-class-properties": "^7.4.4",
"@babel/plugin-transform-runtime": "^7.4.4",
"@babel/preset-env": "^7.4.5",
"@babel/runtime": "^7.4.5",
"babel-loader": "^8.0.6",

另外配置也要修改 在.babelrc文件中 要配置成

{
	 "presets": ["@babel/preset-env"],
	"plugins": ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"]
}