I use webpack and babbel for my js files in my wordpress website.
I need help because, my css files are correctly charged by wordpress but not my js files and I don’t know why.
The compilation works, the paths of the files are correct, it’s just wordpress that doesn’t load the js files.
Here my webpack.config.js :
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
entry: {
main: './src/index.js',
bootstrap: './node_modules/bootstrap/dist/js/bootstrap.min.js',
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
},
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'style.css'
})
]
};
Here the code in functions.php :
function theme_scripts() {
// styles
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/node_modules/bootstrap/dist/css/bootstrap.min.css' );
wp_enqueue_style( 'theme-style', get_template_directory_uri() . '/dist/style.css', ['bootstrap'] );
// js
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'main', get_template_directory_uri() . '/dist/main.js', ['jquery'], wp_get_theme()->get('Version'), true );
wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/dist/bootstrap.js', ['jquery', 'main'], wp_get_theme()->get('Version'), true );
}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
There are no errors in console and the files are not in “network” in my browser.