1. Настройка webpack для правильного подключения файлов:
- Установите webpack и необходимые плагины через npm:
```shell
npm install webpack webpack-cli --save-dev
```
- Создайте webpack.config.js файл со следующим содержимым:
```javascript
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
```
- Измените entry точку входа и output.filename имя выходного файла согласно вашей структуре проекта.
- Добавьте необходимые загрузчики, например для Babel:
```shell
npm install babel-loader @babel/core @babel/preset-env --save-dev
```
- В webpack.config.js добавьте модуль для загрузки JS файлов с помощью Babel:
```javascript
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
],
}
```
- Добавьте необходимые плагины, например для оптимизации и минификации кода:
```shell
npm install optimize-css-assets-webpack-plugin terser-webpack-plugin --save-dev
```
- В webpack.config.js добавьте плагины:
```javascript
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
optimization: {
minimizer: [new OptimizeCssAssetsPlugin(), new TerserPlugin()],
},
```
- Добавьте нужные плагины и конфигурации в соответствии со своими требованиями.
2. Настройка автоматического подключения общих библиотек js и полифилов:
- Установите необходимые библиотеки через npm:
```shell
npm install core-js regenerator-runtime --save
```
- Создайте файл с полифилами, например polyfills.js, и импортируйте необходимые полифилы:
```javascript
import 'core-js/stable';
import 'regenerator-runtime/runtime';
```
- В entry точке входа вашего проекта, например index.js, добавьте импорт файла с полифилами:
```javascript
import './polyfills';
```
- Добавьте плагин ProvidePlugin в webpack.config.js для автоматического подключения общих библиотек:
```javascript
const webpack = require('webpack');
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
}),
]
```
- Чтобы полифилы подключались только в случае необходимости для определенного браузера на каждой странице, можно использовать условные импорты:
```javascript
if (/* Проверка поддержки браузером необходимых возможностей */) {
import('./polyfills').then(() => {
// Ваш код, который должен быть выполнен только после подключения полифилов
});
} else {
// Ваш код для браузеров с поддержкой необходимых возможностей
}
```
- Задайте необходимую проверку поддержки браузером в условии.
- Подключение полифилов будет происходить только для браузеров, которым они действительно нужны.