Как настроить загрузчик vue в webpack?vue-101

Для корректной работы Vue-приложений в Webpack необходимо правильно настроить обработку .vue файлов и их зависимостей. Рассмотрим полный процесс настройки.

1. Установка необходимых пакетов

Сначала установим основные зависимости:

npm install -D vue-loader vue-template-compiler webpack webpack-cli
npm install vue

Пояснение пакетов:

  • vue-loader: загрузчик для .vue файлов
  • vue-template-compiler: компилятор шаблонов Vue
  • webpack: сборщик модулей
  • webpack-cli: интерфейс командной строки

2. Базовая конфигурация Webpack

Создаем файл webpack.config.js:

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  entry: './src/main.js',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

3. Расширенная конфигурация

Для production-сборки добавим оптимизации:

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  // ... предыдущая конфигурация
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js'
  },
  module: {
    rules: [
      // ... другие правила
      {
        test: /\.scss$/,
        use: [
          process.env.NODE_ENV === 'production'
            ? MiniCssExtractPlugin.loader
            : 'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css'
    })
  ]
}

4. Настройка Babel

Для поддержки современного JavaScript создаем .babelrc:

{
  "presets": ["@babel/preset-env"]
}

И устанавливаем зависимости:

npm install -D @babel/core @babel/preset-env babel-loader

5. Обработка статических файлов

Добавим правило для изображений и шрифтов:

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  type: 'asset/resource',
  generator: {
    filename: 'img/[name].[hash:8][ext]'
  }
},
{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  type: 'asset/resource',
  generator: {
    filename: 'fonts/[name].[hash:8][ext]'
  }
}

6. Настройка Dev Server

Для разработки добавим webpack-dev-server:

devServer: {
  hot: true,
  static: {
    directory: path.join(__dirname, 'public')
  },
  compress: true,
  port: 8080
}

Устанавливаем пакет:

npm install -D webpack-dev-server

7. Алиасы и разрешения

Упростим импорты через алиасы:

resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src'),
    'vue$': 'vue/dist/vue.esm-bundler.js'
  },
  extensions: ['.js', '.vue', '.json']
}

8. Полный пример конфигурации

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = (env) => ({
  mode: env.production ? 'production' : 'development',
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].[contenthash].js',
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          env.production ? MiniCssExtractPlugin.loader : 'vue-style-loader',
          'css-loader',
          'postcss-loader'
        ]
      },
      {
        test: /\.scss$/,
        use: [
          env.production ? MiniCssExtractPlugin.loader : 'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'img/[name].[hash][ext]'
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash].css'
    })
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    },
    extensions: ['.js', '.vue', '.json']
  },
  devtool: env.production ? false : 'eval-cheap-module-source-map',
  devServer: {
    hot: true,
    static: {
      directory: path.join(__dirname, 'public')
    }
  }
})

9. Запуск сборки

Добавляем скрипты в package.json:

"scripts": {
  "dev": "webpack serve --mode development",
  "build": "webpack --mode production"
}

Резюмируем:

настройка загрузчика Vue в Webpack требует установки vue-loader и vue-template-compiler, правильной конфигурации модулей для обработки JavaScript, CSS и статических файлов, а также добавления VueLoaderPlugin. Современные настройки включают разделение кода, хеширование имен файлов и оптимизацию для production-сборки.

Вопросы

Собеседования