I have as simple environment where I am using Webpack and ES6(Babel) to create a JavaScript Bundle. I do not have Jquery as a dependency(package.json), I am not requiring it or importing it anywhere. I am not sure how I have access to $ in my chrome developer console. Screenshot from chrome
However when I try to do console.log($) from the webpage code it show me an error as shown in image above.(index:23)
I am confuse what's going on. here is my package.json (not sure if any other library is including jquery )
Here is the index.html where my bundle is getting injected
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title> Widget</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
</head>
<body>
<h1> Would you look at this awesome page</h1>
<div id="app">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</body>
<script>
setTimeout(console.log($),5000);
</script>
</html>Here is my webpack.babel.js
/**
* Created by desaim on 7/10/2017.
*/
import webpack from 'webpack';
import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/src/index.html',
filename: 'index.html',
inject: 'body'
});
const PATHS = {
app: path.join(__dirname,'src'),
build: path.join(__dirname,'dist')
};
const LAUNCH_COMMAND = process.env.npm_lifecycle_event;
const isProduction = LAUNCH_COMMAND === 'production';
process.env.BABEL_ENV = LAUNCH_COMMAND;
const productionPlugin = new webpack.DefinePlugin({
'process.env':{
NODE_ENV:JSON.stringify('production')
}
});
const base = {
entry: [
PATHS.app
],
output: {
path: PATHS.build,
filename: "index_bundle.js",
publicPath:'/'
},
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"},
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: 'file-loader'
},
{
test: /\.(ttf|woff|woff2|otf)$/,
use: 'file-loader?prefix=font/&limit=5000'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: 'url-loader?limit=10000&mimetype=image/svg+xml'
},
{
test: /\.(?:(?:pn|jpe?)g|gif)$/,
use: 'url-loader?limit=8192'
}
]
},
};
const developmentConfig = {
devtool:'cheap-module-inline-source-map',
devServer: {
contentBase: PATHS.build,
hot: true,
inline: true,
historyApiFallback:true
},
plugins: [HTMLWebpackPluginConfig, new webpack.HotModuleReplacementPlugin()]
};
const productionConfig = {
devtool:'cheap-module-source-map',
plugins: [HTMLWebpackPluginConfig,productionPlugin]
};
export default Object.assign({},base,
isProduction === true ? productionConfig : developmentConfig
)The console.log in setimeout is failing
