When I change my app.js and main.css while webpack-dev-server is running, the bundle is updated.
But when i change the index.html the content is not refreshed; if I add a line to the HTML, the webpack-dev-server does not refresh anything on the page.
Here are my webpack.config.js and package.json files.
I hope you can help me.
webpack.config.js:
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var chalk = require('chalk');
var env = process.env.WEBPACK_ENV;
var host = 'localhost';
var port = '8080';
var config = {
devtool: 'source-map',
entry: [
'webpack/hot/dev-server',
'webpack-dev-server/client?http://' + host + ':' + port +'/',
'./src/app.js'
],
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
},
module : {
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.html$/,loader: 'file?name=[name].[ext]' }
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new CleanWebpackPlugin(['dist'], {
root: __dirname,
verbose: true,
dry: false
})
]
};
if (env === 'dev') {
new WebpackDevServer(webpack(config), {
contentBase: './dist/',
stats: {colors: true},
hot: true,
debug: true
}).listen(port, host, function (err, result) {
if (err) {
console.log(err);
}
});
console.log('-------------------------');
console.log(chalk.bold.white('Local web server runs at ') + chalk.green('http://' + host + ':' + port));
console.log('-------------------------\n\n');
}
module.exports = config;
package.json:
{
"name": "webpack-skeleton",
"version": "1.0.0",
"description": "webpack skeleton",
"main": "bundle.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "WEBPACK_ENV=dev ./node_modules/.bin/webpack --watch --inline"
},
"author": "Jose Roa",
"license": "ISC",
"devDependencies": {
"chalk": "^1.1.3",
"clean-webpack-plugin": "^0.1.9",
"css-loader": "^0.23.1",
"file-loader": "^0.8.5",
"style-loader": "^0.13.1",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1"
}
}
My directory structure:
css
main.css
dist
bundle.js
bundle.js.map
index.html
node_modules
src
app.js
sum.js
package.json
index.html
node_modules
webpack.config.js
Every file inside the dist directory is generated by webpack.
add the HtmlWebpackPlugin
link: https://www.npmjs.com/package/html-webpack-plugin
add
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
})
]
};
It can be due to your IDE -- see webpack dev server
Working with editors/IDEs supporting “safe write”... This behaviour causes file watcher to lose the track because the original file is removed. In order to prevent this issue, you have to disable “safe write” feature in your editor.
You can try this workaround for auto reloading while developing an app. Add to your entry point ('./src/app.js'):
require('../index.html'); //workround to reload page on index.html changes
Related
I'm using webpack-dev-server with webpack v5 and for a reason when I made changes in my CSS and js it updated on time as expected but for HTML files I have to refresh my browser manually to see the new complied version .
src
|-index.html
|-index.js
webpack.config.js
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "development",
output: {
clean: true,
filename: "bundel.js",
path: path.resolve(__dirname, "dist"),
},
plugins: [
new htmlWebpackPlugin({
filename: "index.html",
template: path.resolve(__dirname, "src", "index.html"),
}),
],
};
my package.json devDependencies
"devDependencies": {
"html-webpack-plugin": "^5.5.0",
"webpack": "^5.70.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.4"
}
I start my server with npx webpack serve --open
I added CSS file and its relative CSS loaders for testing and removed it after I make sure it work and just HTML is the problem
you can replicate the problem when you change the index.html content
The problem is webpack-dev-server doesn't watch HTML files by default
so I found two solutions for this :
The first solution is built-in throw devServer by adding watchFiles:
devServer: {
watchFiles: ["src/*.html"],
hot: true,
},
The second solution using an external plugin called browser-sync-webpack-plugin
Try to use the DevServer option to reload the page and compress all.
Instead of running npx webpack serve --open run npm run start using this script config:
"scripts": {
"start": "webpack-dev-server",
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
And try to use this base config for your webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// Default settings
mode:'development',
devtool:'inline-source-map',
entry:{
main: path.join(__dirname,'src','index.js')
},
output:{
filename:'index.js',
path: path.resolve(__dirname,'dist'),
clean:true,
},
// Loaders
module:{
// JavaScript
rules:[
{
test: /\.js$/i,
use:{
loader:'babel-loader',
options:{
"presets":['#babel/preset-react']
}}
},
// Css
{
test: /\.css$/i, use:['style-loader','css-loader']
}
]
},
// Plugins
plugins:[
new HtmlWebpackPlugin({
template: path.join(__dirname,'public','index.html') ,
filename:'index.html'
})
],
// DevServer
devServer:{
port:8080,
open:true,
compress:true,
hot:true,
liveReload:true,
}
};
So after npm build and npm run , why does my react application open with console on the screen? It was not happening when my packages were "webpack-cli": "^4.2.0" and "webpack-dev-server": "^3.11.1". Upgrading them is causing this issue. How can we fix this?
My package.json contains (devDependencies)
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^7.0.0",
"webpack": "^5.11.0",
"webpack-bundle-analyzer": "^4.3.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.3",
"webpack-manifest-plugin": "2.2.0",
"webpack-merge": "^5.7.2"
"eslint-webpack-plugin": "^2.1.0",
"html-webpack-plugin": "5.3.2",
"scripts": {
"start": "webpack serve --config config/webpack.config.js --env TARGET_ENV=development --env app=web --port 3000",
"build": "webpack --config config/webpack.config.js --env TARGET_ENV=production",
"build:staging": "webpack --config config/webpack.config.js --env TARGET_ENV=staging"
}
webpack.config.js
const { merge } = require("webpack-merge");
//const commonConfig = require("./webpack.common.js");
const paths = require("./paths");
const webpack = require("webpack");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ESLintPlugin = require("eslint-webpack-plugin");
const getClientEnvironment = require("./env");
module.exports = (env) => {
const targetEnv = env.TARGET_ENV;
const mode = targetEnv === "development" ? "development" : "production";
process.env.NODE_ENV = mode;
// Source maps are resource heavy and can cause out of memory issue for large source files.
// const shouldUseSourceMap = webpackEnv === "development";
const commonConfig = {
mode: mode,
// Where webpack looks to start building the bundle
entry: {
web: paths.src + "/web.tsx",
},
// Where webpack outputs the assets and bundles
resolve: {
extensions: [".tsx", ".ts", ".js"],
fallback: {
util: require.resolve("util/"),
},
modules: ["node_modules", "./src"],
},
// Customize the webpack build process
plugins: [
new webpack.ProvidePlugin({
process: "process/browser",
}),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
// It is absolutely essential that NODE_ENV is set to production
// during a production build.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(getClientEnvironment(targetEnv).stringified),
new webpack.IgnorePlugin({
resourceRegExp: /^\.\/locale$/,
contextRegExp: /moment$/,
}),
// Removes/cleans build folders and unused assets when rebuilding
new CleanWebpackPlugin(),
// Copies files from target to destination folder
new CopyWebpackPlugin({
patterns: [
{
from: paths.public,
to: paths.build,
globOptions: {
ignore: ["**/*.html"],
},
},
{
from: paths.appPath + "/web.config",
to: paths.build,
},
],
}),
// Generates an HTML file from a template
// Generates deprecation warning: https://github.com/jantimon/html-webpack-plugin/issues/1501
new HtmlWebpackPlugin({
//favicon: paths.src + "/images/favicon.png",
template: paths.public + "/web.html", // template file
chunks: ["vendor", "web"],
filename: "web.html", // output file
inject: true,
}),
new HtmlWebpackPlugin({
template: paths.public + "/crossplatform.html", // template file
chunks: ["vendor", "crossplatform"],
filename: "crossplatform.html", // output file
inject: true,
}),
new ESLintPlugin({
// Plugin options
extensions: ["js", "jsx", "ts", "tsx"],
}),
],
// Determine how modules within the project are treated
module: {
rules: [
// JavaScript: Use Babel to transpile JavaScript files
{
test: /\.(ts|js)x?$/,
include: paths.src,
//exclude: /node_modules/,
loader: "babel-loader",
options: {
cacheDirectory: true,
// See #6846 for context on why cacheCompression is disabled
cacheCompression: false,
// Babel sourcemaps are needed for debugging into node_modules
// code. Without the options below, debuggers like VSCode
// show incorrect code and set breakpoints on the wrong lines.
//sourceMaps: shouldUseSourceMap,
//inputSourceMap: shouldUseSourceMap,
},
},
// Images: Copy image files to build folder
{ test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: "asset/resource" },
// Fonts and SVGs: Inline files
{ test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: "asset/inline" },
],
},
};
const envConfig = require(`./webpack.${mode}.js`)({ app: env.app });
return merge(commonConfig, envConfig);
};
webpack.development.js
const webpack = require("webpack");
const paths = require("./paths");
module.exports = (args) => {
return {
// Control how source maps are generated
devtool: "cheap-module-source-map",
output: {
//path: paths.build,
publicPath: "./",
filename: "[name].js",
},
// Needed because of an issue with webpack dev server HMR with Webpack https://github.com/webpack/webpack-dev-server/issues/2758
target: "web",
// Spin up a server for quick development
devServer: {
historyApiFallback: {
index: "/" + args.app + ".html",
},
open: true,
devMiddleware: {
publicPath: "/",
},
hot: true,
// By default files from `contentBase` will not trigger a page reload.
// watchContentBase: true,
},
module: {
rules: [
// Styles: Inject CSS into the head with source maps
{
test: /\.(css)$/,
use: [
"style-loader",
{
loader: "css-loader",
//options: { sourceMap: true },
},
],
},
],
},
};
};
I wanted to setup react with webpack, babel, and typescript myself since I would like to know more and have a consistent boilerplate for development.
I have been trying to setup fast refreshing and hot reloading in react with `webpack5 following the documentation for react-refresh-webpack-plugin. I was not getting anywhere and decided to make a minimal example that reproduces the error.
My expectation is that I should be able to make changes to my source folder and the should appear immediately or at least upon refresh. As of now, neither happens.
I made sure to follow the primary readme for react-refresh-webpack-plugin as best I could. I will review it again and see what changes I can make according to it and report back here.
The file tree so far looks like :
├── babel.config.js
├── package-lock.json
├── package.json
├── src
│ ├── app.tsx
│ ├── index.html
│ └── index.tsx
├── tsconfig.json
└── webpack.config.js
my webpack config
// webpack.config.js
const path = require( 'path' )
const ReactRefreshPlugin = require( '#pmmmwh/react-refresh-webpack-plugin' )
const HTMLWebpackPlugin = require( 'html-webpack-plugin' )
// Ingredients
// Just to make things less ugly
const SRC = path.join( __dirname, 'src' )
const NODE_MODULES = /node_modules/
const MODE = 'development'
const INDEX = path.join( SRC, 'index.html' )
const ENTRY_POINT = path.join( SRC, 'index.tsx' )
// Objects nested within exports.
// Also to make things less ugly.
const PLUGINS = [
new ReactRefreshPlugin(),
new HTMLWebpackPlugin({
template : INDEX,
filname : './index.html'
})
]
const RESOLVE = { extensions : [
'.ts',
'.js',
'.tsx',
'.jsx'
]}
const RULES = [
// Babel
{
test : /\.tsx?$/,
exclude : NODE_MODULES,
include : SRC,
use : 'babel-loader'
}
]
// Prettier exports.
module.exports = ( env ) => {
const config = {
mode : MODE,
entry : ENTRY_POINT,
module : {
rules : RULES
},
plugins : PLUGINS,
resolve : RESOLVE
}
console.log( JSON.stringify( config, null, space = "\n" ) )
return config
}
and my babel config
// babel.config.js
// Variables
const PRODUCTION = 'production'
// Methods
const PRESETS = ( api ) => [
'#babel/preset-env',
'#babel/preset-typescript',
[
'#babel/preset-react',
{
development : !api.env( PRODUCTION ),
runtime : 'automatic'
}
]
]
const PLUGINS = ( api ) => [
api.env( PRODUCTION ) && 'react-refresh/babel'
].filter( Boolean )
module.exports = ( api ) => {
api.cache.using(
() => process.env.NODE_ENV
)
return {
presets : PRESETS( api ),
plugins : PLUGINS( api )
}
}
package.json:
{
"name": "typescript-react-with-refresh",
"version": "1.0.0",
"description": "Trying to get hot reloading working with webpack5.",
"main": "index.js",
"scripts": {
"start": "webpack serve --hot",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.16.7",
"#babel/preset-env": "^7.16.7",
"#babel/preset-react": "^7.16.7",
"#babel/preset-typescript": "^7.16.7",
"#pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
"#types/react": "^17.0.38",
"#types/react-dom": "^17.0.11",
"babel-loader": "^8.2.3",
"html-webpack-plugin": "^5.5.0",
"react-refresh": "^0.11.0",
"typescript": "^4.5.4",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.7.2"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}
and finally the configuration for the typescript compiler:
// tsconfig.json
{
"compilerOptions": {
"jsx": "react-jsx",
"lib": ["dom", "dom.iterable", "esnext"],
"module": "ESNext",
"moduleResolution": "node",
"outDir": "dist",
"target": "ESNext",
"sourceMap": true
},
"include": ["src"]
}
Finally, if index.html or any other source files are required, I can provide those. For now I am not providing them to keep this post brief. Thank you in advance for any help!
Update
I found that I should have installed ts-node and type-fest as dev dependencies, and change webpack.config.js to webpack.config.ts. Nonetheless the problem persists.
Figured it out. It turns out that there was a similar issue on the react-refresh-webpack-plugin issues page, see issue #334. Part of my solution was to restart since I decided I did not like the formatting. The problem was with externalization of react. The fix in particular was to add the following amendments to the optimization and entry sections below files and merge them together:
const path = require('path');
const ReactRefreshPlugin = require('#pmmmwh/react-refresh-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const SRC = path.join( __dirname, '..', 'src' )
const DIST = path.join(__dirname, '..', 'dist')
const PUBLIC = path.join( __dirname, '..', 'public' )
module.exports = (env) => {
return {
mode: 'development',
entry: {
reactRefreshSetup: '#pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js',
main: path.join( SRC, 'index.tsx' ),
},
output: {
filename: '[name].js',
path: DIST,
},
module: {
rules: [
{
test: /\.tsx?$/,
include: SRC,
use: 'babel-loader',
},
{
test : /\.css$/,
use : [
'style-loader',
'css-loader'
]
},
],
},
plugins: [
new HtmlWebpackPlugin({
filename: './index.html',
template: path.join( PUBLIC, 'index.html' ),
}),
],
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx' ],
},
}
}
and the rest
module.exports = ( env ) => {
return {
devServer: {
hot: true,
port: 8080,
},
plugins : [
new ReactRefreshPlugin()
],
optimization: {
runtimeChunk: 'single',
// Ensure `react-refresh/runtime` is hoisted and shared
// Could be replicated via a vendors chunk
splitChunks: {
chunks: 'all',
name(_, __, cacheGroupKey) {
return cacheGroupKey;
},
},
}
}
}
This is an example that works:
devServer: {
hot: true,
open: true,
port: 7777,
static: {
directory: path.resolve(pRoot, 'public', 'assets'),
publicPath: '/public/assets/',
},
},
The key here is to remove these two fields, since their jobs are handled by the HMR plugin instead:
devServer: {
watchFiles: ['src', 'public'],
historyApiFallback: true,
// ...
}
REVISED
So I am fairly new to this and I am struggling for some time to resolve this, so I would really appreciate help.
Goal: Create dynamic web-page that is using handlebars and D3 for dynamic text and visuals.
What I achieved until now: Use json file stored within to do some data manipulation and render data with hbs and express. Created simple bar chart that uses data from the previous file.
Issue: I am not sure how to completely set up webpack so I can actually see how my page looks like. If I just add script with D3 visuals to hbs I am getting require is not defined, which I get since it's not supported on client side.
folder structure
|main
|data
|data.json
|src
|index.js
|visuals.js
|templates
|views
|index.hbs
|node_modules
|package.json
|package-lock.json
|webpack.config.js
|babel.config.json
My code until now (there might be to many things here because I tried a lot of things plus I was anonymizing as I have sensitive items)
index.js:
const express = require("express");
const fs = require("fs");
const path = require("path");
const hbs = require("hbs");
const Data = JSON.parse(
fs.readFileSync(path.resolve(__dirname, "../data/data.json")).toString()
);
//Some data manipulation
module.exports = clusters; //array to be used in the other file
const app = express();
const publicDirectoryPath = path.join(__dirname, "..");
const viewPath = path.join(__dirname, "../templates/views");
app.set("view engine", "hbs");
app.set("views", viewPath);
app.use(express.static(publicDirectoryPath));
app.get("", (req, res) => {
res.render("index", {
data1: data1,
data2:data2,
});
});
Beginning of visuals.js
const d3 = require("d3");
var dt = require("./index.js");
const clusters = dt.clusters;
webpack.config.js
const path = require("path");
const HandlebarsPlugin = require("handlebars-webpack-plugin");
module.exports = {
entry: [
path.resolve(__dirname, "./src/visuals.js"),
path.resolve(__dirname, "./src/index.js"),
],
output: {
path: path.resolve(__dirname, "./public"),
filename: "bundle.js",
},
module: {
rules: [
{ test: /\.handlebars$/, loader: "handlebars-loader" },
{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
],
},
resolve: {//I had errors and warnings with modules, below solved it
modules: [path.resolve(__dirname), "node_modules/"],
extensions: [".js", ".json"],
descriptionFiles: ["package.json"],
},
fallback: {
stream: false,
http: false,
buffer: false,
crypto: false,
zlib: false,
fs: false,
net: "empty",
},
},
plugins: [
new HandlebarsPlugin({//can't say I understood from documentation the setup for hbs
entry: path.resolve(__dirname, "./templates/views/index.hbs"),
output: path.resolve(__dirname, "./public/index.html"),
data: path.resolve(__dirname, "./data/data.json"),
onBeforeSetup: function (Handlebars) {},
onBeforeCompile: function (Handlebars, templateContent) {},
onBeforeRender: function (Handlebars, data, filename) {},
onBeforeSave: function (Handlebars, resultHtml, filename) {},
onDone: function (Handlebars, filename) {},
}),
],
};
package.json
{
"name": "triana_plus",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"start": "webpack serve --config ./webpack.config.js --open chrome"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.12.10",
"#babel/preset-env": "^7.12.10",
"babel-loader": "^8.2.2",
"handlebars-webpack-plugin": "^2.2.1",
"webpack": "^5.10.1",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0",
"webpack-node-externals": "^2.5.2"
},
"dependencies": {
"d3": "^6.3.1",
"express": "^4.17.1",
"fs": "0.0.1-security",
"handlebars-loader": "^1.7.1",
"hbs": "^4.1.1",
"net": "^1.0.2",
"path": "^0.12.7",
"request": "^2.88.2"
}
}
babel.config.json
{
"presets": ["#babel/preset-env"]
}
What the error you posted means is that webpack is being asked to create some JS bundles that reference node packages like http. Referencing packages like that in client-side code bundles won't work since it cannot package node modules in the JS artifacts.
Make sure that no node-specific packages are required/imported for files you're bundling through webpack. Since it looks like you're creating an express app, keep the express-specific files outside of the folder visited by webpack.
I have an index.js file that imports my CSS and a few packages, but after bundling everything and starting the server I noticed that index.js wasn't running. I did a simple console.log in index.js and it isn't reached.
I copied the contents of my webpack.config file from a previous project which was working correctly, so I'm not sure if it's a file structure/path error or what not. Any thoughts?
Directory structure:
webpack.config.js:
const path = require('path')
const webpack = require('webpack');
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", // removing the . fails the build
output: {
filename: './SiteAssets/scripts/RecruitmentTracking.js',
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 the browser 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"
})]
}
index.js:
import "./RecruitmentTracking.css";
import 'jquery';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
import 'jquery-ui-bundle/jquery-ui.min.js';
console.log('this is index.js');
package.json:
{
"name": "recruitmenttracking",
"version": "1.0.0",
"description": "Recruitment Initiatives Tracking",
"main": "index.js", // ----- should a more specific file path be here?
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open --mode development",
"build": "webpack --config webpack.config.js",
"dev-server": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.2.3",
"#babel/core": "^7.4.0",
"#babel/preset-env": "^7.4.2",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1"
},
"dependencies": {
"#babel/polyfill": "^7.4.0",
"axios": "^0.18.0",
"bootstrap": "^4.3.1",
"jquery": "^3.3.1",
"jquery-ui-bundle": "^1.12.1-migrate",
"pdfmake": "^0.1.54",
"popper": "^1.0.1"
}
}
What's happening here is:
1 - webpack compiles and outputs into: './SiteAssets/scripts/RecruitmentTracking.js'
2 - HtmlWebpackPlugin, will then read the template file './src/index.html', and inject RecruitmentTracking.js script inside the body.
3 - then, it outputs the result to dist/RecruitmentTracking.txt
I don't see any problem, apart from the file being a .txt and not .html. and would obviously not be interpreted by the browser.
Try outputting to an html file instead, it should work
1) For some reason you've configured the following plugin to output a .txt file. So don't expect the browser to intepret that as a html file
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'RecruitmentTracking.txt',
inject: 'body'
});
2) Also I believe that file that you're opening in the browser is /dist/index.html and that file doesn't load your js file. Try adding the following line into /dist/index.html:
<script src"./SiteAssets/scripts/RecruitmentTracking.js"></script>
3) If the above works, please still consider taking a closer look at (1)
You have named the output file in HtmlWebpackPluginConfig as RecruitmentTracking.txt. change it to index.html and it should work
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './src/index.html', // webpack takes ./src/index.html as input file
filename: 'index.html', // webpack processes the above input template and should output to index.html
inject: 'body'
});