Webpack 4:使 Jquery 在整个网站上全局可用
Webpack 4: Make Jquery available globally across website
我想知道将 jQuery 全局包含到我的 Webpack 4 网站的最佳方式,性能。我 npm 安装了 jquery 并手动添加 jquery 到每个 js 文件使用:
import $ from "jquery";
我知道这不是正确的方法。我看过 CommonsChunkPlugin 似乎可以解决我的问题,但自 Webpack 4 以来它已经贬值了。现在是 SplitChunkPlugin 但文档很难包装我的头。
我很乐意像 CommonsChunkPlugin 那样缓存 jQuery,这样我就不必每次在我的网站上更改页面时都重新加载它。这是我的 Webpack 配置文件以防有帮助:
devServer: {
host: 'localhost',
port: 8080,
},
entry: {
homepage: "./src/scripts/homePage.js",
searchpage: "./src/scripts/searchPage.js",
estimation: "./src/scripts/estimation.js"
},
output: {
path: __dirname + "/dist/",
filename: "scripts/[name].bundle.js",
library: '[name]',
libraryTarget: 'var',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /Node.modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true}
}
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: "file-loader",
}
]
},
{
test: /\.s?css$/,
use: [
"style-loader",
"css-loader",
"sass-loader"
]
},
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/html/index.html",
filename: "./index.html",
inject: 'head',
chunks : ['homepage'],
inlineSource: '.(js|css)$'
}),
new HtmlWebpackInlineSourcePlugin(),
new HtmlWebPackPlugin({
template: "./src/html/estimation.html",
filename: "./estimation.html",
inject:'head',
chunks : ['estimation'],
}),
new HtmlWebPackPlugin({
template: "./src/html/contact.html",
filename: "./contact.html"
}),
new HtmlWebPackPlugin({
template: "./src/html/searchpage.html",
filename: "./searchpage.html",
inject: 'head',
chunks : ['searchpage'],
}),
new HtmlWebPackPlugin({
template: "./src/html/favorites.html",
filename: "./favorites.html"
}),
new MiniCssExtractPlugin({
filename:"[name].css",
chunkFilename:"[id].css"
})
]
}```
我解决了我自己的问题哈哈。
答案是使用 webpack ProvidePlugin
这是 link : ProvidePlugin
您将其添加到 webpack.config 文件的插件部分,如下所示:
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
"window.jQuery": "jquery",
}),
]
它将使 jquery $ 变量在您的项目中可用,因此您不必从头导入它。方便的是,如果您有其他使用 Jquery 的库(例如 Bootstrap),它也可用于这些库。所以你不会得到 $ 未定义的错误!
如果我没记错的话,jquery 会自动缓存在浏览器中,所以大多数时候当用户进入该网站时,它已经在他的浏览器中缓存了 jquery,因为他可能使用 jquery 访问了其他网站。
这清除了我问题的另一部分。
我想知道将 jQuery 全局包含到我的 Webpack 4 网站的最佳方式,性能。我 npm 安装了 jquery 并手动添加 jquery 到每个 js 文件使用:
import $ from "jquery";
我知道这不是正确的方法。我看过 CommonsChunkPlugin 似乎可以解决我的问题,但自 Webpack 4 以来它已经贬值了。现在是 SplitChunkPlugin 但文档很难包装我的头。
我很乐意像 CommonsChunkPlugin 那样缓存 jQuery,这样我就不必每次在我的网站上更改页面时都重新加载它。这是我的 Webpack 配置文件以防有帮助:
devServer: {
host: 'localhost',
port: 8080,
},
entry: {
homepage: "./src/scripts/homePage.js",
searchpage: "./src/scripts/searchPage.js",
estimation: "./src/scripts/estimation.js"
},
output: {
path: __dirname + "/dist/",
filename: "scripts/[name].bundle.js",
library: '[name]',
libraryTarget: 'var',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /Node.modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true}
}
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: "file-loader",
}
]
},
{
test: /\.s?css$/,
use: [
"style-loader",
"css-loader",
"sass-loader"
]
},
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/html/index.html",
filename: "./index.html",
inject: 'head',
chunks : ['homepage'],
inlineSource: '.(js|css)$'
}),
new HtmlWebpackInlineSourcePlugin(),
new HtmlWebPackPlugin({
template: "./src/html/estimation.html",
filename: "./estimation.html",
inject:'head',
chunks : ['estimation'],
}),
new HtmlWebPackPlugin({
template: "./src/html/contact.html",
filename: "./contact.html"
}),
new HtmlWebPackPlugin({
template: "./src/html/searchpage.html",
filename: "./searchpage.html",
inject: 'head',
chunks : ['searchpage'],
}),
new HtmlWebPackPlugin({
template: "./src/html/favorites.html",
filename: "./favorites.html"
}),
new MiniCssExtractPlugin({
filename:"[name].css",
chunkFilename:"[id].css"
})
]
}```
我解决了我自己的问题哈哈。
答案是使用 webpack ProvidePlugin 这是 link : ProvidePlugin 您将其添加到 webpack.config 文件的插件部分,如下所示:
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
"window.jQuery": "jquery",
}),
]
它将使 jquery $ 变量在您的项目中可用,因此您不必从头导入它。方便的是,如果您有其他使用 Jquery 的库(例如 Bootstrap),它也可用于这些库。所以你不会得到 $ 未定义的错误!
如果我没记错的话,jquery 会自动缓存在浏览器中,所以大多数时候当用户进入该网站时,它已经在他的浏览器中缓存了 jquery,因为他可能使用 jquery 访问了其他网站。 这清除了我问题的另一部分。