Как настроить автоматическое обновление html в webpack?

Question

[boga-net]

Здравствуйте. После 6 часов головной боли добился компиляции .sass в css и автоматической перезагрузки страницы. Теперь для полного счастья ещё бы автоматическое обновление страницы при изменении html файла. Какие модули нужно установить и как настроить ? Насколько это сложно ?

package.json

"devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "node-sass": "^4.9.0",
    "path": "^0.12.7",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.20.3",
    "webpack": "^4.9.1",
    "webpack-cli": "^2.1.4",
    "webpack-dev-server": "^3.1.4"
  }

webpack.config.js

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const cleanDist = new CleanWebpackPlugin(['dist']);

let conf = {
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, './dist/'),
		filename: 'main.js',
		publicPath: 'dist/'
	},
	devServer: {
		overlay: true
	},
	module: {
		rules: [
			{
        test: /\.sass$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader']
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ['file-loader']
      }
		]
	},
	plugins: [
		cleanDist,
    new ExtractTextPlugin('style.css')
  ]
};

module.exports = (env, options) => {
	let production = options.mode === 'production';

	conf.devtool 	= production 
								? false
								: 'eval-sourcemap';

	return conf;
}

структура :

• index.html
  
• webpack.config.js
  
• package.json
  
• src
  
  • index.js
    
  • css
    
    • style.sass
      
    
    
  
  
• node_modules
  

Answer 1

[Никита Егоров]

Вроде как только через препроцессор html - pug.

npm i -D pug pug-plain-loader
Инструкция по подключению:
https://www.npmjs.com/package/pug-plain-loader
Документация:
https://pugjs.org/api/getting-started.html

И ещё. ExtractTextPlugin официально не поддерживается с webpack 4. Рекомендуется использовать MiniCssExtractTextPlugin. Он от тех же разработчиков, но без багов и прочего + оф. поддерживается.

Comments

[boga-net]

Спасибо

Answer 2

[Anubis]

Стоит ли игра свеч? Так ли часто вносятся изменения в index.html? По идее, это просто точка входа, в которой подключаются зависимости. А подключение зависимостей можно автоматизировать и добавить к именам хэширование для предотвращения зажёвывания их в кэш браузера можно при помощи плагина HtmlWebpackPlugin. Будет сам обновлять и с перезагрузками всё в порядке будет.

Comments

[boga-net]

Стоит ли игра свеч?

Это хороший вопрос. Но и пол дня потраченных на вебпак, чтобы страница сама обновлялась и была подсветка синтаксиса .sass - тоже того не стоило, если подумать. Я до этого пользовался Koala, а нажать CTRL+R - не составляло особого труда. Отвечая на ваш вопрос про частоту изменений в html - да, часто, если брать большинство моих ситуаций. А так, если уж начинать пользоваться вебпаком, то почему бы один раз не настроить всё под себя и подключить тот же вотчер за html ?