webpack引入jquery的方法

6055 4 年前
在项目中有时需要引入jquery，这里把一些常见引入的方法汇总，以便后续查阅

准备

新建项目目录，然后执行命令生成package.json文件：

npm init -y

将package.json里scripts改为如下代码：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },

src为我们源代码目录，dist为打包后文件存放目录，node-modules为webpack以及项目所需要的依赖包目录。

搭建webpack开发环境以及安装其插件：执行如下命令：

npm i clean-webpack-plugin --save-dev

打包时清除以前打包的文件

npm i css-loader --save-dev

加载编译css的loader

npm i html-webpack-plugin --save-dev

打包后自动生成.html文件及在此文件自动引入js和css

npm i mini-css-extract-plugin --save-dev

将css从打包的js中分离出来，写入css文件中。

npm i webpack-dev-server --save-dev

webpack开发环境

npm i webpack webpack-cli --save-dev

webpack打包工具

npm i jquery --save

以npm的形式安装jquery

以上安装成功后，package.json会添加如下图的依赖字段

然后，我们在项目src目录下新建index.html和入口起点文件index.js。配置webpack.config.js

package.json

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^2.0.1",
    "css-loader": "^2.1.1",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  },
  "dependencies": {
    "jquery": "^3.3.1"
  }
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin =require('mini-css-extract-plugin');
const config = {
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    chunks: "initial",
                    name: "common",
                    minChunks: 2,
                    maxInitialRequests: 5,
                    minSize: 0
                }
            }
        }
    },
    entry: {
        index:"./src/index.js"
    },
    output: {
        path: path.resolve(__dirname,"dist"),
        filename: "[name].js",
        publicPath: "/",
        chunkFilename: "[name].chunk.js"
    },
    module: {
        rules: [
            {
                test:/\.css$/,
                use:[
                    {
                        loader:MiniCssExtractPlugin.loader,
                        options: {
                            publicPath:"/"
                        }
                    },
                    "css-loader"
                ]
            }
        ]
    },
    devServer: {
        contentBase: path.resolve(__dirname,'dist'),
        host:"localhost",
        port:8080,
        open: true,
        hot: true,
    },
    resolve:{
        alias: {
            cssPath:path.resolve(__dirname,'src/css'),
        }
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename:"[name].css",
            chunkFilename: "common.css"
        }),

        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            filename:"index.html",
            template:"./src/index.html",
            hash:true
        })
    ]
};
module.exports = config;

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入jquery</title>
</head>
<body>
<div>
    <button type="button" id="btn-alert" >点我 alert</button><br>
    <button type="button" id="btn-layer" >点我 layer</button>
</div>

执行npm run dev，浏览器自动打开http://localhost:8080/。运行成功。

使用 ProvidePlugin

ProvidePlugin是一个webpack插件，用于自动加载某一模块，当一个项目很多地方都使用同一模块时，这个插件可以省去多个地方写import/require。不过，他在引入第三方库时也非常有用。

在webpack.config.js里添加：const webpack = require('webpack');

然后在其Plugins字段里添加：

plugins: [
//...
	new webpack.ProvidePlugin({
		$: 'jquery',
		jQuery: 'jquery',
		'window.jQuery': 'jquery',
		'window.$': 'jquery',
	});
	]
//...

表示的意思是：当打包时遇到不能识别的$、jQuery、window.jQuery、window.$webpack就自动去加载jquery模块。

在src目录，我们新建一个sayHello.js的文件，代码如下：

$.fn.sayHello = function () {
    alert('Hello')
};

是一个简单的jquery插件。

在index.js文件里，编写如下代码

require('./sayHello.js');
$(function () {
    $("#btn-alert").click(function () {
        alert("alert弹出")
    });
    $('#btn-layer').click(function () {
        $(this).sayHello()
    });
});

执行npm run dev,分别点击按钮，正常运行。

使用 expose-loader

expose 寓意为：暴露，expose-loader为了解决一些不支持使用模块方式引入插件的问题，将这些插件导出的变量暴露为全局变量。

