I have an old project that use to load js.
And js file load on global var
such as
index.html
<head>
<script src="Foo.js"></script>
<script src="Bar.js"></script>
</head>
Foo.js
var Foo = function(some_var){
//DO SOMETHING
}
var foo_text = 'HELLO WORLD'
Bar.js
var result = Foo(foo_text)
It works fine
Now I use Webpack to build Foo.js and Bar.js into one js file,but modules cant execute on Global scope
So it will get function Foo is undefined error
This is my webpack.config.ts
import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import { Configuration, IgnorePlugin, ProvidePlugin } from 'webpack';
import { Configuration as DevConfig } from "webpack-dev-server"
const isProduction = process.env.NODE_ENV == 'production';
const config: Configuration & DevConfig = {
entry: './src/index.ts',
output: {
path: path.resolve(__dirname, 'dist'),
},
devServer: {
open: true,
host: 'localhost',
},
// devtool: false,
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html',
}),
// ignore require function
new IgnorePlugin({
'checkResource': (r, c) => {
if (c.endsWith('js')) {
return true
}
return false
}
}),
// new ProvidePlugin({
// }),
],
module: {
rules: [
{
test: /.(ts|tsx)$/i,
loader: 'ts-loader',
exclude: ['/node_modules/'],
},
{
test: /.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
type: 'asset',
},
{
// include: path.resolve(__dirname, 'src/js'),
resourceQuery: path.resolve(__dirname, 'src/js'),
type: 'javascript/auto'
// type: 'asset'
// use: []
}
// Add your rules for custom modules here
// Learn more about loaders from https://webpack.js.org/loaders/
],
},
resolve: {
extensions: ['.tsx', '.ts', '.jsx', '.js', '...']
},
};
export default () => {
if (isProduction) {
config.mode = 'production';
} else {
config.mode = 'development';
}
return config;
};
How to resolve it?
My Project is Webpack 5
i tried script-loader ,but repo not support now
Many variables are defined in Foo.js, so I can’t export them all
Foo.js and Bar.js on single file and Foo is in global var
