我想让jquery自动拥有一些插件。在常规站点中,我只需按顺序包含jquery和脚本。我如何使用webpack实现这一目标?假设插件没有npm包,我只想从文件中加载它们。
答案 0 :(得分:2)
我将假设以下目录结构:
project |- app | |- vendor | | |- plugins | | | |- plugin-1.js | | | |- plugin-2.js | | | |- ... | | | | | |- jquery.js | | | |- jquery-with-plugins.js | |- main.js | |- js | |- bundle.js | |- webpack.config.js |- package.json ...
以下是关键文件的内容:
// app/jquery-with-plugins.js
require('vendor/jquery');
req = require.context('vendor/plugins', true, /\.js$/);
req.keys().forEach(function (plugin) {
req(plugin);
});
module.exports = jQuery;
// app/main.js
var $ = require('jquery');
$(function () {
$('.selector-1').use_plugin_1();
$('.selector-2').use_plugin_2();
});
// webpack.config.js
var path = require('path');
module.exports = {
context: path.join(__dirname, 'app'),
entry: './main',
output: {
path: path.join(__dirname, 'js'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
include: [
path.join(__dirname, 'app/vendor')
],
loader: 'script'
}
]
},
resolve: {
alias: {
'jquery$': path.join(__dirname, 'app/jquery_with_plugins'),
'vendor': path.join(__dirname, 'app/vendor')
}
},
extensions: ['', '.js']
};
// package.json
{
"name": "temp",
"version": "0.0.0",
"private": true,
"scripts": {
"build": "webpack --progress --colors"
},
"devDependencies": {
"node-libs-browser": "^0.5.0",
"script-loader": "^0.6.1",
"webpack": "^1.9.4"
}
}
app/vendor
目录中的每个JavaScript文件都已配置为使用script-loader加载,因此将在全局上下文中执行。在app/jquery-with-plugins.js
我首先加载jQuery
然后加载每个插件,直到我导出jQuery
( NB 我不必导出{{1}因为它已经全局曝光,但我认为从现在开始使用CommonJS模块会更好。)每个插件都已经附加到jQuery对象。
我已将别名jQuery
引用jquery
(请参阅app/jquery-with-plugins.js
配置),因此我可以通过简单地执行resolve.alias
来获取所有插件的jQuery 。更好的是,为了能够添加插件并立即使用它,您只需将其添加到require('jquery')
即可。 app/vendor/plugins
最后,通过运行app/main.js
,可以将所有内容捆绑到js/bundle.js
。