学习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/
  //...
}