Команды и настройки сборщика webpack
Используема я версия 4.16.3
Настройки webpack хранятся в файле webpack.config.js
Пример файла конфигурации:
'use strict';
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const NODE_ENV = process.env.NODE_ENV || 'development';
const webpack = require('webpack');
module.exports = {
//указывает где хранятся файлы для entry
context: __dirname + "/frontend",
//Файлы которые webpack будет упаковывать (точки входа)
entry: {
home: './frontend/home',
about: './frontend/about'
},
//Файлы упакованные которые webpack возвращает
output: {
//путь куда попадут упакованные файлы
path: __dirname + '/public',
//В маску '[name].js' подставляются значения из entry (home, about)
filename: '[name].js',
//Эта настройка позволяет использовать файлы как глобальные переменные.
library: '[name]'
},
watch: NODE_ENV == 'development',
devtool: NODE_ENV == 'development' ? "source-map" :false,
plugins: [
new webpack.DefinePlugin({
//Инициализация глобальных переменных
NODE_ENV: JSON.stringify(NODE_ENV),
Some_var: JSON.stringify("WORLDS")
})
],
resolve: {
modules: ['node_modules'],
extensions: ['.js']
},
resolveLoader: {
modules: ['node_modules'],
moduleExtensions: ['-loader'],
extensions: ['.js']
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel?optional[]=runtime',
options: {
//Presets указывает поодержку какого окружения(браузеров) babel будет учитывать при компиляции
presets: ['@babel/preset-env']
}
}
}
]
},
optimization: {
//Кэширование общих ресурсов
splitChunks: {
cacheGroups: {
'commons': {
minChunks: 2,
chunks: 'all',
name: 'commons',
priority: 10,
enforce: true,
},
},
},
minimizer: [
new UglifyJsPlugin({
test: /\.js($|\?)/i,
uglifyOptions: {
compress:{drop_console: true,},
warnings: false,
}
})
]
}}
настройка library помещает exports модуля в переменую 'home'.
Статья по webpack
Установка и настройки babel-loader в webpack 4.
Настройка плагина UglifyJsPlugin в
webpack 4 или на Githab.