Webpack среда разработки и производства

Webpack: среда разработки и производства

На данный момент у нас есть самодевскрипт для перевода кода. Однако с пустым src / js / functions.js выходной файл dist / functions.bundle.js составляет 5 КБ. Это потому, что он включает код запуска, который нам понадобится для загрузки библиотек..

Будет хорошо его оптимизировать.

Первым делом мы добавим vpakage.json и следующий скрипт:

"build": "webpack —mode = production"

Мы добились прогресса — при запуске npm run build размер файла теперь составляет 1 КБ. Это потому, что раньше у нас было много комментариев, которые теперь полностью удалены..

Оптимизируем код еще больше.

Минификация

Установим:

npm установить uglifyjs-webpack-plugin —save-dev

Затем загрузите его в webpack.config.js:

const path = require (‘путь’); const MiniCssExtractPlugin = require ("mini-css-extract-plugin"); const UglifyJsPlugin = require (‘uglifyjs-webpack-plugin’);
module.exports = {запись: [path.resolve (‘./ src / js / functions.js’), path.resolve (‘./ src / scss / style.scss’)], вывод: {путь: путь. resolve (__ dirname, ‘dist’), имя файла: ‘functions.bundle.js’}, модуль: {rules: [{exclude: / node_modules /, test: /\.js$/, loader: ‘babel-loader’ , параметры: {presets: [‘@ babel / preset-env’], compact: true}}, {exclude: / node_modules /, test: /\.scss$/, используйте: [{loader: MiniCssExtractPlugin.loader}, {loader: ‘css-loader’}, {loader: ‘sass-loader’}]}]}, плагины: [новый MiniCssExtractPlugin ({filename: ‘style.bundle.css’})], оптимизация: {Minimizer: [ новый UglifyJsPlugin ({test: /\.js$/})]}};

Читать также:  Настроить вебпакет

Loadingconst UglifyJsPlugin = require (‘uglifyjs-webpack-plugin’); в начале файла. Наконец, мы добавляем свойство оптимизации в настройки, где описываем минификатор..

Это не уменьшит размер нашего текущего файла JS, поскольку у нас нет собственного кода. Но при добавлении кода в src / js / functions.js он теперь будет минимизирован, а файл пакета останется как можно меньше.

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?