Question

我只想在index.html上热重载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"
}

}

如何配置Webpack 4进行热重载html代码？

0 个答案: