Обработка файлов, настройка webpack-merge и copy-webpack-plugin
  • 2019-02-08
  • 421
  • 5

Обработка файлов, настройка 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

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

В консоли:

npm i webpack-merge —save-dev

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

  • webpack.base.conf.js - базовый для мерджа
  • webpack.build.conf.js - конфигурации для билда
  • 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.

Таким образом build 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.

Таким образом dev 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.

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

Поделитесь этой записью или сохраните ее в любую социальную сеть!

  • 2019-02-08
  • 421
  • 5
Комментарии: