M
M
Maxim2018-08-10 10:54:45
webpack
Maxim, 2018-08-10 10:54:45

Webpack doesn't generate output file in watch mode, why?

Good afternoon, I run it webpack --watch --mode developmenton 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 question

Ask a Question

731 491 924 answers to any question