學習webpack4 - 第三方庫的使用

時間 2019-12-10

標籤學習 webpack4 webpack 第三方使用简体版

原文原文鏈接

學習webpack4 - 基礎配置
 學習webpack4 - HTML處理
 學習webpack4 - 樣式處理
 學習webpack4 - ES6語法轉化
 學習webpack4 - 第三方模塊的使用
 學習webpack4 - 抽離公共代碼css

...持續中html

=======================================================jquery

第三方庫的使用

注意：開始以前如下內容以前，須要配置一些webpack的基礎配置，傳送門：學習webpack4.x - 基礎配置webpack

當前目錄：web

在項目中，常常會引用一些第三方模塊，好比jquery, lodash等，可是這些第三方模塊怎麼在webpack中配置呢？以jquery爲例子：npm

首先先安裝jquery：segmentfault

yarn add jquery

方法一：直接引用

打開src/index.js文件，輸入：ide

import $ from 'jquery';

console.log($);

嘗試運行：npm run dev，結果以下：性能

結果中會發現，已經引入完成了，在當前這個文件中能夠隨便使用jquery了。
可是這種方法是不能將jquery暴露到window全局的, 執行console.log(window.$)，結果是undefined，那麼怎麼暴露到window呢？以下：學習

方法二：暴露到window

將第三方庫暴露在全局能夠用expose-loader, 下面經過這個將jquery變成 $ 暴露到window:

step1：配置webpack.config.js文件：

// 模塊配置
module.exports = {
  module: {
    //...
    rules: [
      //...
      {
        test: require.resolve('jquery'),
        use: 'expose-loader?$'  //把jquery變成 $ 暴露到window
      }
    ]
  }
}

step2: 安裝expose-loader

yarn add expose-loader -D

嘗試運行：npm run dev, 這時候發現console.log(window.$)有值了！

以上兩種作法很麻煩，要import $ from 'jquery'這樣引入jquery, 那麼怎麼樣能在不一樣模塊直接使用 $ 而不引入jquery呢？以下：

方法三：模塊中注入

配置webpack.config.js文件：

let Webpack = require('webpack');

// 模塊配置
module.exports = {
 //...

 //插件配置
  plugins: [
    //...
    // 注入對象
    new Webpack.ProvidePlugin({
      '$': 'jquery' //把jquery變成 $ 注入到模塊
    })
  ]
}

只須要在webpack.config.js中這樣配置下插件，就能夠直接在須要用到jquery的模塊中使用$了，而不用再經過import引入jquery，可是這種方法不能暴露到window中哦。

方法四：html中直接引入

這種方法是經過html的script標籤，直接把第三方庫引入進來，不須要yarn add去安裝它，方法以下：

step1: 打開src/index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>丸子</title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <div>我經過script引入了一個jquery</div>
</body>
</html>

step2: 打開src/index.js，引入jquery

import $ from 'jquery';

console.log($)

step3: 配置webpack.config.js文件

module.exports = {
  //...
  //外部引入的，不要打包
  externals: {
    jquery: "$"
  }
  //...
}

這種方法中webpack.config.js中的externals的配置是告訴webpack，這個模塊是第三方模塊，不要打包進去，這樣能夠避免因打包進去而文件過大，形成資源浪費。一樣，這種方法也是能夠暴露給window的。

補充：noParse

當咱們在import/require模塊的時候，webpack會去解析這個模塊是否還導入了其餘依賴，可是有些庫是沒有其餘依賴的，好比jquery, 這時候若是再去解析它是否有其餘依賴就會很浪費性能，noParse的做用就是告訴webpack不用去解析某些模塊中的依賴，這樣會提高webpack打包速度。

module.exports = {
  //...
  //不去解析這些模塊中的依賴關係
  noParse: /jquery/
  //...
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。