Webpack — шпора

npm inint — команда инициализации главного файла в активной папке и базывае настройки через ноду — конфигурационный файл package.json, а так же

webpack — webpack.config.js — конфигурационный файл данного пакета, где моно добовлять разные зависимости и настройки по документации пакетов npm. Руководствуемся актуальными гайдами  на официальной странице webpack.

Старт процесса:

#npm install webpack —save-dev

#npm install webpack- cli —save-dev (Возможность параметров команд из консоли)

Предварительное ознакомление:
https://webpack.js.org/concepts/
https://www.youtube.com/watch?v=kLMjOd-x0aQ&list=PLDyvV36pndZHfBThhg4Z0822EEG9VGenn
https://tproger.ru/translations/configure-webpack4/

Делаем так.
src — исходная рабочая папка с js файлами и index.js(указываем в package.json) — входная точка.
dict или build — выходная, куда будем складывать всю переработку — webpack.config.js
package.json — конфигурационный файл любого node.js приложения
webpack.config.js — файл в ктором создаем объект конфигурации, предположим стандартный выходной файл — bundle.js и все остальное.
папка node_modules — с архивом всем приложений которые зависят от конфигурационного файла.
webpack —mode development позволяет не оптимизировать исходный файл bundle.js и будет проще отлаживать. Можно задать не через консоль, а через конфигурационный файл webpack.config.js в объекте module.exports параметр mode: ‘production’ — режим оптимизации или можно задать в package.json в объект ‘scripts’
«scripts»: {
«dev»: «webpack —mode development», //npm run dev набрать в консоли в этой активной папке//
«build»: «webpack —mode production»
},

Одна из основных проблем — глобальная область видемости из html файлов (причина — бандл оборачивает все своей функцией)

http://qaru.site/questions/2338112/export-global-function-using-webpack

работа с html шаблонами, предположим у нас несколько точек входа в  конфигурационном файле, тогда можно на выходе получить несколько банделов и разместить их в любой точке страницы по примеру такого шаблона.

<script async defer src=»<%= htmlWebpackPlugin.files.chunks.language.entry %>»></script>
<script async defer src=»<%= htmlWebpackPlugin.files.chunks.index.entry %>»></script>
<script async defer src=»<%= htmlWebpackPlugin.files.chunks.scriptmailjson.entry %>»></script>
<script async defer src=»<%= htmlWebpackPlugin.files.chunks.tablesort.entry %>»></script>
… т.д.

Выделено название бандлов(несколько точек входа), которые лежат в папке src

webpack.config.js — шпора с комментариями — без официальной документации и доп. поисков по сети по каждой строчке не разберешься. Помни нормальные конфиги за день не пишутся! Даже за неделю!!!

const HtmlWebpackPlugin = require('html-webpack-plugin'); //Work with HTML page: generation, copy, templete.
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); //minify code
const webpack = require('webpack'); // Install Local - main Object webpack - look to oficeal site about plugins metod.
const path = require('path');
console.log (getRandomInt(99, 99999999)); //You can add yourself logic in this config. AND console.log can show main object webpack.config.js
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

module.exports = {
    entry: { //You can use any entry points files in yourself config
        index: [
            '@babel/polyfill', //add polyfill in this "entry" file
            './src/index.js'
        ], // Anothe entry files:
        scriptmailjsonar: './src/scriptmailjsonar.js',
        tablesortar: './src/tablesortar.js',
        languagear: './src/languagear.js'
    },
    output: {
        filename: '[name].bundle.js?hash=[hash]',   //I use parameter hash for CDN tehnology. [name] - It's name entry point - key object entry.
        path: path.resolve(__dirname, './build'), //root path JS - __dirname
        library: "[name]" // Name Global variable will have been viewing into HTML file from main webpack entry functions. All function parametrs will be property(var) or method(var) - don't fogot with exports.nameVariable = anyArray [rst, rstr, ...] then you can take console.log ([name].nameVariable.var)
    },
    devtool: "source-map", //Source-map for JS. SCSS into IDE or webpack plugins
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },
    optimization: {
         minimizer: [
            new UglifyJsPlugin({
                test: /\.js(\?.*)?$/i, //Default options for minify scripts and intelect guard.
                }),
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            hashhtml: getRandomInt(99, 99999999), //I have cache in browser then i use link *.css?hash=someunicnumber
            filename: "../index.html",
            template: "./src/index.html",
            inject: false,
            minify: { // #npm install html-minifier // For this functional
                html5                          : true,
                minifyCSS                      : true,
                minifyJS                       : true,
                collapseWhitespace: true,
                removeComments: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true, //Maybe that was delete type="name" input - MaterializeCSS
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true
            }
        } )
    ]
};