@RIBAdminio
немного Системный, немного программист.

Как добавить в webpack pug кэширование?

Добрый день.
Верстаю сайт состоящий из 40+ pug модулей, при изменении pug файла компилируется все 40+ модулей, и это занимает много времени.
Подскажите, есть ли возможность добавить кэширование в pug-loader или какой-то другой способ заставить webpack перекомпилировать только изменённые pug файлы?

Конфигурации файлов webpack и pug прикладываю ниже
webpack:

const path = require ('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge = require('webpack-merge');
const pug = require ('./webpack/pug');
const devserver = require('./webpack/devserver');
const sass = require('./webpack/sass');
const css = require('./webpack/css');
const extractCss = require('./webpack/css.extract');
const images = require('./webpack/images');
const fonts = require('./webpack/fonts');

const PATHS = {
  source: path.join(__dirname, 'source'),
  build: path.join(__dirname, 'build')
};

const common= merge([
  {
    mode:'',
    entry: {
      'index': PATHS.source + '/pages/index/index.js',
    },
    output: {
      path: PATHS.build,
      publicPath: '/',
      filename: 'js/[name].js'
    },
    plugins:[
      new HtmlWebpackPlugin({
        filename:'index.html',
        chunks: ['index', 'common'],
        template: PATHS.source + '/pages/index/index.pug'
      }),
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      })
    ],
    optimization:{
      splitChunks:{
        chunks: 'all',
        name: 'common'
      }
    },
    devtool:'',
  },
  pug(),
  images(),
  fonts()
]);

const developmentConfig ={
  devServer: {
    contentBase:'./build',
    hot: true, 
    stats: 'errors-only',
    port: 9000,
    watchContentBase: true
  }
};

module.exports = function(env){
  common.mode = env;
  if (env === 'production'){
    common.devtool = false;
    return merge([
      common,
      extractCss(),
    ])
  }
  if (env === 'development'){
    common.devtool = 'eveal-sourcemap';
    return merge([
      common,
      devserver(),
      sass(),
      css()
    ])
  }
};


pug:

module.exports = function(){
	return {
		module:{
			rules: [
				{
					test: /\.pug$/,
					loader:'pug-loader',
					options:{
						pretty: true
					}
				}
			]
		}
	}
}



P.S.
Поиски в интернете привели меня только к тому, что нужно обновить html-webpack-plugin до версии 4.0, что я и сделал, однако это не помогло.
  • Вопрос задан
  • 62 просмотра
Решения вопроса 1
Попробуй cache-loader
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы