After I add arcgis-webpack-plugin to web pack, when The page is loading I got an error "jQuery: Module not found ", if I removed arcgis-webpack-plugin, the page is loaded properly. Here's my webpack config:
module.exports = {
target: 'web', // <=== can be omitted as default is 'web'
mode: 'development',
entry: {
main: ["./css/aqhi.scss", "./Scripts/main.ts"]
},
output: {
path: path.resolve(__dirname, 'dist')
},
resolve: {
modules: [
path.resolve(__dirname, "/Scripts"),
path.resolve(__dirname, "node_modules/")
],
extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js'],
alias: {
// Force all modules to use the same jquery version.
'jquery': path.join(__dirname, 'node_modules/jquery/src/jquery'),
'moment': path.join(__dirname, 'node_modules/moment/moment.js'),
'datetimepicker': path.join(__dirname, 'node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js')
}
},
plugins: [
new CleanWebpackPlugin(["dist"]),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"jquery": "jquery",
"windows.jQuery": "jquery",
moment: "moment"
}),
new ArcGISPlugin(),
],
module: {
rules: [{
test: /\.s?css$/,
use: [{
// Adds CSS to the DOM by injecting a `<style>` tag
loader: 'style-loader'
},
{
// Interprets `@import` and `url()` like `import/require()` and will resolve them
loader: 'css-loader'
},
{
// Loader for webpack to process CSS with PostCSS
loader: 'postcss-loader',
options: {
plugins: function() {
return [
require('autoprefixer')
];
}
}
},
{
// Loads a SASS/SCSS file and compiles it to CSS
loader: 'sass-loader'
}
]
},
{
test: /\.tsx?$/,
loader: "ts-loader",
options: {
transpileOnly: true
}
},
{
test: /\.(png|jpg|ttf|eot|woff|woff2|svg)$/,
loader: 'url-loader?limit=10000'
},
{
test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
use: 'file-loader',
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
'file-loader?name=images/[name].[ext]',
'image-webpack-loader?bypassOnDebug'
]
},
{ // font-awesome
test: /font-awesome\.config\.js/,
use: [{
loader: 'style-loader'
},
{
loader: 'font-awesome-loader'
}
]
}
]
}
};
