我不会将多个带有Webpack的库捆绑到index.js条目文件中。
现在,有些库始终会给出无法解决'jquery'错误,并且它们在代码顶部有一些共同点,如下所示:
...{"use strict";"function"==typeof define&&define.amd?define(["jquery"],a):"undefined"!=typeof exports?module.exports=a(require("jquery")):a(jQuery)}...
我尝试了以下Webpack配置:
externals: {
jquery: 'jQuery'
},
或
new webpack.ProvidePlugin({
jQuery: 'jquery'
$: 'jquery'
}),
即使我尝试使用import-loader和Exposure-loader。 同样在index.js文件中定义jQuery,例如:
window.$ = window.jQuery = require('jquery');
或
import {$,jQuery} from 'jquery'
Someonw知道这里发生了什么吗?
Webpack构建正常,路径正确等。 我还安装了jquery作为依赖项。
当前的webpack配置:
const path = require('path');
const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');
process.noDeprecation = true;
module.exports = () => {
return {
entry: ['@babel/polyfill', path.resolve(__dirname, '../build', 'index.js')],
output: {
path: path.resolve(__dirname, '../'),
filename: 'bundle.js'
},
externals: {
jquery: 'jQuery'
},
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: {
exclude: /node_modules/
}
}
]
}
]
},
optimization: {
minimizer: [
new TerserPlugin({
test: /\.js(\?.*)?$/i,
cache: true,
parallel: true,
sourceMap: true,
terserOptions: {
// ecma: 6,
// mangle: true,
output: {
comments: false
}
}
}),
],
runtimeChunk: false,
splitChunks: {
cacheGroups: {
default: false,
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor_app',
chunks: 'all',
minChunks: 2
}
}
}
},
plugins: [
new webpack.ProvidePlugin({
Cookies: require('js-cookie'),
_: require('lodash'),
jQuery: require('jquery'),
$: require('jquery')
}),
]
}
};