Question

我当前的开发环境正在使用Laravel / Homestead / Vagrant在本地托管我的开发站点（example.dev）setup using this tutorial。我想使我的任务运行程序/开发流程现代化，并且必须进行某种实时/热重载。

我遵循了这个（过时的）教程here，该教程介绍了如何与本地服务器一起运行webpack-dev-server。要点是，它可以将本地服务器上的文件指向webpack-dev-server上的js文件。例如，如果我的本地托管站点位于example.dev，我将在localhost:8080/bundle.js寻找我的js捆绑包。使用此配置，我将在控制台中看到以下内容：

[HMR] Waiting for update signal from WDS...

[WDS] Hot Module Replacement enabled.

文件更改后，我得到：

[WDS] App updated. Recompiling...

[WDS] App hot update...

因此，从代码的角度来看，它似乎可以正常工作，但是实际上没有任何更新。我仍然必须刷新浏览器才能看到任何更改。对于JS和CSS的更改都是如此。

我觉得我真的很接近这一点，但是用尽了所有可能的解决方案。如果有人有想法/建议，请告诉我。

这里是我的webpack.config.js供参考。

const path = require('path');
const webpack = require('webpack');
const fs = require('fs');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = (env, argv) => {

  return {
  entry: './src/js/index.js',

  module: {
    rules: [{
        test: /\.scss$/,
        use: [
            argv.mode !== "production" ? 'style-loader' : MiniCssExtractPlugin.loader,
            {
              loader: "css-loader",
              options: {
                sourceMap: true
              }
            },
            {
            loader: "sass-loader",
            options: {
              file: './src/sass/main.scss',
              sourceMap: true,
              outFile: './src/sass'
            }
          }
        ]
    }]
  },

  devtool: 'inline-source-map',

  devServer: {
    hot: true,
    inline: true,
    contentBase: path.join(__dirname, 'public/js'),
    compress: false,
    port: 8080,
    https: {
      key: fs.readFileSync('../server.key'),
      cert: fs.readFileSync('../server.crt'),
      ca: fs.readFileSync('../rootCA.pem')
    },
    watchOptions: {
      poll: false
    }
  },

  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'public/js'),
    publicPath: 'https://localhost:8080'
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),

    // Generates a static CSS file when .env mode set to Production
    new MiniCssExtractPlugin({
      filename: "../css/[name].css"
    }),
  ]
  }
};

Webpack Dev Server与虚拟盒更新同时进行，但没有注入HMR

0 个答案: