Хочу минифицировать файлы, подключить модули и тд через webpack для темы WordPress.
Как сделать чтобы они видели друг друга, например минифицированный скрипт для подвала и для хедера?
Мой webpack.config.js:
const path = require('path')
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')
module.exports = {
mode: 'production',
//Входной файл
entry: {
topScripts: './webpackTopScripts.js',
bottomScripts: './webpackBottomScripts.js',
},
//Где лежат исходники
context: path.resolve(__dirname, "assets"),
//Куда складываем
output: {
filename: '[name].min.js',
path: path.resolve(__dirname, "assets/min/js")
},
plugins:[
new MiniCssExtractPlugin({
filename: '../css/style.min.css',
}),
new CleanWebpackPlugin(),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
],
},
{
test: /\.(png|jpg|jpeg|svg|gif)$/,
use: ['url-loader']
},
{
test: /\.(ttf|woff|woff2|eot)/,
use: ['url-loader'],
},
{ test: /\.(js)$/, use: 'babel-loader' }
]
},
optimization: {
minimize: true,
minimizer: [
new CssMinimizerPlugin(),
new TerserWebpackPlugin()
],
},
}
Файлы webpackTopScripts и webpackBottomScripts на выходе не видят скрипты друг друга, например если в первом подключена JQ то во втором файле он уже этого не видит..