vue學(xué)習(xí)基礎(chǔ)之webpack

webpack的安裝方式

全局安裝：npm install webpack -g
項(xiàng)目安裝：npm install webpack --save-dev

webpack構(gòu)建的過(guò)程

• 1. webpack .\src\main.js .\dist\bundle.js (不推薦使用)挣棕，bundle.js文件是構(gòu)建后的坷牛，可以直接在頁(yè)面中引用蕴侣。

• 2. 通過(guò)webpack命令，然后配置webpack.config.js的方式

     自動(dòng)編譯生成的文件可以通過(guò)配置直接打包編譯并保存到項(xiàng)目的指定目錄中
     直接通過(guò)webpack命令進(jìn)行構(gòu)建的時(shí)候乳讥，會(huì)通過(guò)根目錄下面的webpack.config.js配置文件中獲取構(gòu)建的相關(guān)信息

• 3. 使用webpack-dev-server工具，實(shí)現(xiàn)自動(dòng)打包編譯功能

     npm install webpack-dev-server -D -D是開(kāi)發(fā)環(huán)境
     安裝完成之后活合，和webpack的用法完全一樣
     由于是在開(kāi)發(fā)環(huán)境（本地）安裝的webpack-dev-server雏婶，所以，無(wú)法直接在命令行中使用白指，只有安裝到全局的（-g）才能直接在終端中使用

     注意： 如果webpack-dev-server工具想要正常運(yùn)行留晚，需要在本地種安裝webpack

     webpack-dev-server 幫我們打包生成的bundle.js并沒(méi)有存放到物理磁盤(pán)上，而是直接托管到了電腦的內(nèi)存中，所以我們?cè)陧?xiàng)目的根目錄中找不到該文件（<script src="/bundle.js"></script>）错维。
     可以認(rèn)為webpack-dev-server 把打包好的文件以一種虛擬的方式托管到項(xiàng)目的根目錄中奖地，雖然看不到，但是可以認(rèn)為和dist赋焕，src目錄平級(jí)参歹。

• 4. webpack-dev-server 的命令參數(shù)： --open --port 8081 --contentBase src --hot

     --open 啟動(dòng)直接打開(kāi)瀏覽器
     --port 8081 指定端口
     --contentBase src 指定根項(xiàng)目根目錄
     --hot 熱更新

• 5. html-webpack-plugin插件。
     npm install html-webpack-plugin -D 隆判。 可以將頁(yè)面生成到內(nèi)存中

     作用1：自動(dòng)在內(nèi)存中根據(jù)指定的頁(yè)面生成一個(gè)內(nèi)存頁(yè)面
     作用2：自動(dòng)把打包好的js文件（bundle.js）追加到頁(yè)面中

上述構(gòu)建配置文件(webpack.config.js)代碼如下：

/* jshint esversion: 6 */

const path = require("path");
const webpack = require("webpack");
const htmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
   entry: path.join(__dirname, "./src/main.js"),
   output: {
       path: path.join(__dirname, "./dist"),
       filename: "bundle.js"
   },
   devServer: {
       open: true,
       port: 8081,
       contentBase: 'src',
       hot: true
   },
   plugins: [ // 配置插件
       new webpack.HotModuleReplacementPlugin(), // devServer中的hot設(shè)置為true的時(shí)候犬庇，需要配置此插件
       new htmlWebpackPlugin({ // 創(chuàng)建一個(gè)在內(nèi)存中生成html頁(yè)面的插件
           template: path.join(__dirname, "./src/index.html"),
           filename: "index.html"
       })
   ],
   module: {
       rules: [

       ]
   }

};

webpack加載第三方模塊(loader)

• 導(dǎo)入css文件。webpack默認(rèn)只能打包處理js類(lèi)型的文件侨嘀，無(wú)法處理其他非js類(lèi)型的文件臭挽，如果要處理非js類(lèi)型的文件，需要安裝合適的第三方的加載器(loader)

  如果要打包處理css文件咬腕，需要安裝 npm install style-loader css-loader -D 工具
  打開(kāi)webpack.config.js文件欢峰，新增一個(gè)配置節(jié)點(diǎn)，叫做module涨共，他是一個(gè)對(duì)象纽帖，在這個(gè)對(duì)象上有一個(gè)rules屬性，這個(gè)rules屬性是一個(gè)數(shù)組举反，這個(gè)數(shù)組中存放了所有第三方文件的匹配和處理規(guī)則

  {
      test: /\.css$/,
      use: ['style-loader', "css-loader"]
  }
  

• less加載器

  首先安裝： npm install less-loader -D懊直， 在安裝less： npm install less -D

  {
      test: /\.less$/,
      use: ['style-loader', "css-loader", 'less-loader']
  }
  

• scss加載器

  首先安裝： npm install sass-loader -D， 然后安裝node-sass: cnpm install node-sass -D
  這里用npm不好安裝照筑，所以用cnpm

  {
      test: /\.scss$/,
      use: ['style-loader', "css-loader", 'sass-loader']
  }
  

