Обработка файлов, webpack-merge, copy-webpack-plugin

В этой статье:

• Подключим Webpack-merge - для разбивание  dev и build конфига
• Настроим карту для стилей
• Обработаем все картинки
• Вставим изображения в html и css
• Обработаем также статичные файлы - такие как favicon.ico sitemap.xml и все остальные файлы (которые должны находиться в корне проекта) при помощи copy-webpack-plugin.
• Обработаем html через плагин html-webpack-plugin
• Сделаем live-reload для html файлов

Webpack-merge

Webpack-merge нужен чтобы отделять билд и дев разработку. Это нужно делать обязательно. Иначе рано или поздно случиться то, что иллюстрировано на гифке выше. Самый банальный пример - сжатие картинок, если мы будем сжимать их при dev разработки вебпак будет значительно дольше собирать наш проект это нужно делать только при build разработке. Поэтому очень важно разделять эти 2 этапа.

В консоли:

    npm i webpack-merge --save-dev

Теперь создадим 3 файла конфигураций:

1. webpack.base.conf.js - базовый для мерджа
2. webpack.build.conf.js - конфигурации для билда
3. webpack.dev.conf.js - конфигурации для дева

В исходном файле package.json обновим ярлык dev и build:

      "scripts": {
        "dev": "webpack-dev-server --open --config build/webpack.dev.conf.js",
        "build": "webpack --config build/webpack.build.conf.js"
      },

webpack.base.conf.js будет выглядеть так:

    const path = require('path')

    module.exports = {
      entry: {
        app: './src/index.js'
      },
      output: {
        filename: '[name].js',
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist'
      },
      module: {
        rules: [{
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: '/node_modules/'
        }, {
          test: /\.scss$/,
          use: [
            'style-loader',
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: { sourceMap: true }
            }, {
              loader: 'postcss-loader',
              options: { sourceMap: true, config: { path: 'src/js/postcss.config.js' } }
            }, {
              loader: 'sass-loader',
              options: { sourceMap: true }
            }
          ]
        }, {
          test: /\.css$/,
          use: [
            'style-loader',
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: { sourceMap: true }
            }, {
              loader: 'postcss-loader',
              options: { sourceMap: true, config: { path: 'src/js/postcss.config.js' } }
            }
          ]
        },
        }]
      }
    }

В build мы укажем mode: 'production’, который мы удалили из ярлыков в package.json. Также объявим webpack-merge в константу merge.

Таким образом webpack.build.conf.js выглядит так:

    const merge = require('webpack-merge')
    const baseWebpackConfig = require('./webpack.base.conf')

    const buildWebpackConfig = merge(baseWebpackConfig, {
      // BUILD settings gonna be here
      mode: 'production',

      plugins: []
    });

    // export buildWebpackConfig
    module.exports = new Promise((resolve, reject) => {
      resolve(buildWebpackConfig)
    })

В dev мы укажем mode: ‘development’, который мы точно также удалили из ярлыков в package.json.

Также объявим webpack-merge в константу merge. Добавим порт 8081 и настроим overlay.

Таким образом webpack.build.conf.js выглядит так:

    const merge = require('webpack-merge')
    const baseWebpackConfig = require('./webpack.base.conf')

    const devWebpackConfig = merge(baseWebpackConfig, {
      // DEV settings gonna be here
      mode: 'development',

      devServer: {
        // historyApiFallback: true,
        // noInfo: true,
        overlay: {
          warnings: true,
          errors: true
        },
        port: 8081,
      }

    // export devWebpackConfig
    module.exports = new Promise((resolve, reject) => {
     resolve(devWebpackConfig)
    })

Webpack devtool - карта для нашего CSS

Webpack devtool пригодиться чтобы чтобы подключить карту для CSS файлов. Посколько мы используем SASS нельзя просто так написать:

    devtool: 'cheap-module-eval-source-map',

Потому что в таком случае у нас не будет работать вложенные sass модули в в файл main.scss.

Для того чтобы import ‘./example.scss’

Отображался корректно объявим вебпак в константу. Обратимся к вебпаку чтобы вытащить палагин SourceMapDevToolPlugin. Выглядеть это будет так:

      // Source map
      devtool: 'cheap-module-eval-source-map',
      plugins: [
        new webpack.SourceMapDevToolPlugin({
          filename: "[file].map"
        }),
      ]

Здесь не обязательно создавать саму карту или же делать ярлык на который ссылается file. Теперь, если запустить дев разработку можно увидеть что на каждую строчку css кода выводится корректный scss файл!

Webpack обработка изображений. Подключаем file-loader

Чтобы обработать картинки в Webpackе. нам нужно поставить обработчик для наших img файлов. Для этого установим пакетfile-loader`.

В консоли:

    npm install --save-dev file-loader 

Далее в базовом файле конфигураций:

         {
          test: /\.(png|jpg|gif|svg)$/,
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
          },

Теперь мы можем вставлять файлы без ошибок, но что делать с копированием этих изображений?

Устновка и настройка copy-webpack-plugin

Давайте установим и настроим сopy-webpack-plugin в сборку webpack. С помощь этого плагина мы будем копировать наши изображения и статичные файлы из dev в build. Чтобы в последующем мы могли к ним обращаться.

В консоли:

    npm install copy-webpack-plugin --save-dev 

Объявим:

    const CopyWebpackPlugin = require('copy-webpack-plugin'); 

Обратимся к плагину

        new CopyWebpackPlugin([
          { from: PATHS.src + '/img', to: `img` },
          { from: PATHS.src + '/static' },
        ]),

Вот и все, теперь наши файлы копируются и мы можем обращаться к ним через dist

Установка и настройка html-webpack-plugin в webpack 4

Этот плагин нам понадобиться чтобы избавиться от index.html в корне проекта и перенести его в папку src и в дальнейшем скопировать его в dist.

Чтобы установить плагин html-webpack-plugin в консоли пропишем:

    npm install html-webpack-plugin --save-dev 

Объявим:

    const HtmlWebpackPlugin = require('html-webpack-plugin'); 

В основном файле конфига напишем, что и куда должен копировать webpack 4:

        new HtmlWebpackPlugin({
          hash: false,
          template: './src/index.html',
          filename: 'index.html',
        }),

Теперь мы можем писать код в главном хтмл - ’./src/index.html' и он будет автоматический копироваться в папку dist и также будет работать live-reload для html.

Исходный код: https://github.com/vedees/webpack-template