webpack
Погрузчики и плагины

замечания

Начало работы с загрузчиками

Для начала, npm install нужные загрузчики для вашего проекта.

Внутри объекта конфигурации, который экспортируется в webpack.config.js , свойство module будет содержать все ваши загрузчики.

const source = `${__dirname}/client/src/`;

module.exports = {
  // other settings here
  
  module: {
    loaders: [
          {
            test: /\.jsx?$/,
            include: source,
            loaders: ['babel?presets[]=es2015,presets[]=react', 'eslint']
          },
          {
            test: /\.s?css$/,
            include: source,
            loaders: ['style', 'css', 'autoprefixer', 'sass']
          }
        ]
  },
};

В приведенной выше конфигурации мы используем три основные настройки для наших загрузчиков:

• test: Здесь мы связываем загрузчики с конкретными расширениями с помощью RegExp. Первый набор загрузчиков выполняется на всех файлах .js и .jsx. Второй набор выполняется для всех файлов .css и .scss.
• include: Это каталог, в котором мы хотим, чтобы наши загрузчики работали. По желанию мы могли бы легко использовать свойство exclude для определения каталогов, которые мы не хотим включать.
• loaders: это список всех загрузчиков, которые мы хотим запустить в файлах, указанных в test и include .

Важно отметить, что загрузчики выполняются справа налево в каждом массиве загрузчиков и снизу вверх в отдельных определениях. В приведенном ниже коде будут выполняться загрузчики в следующем порядке: sass, autoprefixer, css, style .

loaders: [
  {
    test: /\.s?css$/,
    include: source,
    loaders: ['style', 'css', 'autoprefixer']
  },
  {
    test: /\.s?css$/,
    include: source,
    loaders: ['sass']
  }
]

Это распространенный источник путаницы и ошибок для разработчиков, которые не знакомы с webpack. Например, при использовании синтаксиса JSX и ES6 мы хотим использовать этот код, а не компилируемый код, который предоставляется нашим загрузчиком babel. Поэтому наш погрузчик с эскинтом расположен справа от нашего загрузчика.

Суффикс -loader необязателен при перечислении наших загрузчиков.

loaders: ['sass']

... эквивалентно:

loaders: ['sass-loader']

Кроме того, вы можете использовать свойство loader (единственное число) вместе со строкой, разделяющей список загрузчиков на ! персонаж.

loaders: ['style', 'css']

... эквивалентно:

loader: "style!css"

загрузка файлов с машинописными текстами

Для использования машинописного текста с webpack вам потребуется typescript и ts-loader

npm --save-dev install typescript ts-loader

Теперь вы можете настроить webpack для использования файлов машинописных файлов

// webpack.config.js

module.exports = {
  ..
  resolve: {
    // .js is required for react imports.
    // .tsx is required for react tsx files.
    // .ts is optional, in case you will be importing any regular ts files.
    extensions: ['.js', '.ts', '.tsx']
  },
  module: {
    rules: [
      {
        // Set up ts-loader for .ts/.tsx files and exclude any imports from node_modules.
        test: /\.tsx?$/,
        loaders: isProduction ? ['ts-loader'] : ['react-hot-loader', 'ts-loader'],
        exclude: /node_modules/
      }
    ]
  },
  ...
};