Если это важно, я работаю над расширением chrome (возможно, у него есть некоторые ограничения или отдельные аспекты, я не знаю). Сначала я использовал jquery только в контенте. js указал это в манифесте. json. Но теперь я хочу использовать его и во всплывающем окне. js тоже. Указанный jquery в "content_scripts" не предоставляет его для всплывающих окон. Что мне делать, чтобы добавить JQuery как отдельный модуль для пакета Webpack?
Я нашел это:
new webpack.ProvidePlugin(
{
$ : "jquery/dist/jquery.min.js",
jQuery : "jquery/dist/jquery.min.js",
"window.jQuery" : "jquery/dist/jquery.min.js"
}),
и он работает, но вставляет jquery в каждый файл, который использует это. И js файлы становятся такими "жирными". Webpack говорит:
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
Это может повлиять на производительность сети.
Вот мой полный webpack.config.js:
'use strict';
const dev = 'development';
const prod = 'production';
const NODE_ENV = process.env.NODE_ENV || prod;
const baseManifest = require('./Source/manifest.json');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');
const JavaScriptObfuscator = require('webpack-obfuscator');
const CopyPlugin = require('copy-webpack-plugin');
const WebpackExtensionManifestPlugin = require('webpack-extension-manifest-plugin');
module.exports =
{
mode: prod,
watch: NODE_ENV === dev,
watchOptions:
{
aggregateTimeout: 100
},
devtool: NODE_ENV === dev ? 'eval' : false,
context: __dirname + '/Source',
entry:
{
content : './js/content.js',
background : './js/background.js',
popup : './js/popup.js'
},
output:
{
path : __dirname + '/build',
filename : 'js/[name].js'
},
optimization:
{
splitChunks:
{
automaticNameDelimiter : '~',
chunks : 'async',
minChunks : 2,
maxAsyncRequests : 6,
maxInitialRequests : 4,
minSize : 30000,
maxSize : 0,
name : true,
cacheGroups:
{
default:
{
priority : -10,
reuseExistingChunk : true
}
}
},
minimize: true,
minimizer:
[
new UglifyJsPlugin(
{
parallel: true,
uglifyOptions:
{
output:
{
comments: false
}
}
})
]
},
plugins:
[
new webpack.NoEmitOnErrorsPlugin(),
new webpack.DefinePlugin(
{
NODE_ENV: JSON.stringify(NODE_ENV)
}),
new webpack.ProvidePlugin(
{
$ : "jquery/dist/jquery.min.js",
jQuery : "jquery/dist/jquery.min.js",
"window.jQuery" : "jquery/dist/jquery.min.js"
}),
new CopyPlugin(
[
{
from : './public/js',
to : 'public/js'
},
{
from : './_locales',
to : '_locales'
}
]),
new HtmlWebpackPlugin(
{
filename: 'popup.html',
template: './popup.html',
chunks: ['popup']
}),
new WebpackExtensionManifestPlugin(
{
config: { base: baseManifest }
}),
new JavaScriptObfuscator(
{
compact : true,
controlFlowFlattening : true,
controlFlowFlatteningThreshold : 0.75,
deadCodeInjection : true,
deadCodeInjectionThreshold : 0.5,
debugProtection : true,
debugProtectionInterval : true,
disableConsoleOutput : true,
identifierNamesGenerator : 'hexadecimal',
log : false,
renameGlobals : false,
rotateStringArray : true,
seed : new Date().getMilliseconds(),
selfDefending : false,
shuffleStringArray : true,
stringArray : true,
stringArrayEncoding : 'base64',
stringArrayThreshold : 0.8,
target : 'browser-no-eval',
transformObjectKeys : true,
unicodeEscapeSequence : false
},
['jquery.min.js', 'buy.js'])
],
module:
{
rules:
[
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use:
{
loader: 'babel-loader',
options:
{
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-transform-runtime']
}
}
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
},
{
test: /\.(png|jpe?g|svg|ttf|oet|woff|woff2)$/,
loader: 'file-loader',
options:
{
name: '[path][name].[ext]'
}
}
]
}
};