我有一个index.js
文件,其中有一个简单的console.log()
,并且没有在浏览器中注册。我还注意到引导程序没有运行---我几乎可以肯定这两个事件是相关的,但是我不确定如何正确诊断问题。我尝试过移动代码,更改路径,寻找缺少的逗号等,但无济于事。
我正在使用webpack.config.js
编译文件,并且据我所知我的代码已正确编译。
对此有何想法?
import 'jquery';
import "./SiteAssets/scripts/addRow.js";
import "./RecruitmentTracking.css";
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
import 'jquery-ui-bundle/jquery-ui.min.js';
console.log('this is index.js');
const root = document.createElement("div")
root.innerHTML = `<p>Hello Webpack.</p>`
document.body.appendChild(root)
const path = require('path')
const webpack = require('webpack');
// const babel = require("@babel/core");
const HtmlWebpackPlugin = require('html-webpack-plugin')
var $ = require("jquery");
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'RecruitmentTracking.txt',
inject: 'body'
});
module.exports = {
entry: "./src/index.js", // "compile code in our entry point"
output: {
filename: 'bundle.js', // output a bundle in /dist"
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.css$/,
use: ['style-loader', 'css-loader']
}, {
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
],
},
devServer: {
disableHostCheck: true
},
devtool: 'cheap-module-eval-source-map', // this helps to browser to point to the exact file in the console, helps in debug
devServer: {
contentBase: path.join(__dirname, 'src'),
historyApiFallback: true // this prevents the default browser full page refresh on form submission and link change
},
plugins: [
HtmlWebpackPluginConfig,
new webpack.ProvidePlugin({
"$": "jquery",
"jQuery": "jquery",
"window.jQuery": "jquery"
})
],
}
"scripts": {
"build": "webpack --mode production",
"dev-server": "webpack-dev-server",
"develop": "webpack --mode development --watch",
"start": "webpack-dev-server --open --mode development"
},