• url-loader

  默認(rèn)情況下吹截， webpack是無(wú)法處理css文件中的url地址的，不管是圖片還是字體庫(kù)凝危，只要是url地址都無(wú)法處理波俄。
  需要第三方的loader來(lái)處理。安裝命令： cnpm install url-loader file-loader -D蛾默，然后配置module

  {
      test: /\.(jpg|png|gif)$/,
      use: [{
          loader: 'url-loader',
          options: {
              limit: 8192 // limit參數(shù)表示在解析url指定的圖片文件的時(shí)候懦铺，是否轉(zhuǎn)換為base64格式，超過(guò)的不轉(zhuǎn)換
          }
      }, ]
  }, {
      test: /\.(tff|eot|svg|woff|woff2)$/,
      use: 'url-loader'
  }
  

• webpack處理第三方模塊的過(guò)程：

  1. 如果發(fā)現(xiàn)要處理的文件不是js文件支鸡，然后就去配置文件（webpack.config.js）中尋找module中rules規(guī)則冬念。（loader規(guī)則）
  2. 如果能找到對(duì)應(yīng)的規(guī)則，就會(huì)調(diào)用對(duì)應(yīng)的規(guī)則（loader）處理這種文件類(lèi)型
  3. 在調(diào)用loader的時(shí)候牧挣，是從rules的數(shù)組中從后往前調(diào)用急前，后一個(gè)調(diào)用完成之后再交給前一個(gè)loader進(jìn)行處理
  4. 當(dāng)前最后一個(gè)loader調(diào)用完畢之后，會(huì)把處理的結(jié)果交給webpack瀑构，打包合并輸出裆针。

webpack處理ES6語(yǔ)法

在webpack中只能處理一部分ES6的語(yǔ)法，一些更高級(jí)ES6或者ES7語(yǔ)法，webpack是無(wú)法處理的世吨。這時(shí)候就需要借助于第三方的loader來(lái)幫組webpack處理這些高級(jí)的語(yǔ)法澡刹，當(dāng)?shù)谌絣oader把高級(jí)的語(yǔ)法轉(zhuǎn)換為低級(jí)的語(yǔ)法之后會(huì)交給webpack打包。通過(guò)babel可以幫助把高級(jí)的語(yǔ)法轉(zhuǎn)換為低級(jí)的語(yǔ)法耘婚。

包安裝:

第一套包： cnpm install babel-core babel-loader babel-plugin-transform-runtime -D
第二套包： cnpm install babel-preset-env babel-preset-stage-0 -D
說(shuō)明：第一套包為babel的轉(zhuǎn)換工具罢浇，第二套包為babel的語(yǔ)法，第一套包只負(fù)責(zé)轉(zhuǎn)換沐祷，是轉(zhuǎn)換器嚷闭，但不知道對(duì)應(yīng)關(guān)系，第二套包只負(fù)責(zé)對(duì)應(yīng)關(guān)系戈轿！

注意：直接采用上述方法安裝會(huì)出現(xiàn)問(wèn)題凌受，具體方案參見(jiàn)下方的問(wèn)題

配置:

第一步： 打開(kāi)webpack.config.js文件，在module節(jié)點(diǎn)下的rules中添加一個(gè)新的匹配規(guī)則：`{ test: /.js$/, use: 'babel-loader' , exclude: /node_modules/ }

注意：在配置babel的loader的時(shí)候思杯，必須吧node_modules目錄通過(guò)exclude選項(xiàng)排除。如果不排除挠进，則babel會(huì)把node_modules中所有的js文件都打包編譯色乾，這樣會(huì)非常消耗資源，打包非常慢领突。另一方面暖璧，即便是轉(zhuǎn)換了node_modules中的js文件，項(xiàng)目也無(wú)法運(yùn)行君旦。

第二步： 在項(xiàng)目的根目錄中新建 .babelrc 的配置文件澎办，這個(gè)配置文件屬于JSON格式，所以在配置的時(shí)候金砍，必須遵守JSON的語(yǔ)法規(guī)范局蚀。比如說(shuō)，不能寫(xiě)注釋恕稠。

第三步： 在.babelrc中配置如下：（presets：語(yǔ)法）

{
    "presets": ['env', 'stage-0'],
    "plugins": ['transform-runtime'] 
}

問(wèn)題

測(cè)試的時(shí)候直接通過(guò)上述命令安裝獲取的版本號(hào)：
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
實(shí)際未通過(guò)測(cè)試＠派稹！
并且在安裝的時(shí)候出現(xiàn)以下警告：

npm WARN babel-loader@8.0.5 requires a peer of @babel/core@^7.0.0 but none is installed.

babel-loader@8.x是webpack用于Babel 7.x的一個(gè)整合loader模塊鹅巍，Babel 7.x已經(jīng)把所有的相關(guān)的包從babel-遷移到了@babel的npm環(huán)境倉(cāng)庫(kù)千扶。
所以上述警告是合適的，你可以通過(guò)使用@babel/core代替babel-core來(lái)安裝:

npm i @babel/core -D

總結(jié)如下：

• 如果你希望安裝Babel 6.x骆捧，你可以使用下面的命令：

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

• 如果你想使用Babel 7澎羞，理論上你可以使用下面的命令安裝：

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