Question

此问题与webpack-dev-server hot reload not working重复。 @fafaro的答案可以解决问题，但不能用于生产。

这是我的文件结构

public
  css
    style.css
  index.html
  js
    main.js
src
  index.html
  js
    index.js
node_modules
webpack.config.js
package.json

@fafaro建议在我的ìndex.html中进行以下更改。

<script src="main.js"></script>      // works
<script src="js/main.js"></script> // doesn't work!

这是我的webpack.config.js：

const path = require("path");
const webpack = require("webpack");

// SCSS loader for transpiling SCSS files to CSS
const scssLoader = {
  test: /\.(scss|css)$/,
  use: [
    "vue-style-loader",
    {
      loader: "css-loader",
      options: { modules: false }
    },
    "sass-loader"
  ]
};
// URL loader to resolve data-urls at build time
const urlLoader = {
  test: /\.(png|jpg|svg)$/,
  loader: "url-loader?limit=25000"
};
// Vue loader to resolve single file components
const vueLoader = {
  test: /\.vue$/,
  loader: "vue-loader"
};
const VueLoaderPlugin = require("vue-loader/lib/plugin");

const webpackConfig = {
  mode: "development",
  devtool: "source-map",
  output: {
    path: path.join(__dirname, "public/js"),
    filename: "main.js"
  },
  devServer: {
    contentBase: path.join(__dirname, "public/"),
    port: 80,
    open: "Chrome",
    proxy: {
      "/association": {
        target: {
          host: "localhost",
          port: 8080,
          protocol: "http"
        },
        changeOrigin: true,
        logLevel: "debug"
      }
    }
  },
  module: {
    rules: [scssLoader, urlLoader, vueLoader]
  },
  plugins: [
    new VueLoaderPlugin(),
  ]
};
module.exports = webpackConfig;

问题是我不想在开发和生产版本之间更改index.html。

我的问题是为什么webpack-dev-server不使用我的输出构建路径，以及如何在不修改开发和生产构建之间的任何内容的情况下为存储库结构设置热重载？

我一直在考虑使用devServer.index使用index.html.dev文件但我想知道是否有更好的解决方案？

webpack-dev-server热重装无法正常工作：提供什么内容？

0 个答案: