-
-
Notifications
You must be signed in to change notification settings - Fork 8.8k
Exposing Handlebars #18465
Replies: 1 comment · 4 replies
-
Sorry without example I can't help |
Beta Was this translation helpful? Give feedback.
All reactions
-
👀 1
-
Oh, I'm sorry. I thought that only the Here you have the full configuration in case this brings more insights (click to expand):const globImporter = require('node-sass-glob-importer');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const path = require('path');
module.exports = function (env, argv) {
const mode = argv.mode || 'development';
return {
mode: mode,
devtool: mode === 'development' ? 'source-map' : false,
entry: {
application: {
import: './source/scripts/application.js',
dependOn: ['jquery', 'handlebars']
},
only_form: './source/scripts/only_form.js',
modernizr: './source/scripts/modernizr-3.6.0.js',
jquery: './source/scripts/jquery-3.7.1.js',
sticky: './source/scripts/sticky.min.js',
fontdetect: './source/scripts/fontdetect.js',
plugins: './source/scripts/plugins.js',
waypoints: './source/scripts/waypoints.min.js',
counterup: './source/scripts/jquery.counterup.min.js',
application_css: './source/content/application.css.sass',
only_form_css: './source/content/only_form.css.sass',
print_only_form_css: './source/content/print_only_form.css.sass',
modules_css: './source/content/modules.css.sass',
print_css: './source/content/print.css.sass',
},
output: {
path: path.resolve(__dirname, '.tmp/dist'),
publicPath: '/',
filename: 'scripts/[name].js',
},
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: 'sass-loader',
options: {
sassOptions: {
importer: globImporter(),
includePaths: require('bourbon').includePaths,
},
},
},
],
},
{
test: /\.(png|jpe?g|gif|svg)$/,
type: 'asset/resource',
generator: {
filename: 'content/images/[name][ext]'
}
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
type: 'asset/resource',
generator: {
filename: 'content/fonts/[name][ext]'
}
},
{
test: require.resolve("jquery"),
loader: "expose-loader",
options: {
exposes: [
{
globalName: "$",
override: true
},
{
globalName: "jQuery",
override: true
}
],
},
},
{
test: require.resolve("handlebars"),
loader: "expose-loader",
options: {
exposes: [
{
globalName: "Handlebars",
override: true
}
]
},
},
{
test: require.resolve('./source/scripts/application.js'),
use: [
{
loader: 'expose-loader',
options: {
exposes: {
globalName: 'Internal',
moduleLocalName: 'Internal',
},
},
},
],
}
],
},
plugins: [
new CopyWebpackPlugin({
patterns: [{
from: 'source/content',
to: 'content',
globOptions: {
ignore: [
'**/_remodal.css',
'**/*.eot',
'**/*.gif',
'**/*.ico',
'**/*.jpg',
'**/*.png',
'**/*.sass',
'**/*.scss',
'**/*.svg',
'**/*.ttf',
'**/*.woff',
'**/cookieconsent.css',
'**/fonts/**',
'**/images/**',
'**/modules.css',
'**/only_form.css',
'**/print_only_form.css',
'**/print.css',
'**/slick.css',
]
}
}]
}),
new MiniCssExtractPlugin({
filename: (chunkData) => ({ chunk }) => {
return `content/${chunk.name.replace('_css', '.css')}`;
},
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"window.$": "jquery",
Handlebars: 'handlebars',
"window.Handlebars": 'handlebars',
Placeholders: 'placeholder',
root: 'window',
"$.deparam": 'deparam',
}),
],
optimization: {
minimize: mode === 'production',
minimizer: [
new OptimizeCssAssetsPlugin(),
new TerserPlugin({
extractComments: false,
}),
],
},
}
}; PS: This configuration also has other issues, like empty |
Beta Was this translation helpful? Give feedback.
All reactions
-
I also asked this now on StackOverflow in case anyone would rather gain sone StackOverflow reputation with providing a solution. |
Beta Was this translation helpful? Give feedback.
All reactions
-
Can you clarify what doesn't work? |
Beta Was this translation helpful? Give feedback.
All reactions
-
Sure, exposing Handlebars doesn't work. But jQuery works. |
Beta Was this translation helpful? Give feedback.
-
I want to expose jQuery and Handlebars to be accessible from the outside.
So I added
expose-loader
and the following module rules in the webpack config:and while this works perfectly for jQuery, it doesn't seem to work for Handlebars at all.
I'm not getting any error messages.
It's just not exposed.
What am I missing here?
Beta Was this translation helpful? Give feedback.
All reactions