Answer the question
In order to leave comments, you need to log in
Webpack doesn't generate output file in watch mode, why?
Good afternoon, I run it webpack --watch --mode development
on Windows
To collect several JS into one and insert styles and JS into the final Html file
After the first run, I get everything, but after editing, for some reason, changes are not made to it, although in the console you can see that the compilation went well no output file is created.
webpack.config.js file
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var webpack = require("webpack");
var path = require("path");
var HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = (env, options) => {
console.log(`This is the Webpack 4 'mode': ${options.mode}`);
return{
node:false,
devtool: options.mode==="development"?'source-map':' ',
entry: ['./src/index.js'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'script.js',
},
optimization: {
minimize: options.mode==="development"?false:true,
minimizer: [
new UglifyJSPlugin({
uglifyOptions: {
compress: {
drop_console: options.mode==="development"?false:true,
}
}
})
]
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: options.mode==="development"?false:true,}
}
]
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader",]
}
]
},
resolve: {
extensions: ['.js'],
alias: {
'utils2': path.resolve(__dirname, './Script_4_handlerButton_OnInput.js'), // <-- When you build or restart dev-server, you'll get an error if path is incorrect.
'utils3': path.resolve(__dirname, './Json_Handler'), // <-- When you build or restart dev-server, you'll get an error if path is incorrect.
'utils4': path.resolve(__dirname, './Script_11_ajax'), // <-- When you build or restart dev-server, you'll get an error if path is incorrect.
'utils5': path.resolve(__dirname, './Validator'), // <-- When you build or restart dev-server, you'll get an error if path is incorrect.
'utils6': path.resolve(__dirname, './HandlerKalib'), // <-- When you build or restart dev-server, you'll get an error if path is incorrect.
'utils7': path.resolve(__dirname, './HandlerPageState'), // <-- When you build or restart dev-server, you'll get an error if path is incorrect.
'utils8': path.resolve(__dirname, './HandlerSerNumber'), // <-- When you build or restart dev-server, you'll get an error if path is incorrect.
'utils9': path.resolve(__dirname, './Utilities'), // <-- When you build or restart dev-server, you'll get an error if path is incorrect.
'utils10': path.resolve(__dirname, './ConvertIP'), // <-- When you build or restart dev-server, you'll get an error if path is incorrect.
}
},
plugins: [
new webpack.ProvidePlugin({
'utils': './Script_4_handlerButton_OnInput.js',
'M_JSON': './Json_Handler.js',
'Modul_2': './Script_11_ajax.js',
'valid': './Validator.js',
'Kalib': './HandlerKalib.js',
'State': './HandlerPageState.js',
'SerNumber': './HandlerSerNumber.js',
'Util': './Utilities.js',
'ConvIP': './ConvertIP.js',
}),
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html",
inlineSource: '.(js|css)$' // embed all javascript and css inline
}),
new HtmlWebpackInlineSourcePlugin(),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
new webpack.DefinePlugin({
WEBPACK_MODE: options.mode==="development"?false:true,
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify("5fa3b9"),
BROWSER_SUPPORTS_HTML5: false,
NORM: true, //1
ERROR: false, //0
RGB_STATUS_OFF: JSON.stringify("rgb(228,229,230)"),
TWO: "1+1",
"typeof window": JSON.stringify("object")
})
]
};
};
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question