Использование Webpack для минимизации jQuery файлов и обновления ссылок в HTML? - PullRequest
Новая
       14

Использование Webpack для минимизации jQuery файлов и обновления ссылок в HTML?

0 голосов
/ 21 января 2020

У меня есть около 10 отдельных страниц, с библиотечными ссылками и пользовательскими jQuery кодами, включенными в каждый HTML файл отдельно.

  1. Можно ли использовать Webpack для минимизации файлов Javascript.
  2. Преобразовывать ссылки файлов. js в .min. js во всех моих HTML-кодах во время сборки?

Все поисковые ссылки в веб-пакете указывают на модули ES6, которые запускаются начал использовать индекс. js, у меня его нет: - (

Ответы [ 3 ]

2 голосов
/ 21 января 2020

Вы можете использовать script-loader и terser-webpack-plugin в оптимизации, чтобы минимизировать ваши файлы.

Но у вас будет слишком много конфигурации для небольшой задачи. Это не стоит усилий.

Я бы рекомендовал использовать некоторые npm плагины, такие как

webpack-merge-and-include-globalbally

Или просто использовать cpx для копируйте файлы в dist и преобразуйте их во время копирования.

1 голос
/ 31 января 2020
  1. Можно ли использовать Webpack для минимизации файлов Javascript.

Да, вы можете разрешать файлы разными способами, модулями ES6, псевдонимами, расширениями, а затем использовать любые доступные плагины для его минимизации.

Здесь пара способы настройки разрешения части:
https://webpack.js.org/configuration/resolve/

// alias
resolve: {
    alias: {
        '~': Path.resolve(__dirname, '/src')
    }
},

// module
resolve: {
    modules: [SRC_DIR, '/src']
},

// extension
resolve: {
    extensions: ['.wasm', '.mjs', '.js', '.json']
},

А затем для минимизации:
https://webpack.js.org/plugins/terser-webpack-plugin/
https://webpack.js.org/plugins/uglifyjs-webpack-plugin/

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                test: /\.js(\?.*)?$/i,
            }),
        ],
    },
};

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                test: /\.js(\?.*)?$/i,
            }),
        ],
    },
};

Вам понадобится компилятор для файлов. js, чтобы вы могли использовать для него babel 

module:{
    rules:[
    {
        test:/\.js$/,
        use:['babel-loader']
    }
    ]
}
Преобразовывать ссылки файлов. js в .min. js во всех моих HTML-кодах во время сборки?

Чтобы создать много выходных данных, вы должны проверить это
Минимизируйте несколько javascript файлов с помощью веб-пакета

0 голосов
/ 29 января 2020

Вы можете использовать такие инструменты, как JScompress: https://jscompress.com/

JSCompress минимизирует и сжимает весь ваш код в один javascript код.

Затем вы можете предоставить один JS Файл в HTML, например, в комплекте. [crc32_signature]. js

Более того, вы можете управлять HTML кэшированием, чтобы уменьшить узкое место в вашей сети.

https://developer.mozilla.org/fr/docs/Web/HTTP/Cache

...