webpack 打包jquery和jquery插件

项目中有依赖jquery和jquery插件的情况，使用webpack加载这些包，让程序正常运行。

jquery

项目中重度依赖jquery，我们需要将jquery暴露给全局对象（self、window和global）。

使用expose-loader

可以使用expose-loader插件。

首先安装expose-loader：

npm install -D expose-loader

然后在webpack.config.js中：

module.exports = {
    module: {
        rules: [
            {
                test: require.resolve('jquery'),
                loader: 'expose-loader',
                options: {
                    exposes: ['$', 'jQuery'],
                }
            }
        ]
    }
}

这样我们可以在用到jquery的地方直接：

import $ from 'jquery';

使用ProvidePlugin

可以查看webpack插件文档：webpack ProvidePlugin

但是我们jquery很多地方使用，每个地方都写这个导入语句是很难受的，那么我们可以使用webpack.ProvidePlugin来将jquery自动加载。

module.exports = {
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            'window.$': 'jquery'
        })
    ]
}

这样可以不需要import语句，jquery是自动加载到全局的，我们可以直接使用：

$('div').text(33); // OK

jquery插件

解决了jquery，还有头疼的jquery插件。

jquery是$()，那么jquery插件是$().xxx()。也不能直接import，还得找解决方案。

可以使用imports-loader 插件

安装：

npm install -D imports-loader

然后在webpack.config.js：

module.exports = {
    module: {
        rules: [
            {
                test: /datatables\.net(?!.*[.]css$).*/,
                loader: 'imports-loader',
                options: {
                    // disable AMD for misbehaving libraries
                    additionalCode: 'var define = false;'
                }
            },
        ]
    }
}

因为很多模块在使用CommonJS前会进行define函数的检查，这里var define = false是为了禁用AMD。

然后我们在使用jquery插件的地方：

require('datatables.net');
// other code

这样可以正常运行。

---

老代码的升级很头疼，还得慢慢摸索。