将上面我们使用ProvidePlugin插件引入的代码删除，然后执行：

$ npm install expose-loader --save-dev

在webpack.config.js的rules里添加如下代码：

{
    test: require.resolve('jquery'),
    use: [{
      loader: 'expose-loader',
      options: 'jQuery'
    },{
      loader: 'expose-loader',
      options: '$'
    }]
  }

require.resolve('jquery')表示在引入npm包中jquery时所用的规则。使用expose-loader把jQuery和$暴露为全局变量。

然后我们在index.js里使用如下方式引入jqury:

require("expose-loader?$!jquery");

index.js

require("expose-loader?$!jquery");
require('./sayHello');
$(function () {
    $("#btn-alert").click(function () {
        alert("alert弹出")
    });
    $('#btn-layer').click(function () {
        $(this).sayHello()
    });
});

测试，运行成功。

前面说到的两种方法比较适合于引入jquery的npm包，下面我们来看看对于页面直接使用<script>引入jquery的情况。

使用 externals

首先，把项目恢复到初始状态（删除expose-loader相关的设置），并且删除clean-webpack-plugin。

externals是webpack配置中的一项，用来将某个全局变量“伪装”成某个js模块的exports。配置如下：

externals: {
        jquery: 'jQuery'
    }

表示，这个里面的jquery是指require('jquery')中的jquery。webpack在打包的时候，不用将require('jquery')引入打依赖打包，而是在运行时，从外部取得jQuery来作为其依赖，例如import $ from 'jquery';当请求jquery时，就取外部的jQuery来作为导入到$。

然后我们在页面里直接引入jquery

<script src="http://www.tensweets.com/script/jquery-3.3.1.min.js"></script>

index.js

require('jquery');
require('./sayHello');
$(function () {
    $("#btn-alert").click(function () {
        alert("alert弹出")
    });
    $('#btn-layer').click(function () {
        $(this).sayHello()
    });
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入jquery</title>
</head>
<body>
<div>
    <button type="button" id="btn-alert" >点我 alert</button><br>
    <button type="button" id="btn-layer" >点我 layer</button>
</div>
<script src="http://www.tensweets.com/script/jquery-3.3.1.min.js"></script>
</body>
</html>

jquery.vendor

这里是另一种通过npm包引入jquery方式,新建一个jquery.vendor.js的文件，代码如下：

const $ = require('jquery');
window.$ = $;
window.jQuery = $;
module.exports = $;

然后在index.js文件里引入此文件 index.js

require('./jquery.vendor.js');
require('./sayHello');
$(function () {
    $("#btn-alert").click(function () {
        alert("alert弹出")
    });
    $('#btn-layer').click(function () {
        $(this).sayHello()
    });
});

不过，怎么看怎么low，跟expose-loader相似。

以上方式，我们能引入jquery（或npm包或页面加载jquery）以及用webpack来加载jQuery插件。

综上所述可以看除引入jquery，其实就是要保证我们的代码或插件能取到变量$、jQuery的值。jquery可以从外部或npm包载入，插件也如此，我们就以简单的内和外来区分吧。

1、 插件在内

  • jquery在内：使用ProvidePlugin，让webpack遇到代码和jquery插件中的$、jQuery变量就载入npm包中的jquery，确保了变量能找到值。也可以使用expose-loader,把从npm包中载入的jquery暴露为全局变量，从而确保变量能找到值。
  • jquery在外：页面加载了jquery后，全局会有$、jQuery变量，从而确保变量能找到值。这里似乎externals有点多事，externals可以根据外部依赖的类型可以将更深层次的数据“伪装”成某个js模块。

2、 插件在外

  • jquery在内：使用expose-loader把$、jQuery暴露为全局，不过，这里得注意引入插件与暴露全局的顺序。
  • jquery在外：使用expose-loader把$、jQuery暴露为全局，插件在jquery后面载入即可。
webpack 4 Code Splitting 抽取公有代码 splitChunks配置
webpack 配置之 输出文件 Output
分类栏目
最新文章
© 2018邮箱：11407215#qq.comGitHub沪ICP备12039518号-6