Добрый день, запускаю
webpack --watch --mode development
на винде
Для собирание несколько JS в один и вставления стилей и JS в итоговый Html файл
После первого запуска все так и получаю, но после редактирования, изменения почему-то не вносятся в него, хотя в консоле видно что компиляция прошла а выходной файл не создается.
Файл webpack.config.js
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")
})
]
};
};