All infos - Команды и настройки сборщика webpack
20
июль

Команды и настройки сборщика 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.

Share this post