Как настроить Webpack 4 для горячей перезагрузки HTML-кода? - PullRequest
Новая
       5

Как настроить Webpack 4 для горячей перезагрузки HTML-кода?

0 голосов
/ 03 октября 2018

Я хочу просто горячую перезагрузить HTML-код на index.html, но я не могу понять, как это сделать.Просто включить горячую перезагрузку для кода CSS, но когда дело доходит до html или js, он продолжает перезагружать страницу с изменениями.Я пробовал много разных способов сделать это, включая использование contentBase / watchContentBase, опросов, но, похоже, ничего не работает.По сути, я хочу иметь возможность запускать что-то похожее на vue init webpack.По умолчанию vue webpack имеет конфигурацию, в которой вы можете в горячем режиме перезагрузить все компоненты, включая js html css.Пожалуйста помоги!Вот мой конфиг:

webpack.config.js: 

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


module.exports = {
  entry: './src/js/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    filename: 'js/app.js'
  },
  devServer: {
    hot:true,
    inline:true
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject:true,
      filename: 'index.html',
      template: 'index.html',
      alwaysWriteToDisk: false
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
  ],
};

app.js: 

import '../sass/app.scss';
import '../../index.html';

index.html: 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1 class="h1">Hello world!!!!</h1>
<script src="src/js/app.js"></script>
</body>
</html

package.json 

{
"name": "wptest",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "n19htz",
"private": true,
"scripts": {
  "watch": "cross-env NODE_ENV=development webpack-dev-server --color --mode development --open",
  "dev": "cross-env NODE_ENV=development webpack --mode development --progress --hide-modules",
  "build": "cross-env NODE_ENV=production webpack --mode production --progress --hide-modules"
},
"devDependencies": {
  "@babel/core": "^7.1.2",
  "babel-preset-env": "^1.7.0",
  "babel-loader": "^8.0.4",
  "copy-webpack-plugin": "^4.5.2",
  "cross-env": "^5.2.0",
  "css-loader": "^1.0.0",
  "html-webpack-plugin": "^3.2.0",
  "node-sass": "^4.9.3",
  "path": "^0.12.7",
  "vue-style-loader": "^4.1.2",
  "sass-loader": "^7.1.0",
  "html-loader": "^0.5.5",
  "webpack": "^4.20.2",
  "webpack-cli": "^3.1.2",
  "webpack-dev-server": "^3.1.9"
}

}

...