webpack-dev-server 没能实时刷新,为什么

发布于 2022-09-11 16:20:55 字数 4284 浏览 20 评论 0

webpack.config.base.js

const path = require("path") // 获取绝对路径用
const webpack = require("webpack") // wabpack核心
const HtmlWebpackPlugin = require("html-webpack-plugin") // 动态生成html
const ExtractTextPlugin = require("extract-text-webpack-plugin")

const sourcePath = path.resolve("src")

module.exports =  {
  //设置人口文件的绝对路径
  entry: {
    bundle: ["babel-polyfill", path.resolve("src/index.js")],
    vendor: ["react", "react-dom", "echarts"]
  },
  output: {
    path: path.resolve("./static"),
    filename: "[name].[hash:8].js"
  },
  resolve: {
    extensions: [".js", ".jsx", ".scss"],
    alias: {
      'resource': path.resolve("./src/util/resource.js"),
      'static': path.resolve("./src/static"),
      'utils': path.resolve("./src/util/utils.js"),
      'service': path.resolve("./src/service"),
      'components': path.resolve("./src/components"),
      'containers': path.resolve("./src/containers"),
      'constants': path.resolve("./src/constants"),
      'api': path.resolve("./src/api/index.js")
    },
    modules: [sourcePath, "node_modules"]
  },
  plugins: [
      new HtmlWebpackPlugin({
          // title: '贵州省煤矿产业云平',// 标题
          favicon:  path.resolve("./src/static/images/favicon.png"),
          template: './src/index.html', // 模板文件
          filename: './index.html' // 产出后的文件名称
      }),
      new ExtractTextPlugin("bundle.[hash:8].css")
  ]
};

webpack.dev.config.js

//上帝保佑,永无bug
const path = require("path")
const webpack = require("webpack")
const sourcePath = path.resolve("src")
const openBrowserWebpackPlugin = require("open-browser-webpack-plugin")
const webpackMerge = require('webpack-merge')
const baseConfig = require('./webpack.config.base')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const proxyConfig = require('./proxy')
// const WebpackDevServer = require('webpack-dev-server')

module.exports = webpackMerge(baseConfig, {
  devServer: {
    disableHostCheck: true,
    hot: true,
    inline: true,
    historyApiFallback: true,
    port: 3000, // 配置端口号
    host: "0.0.0.0",
    contentBase: "./", // 配置文件的根目录
    proxy: proxyConfig
  },
  module: {
    // 配置编译打包规则
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
      },
      {
        test: /\.css/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: ["css-loader"]
        })
      },
      {
        test: /\.scss/,
        exclude: path.resolve(__dirname, "./src/static/scss/app.scss"),
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            "css-loader?modules&localIdentName=[local]_[hash:base64:6]",
            "postcss-loader",
            "sass-loader",
            "resolve-url-loader",
            "sass-loader?sourceMap"
          ]
        })
      },
      {
        test: /\.scss/,
        include: path.resolve(__dirname, "./src/static/scss/app.scss"),
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            "css-loader",
            "postcss-loader",
            "sass-loader",
            "resolve-url-loader",
            "sass-loader?sourceMap"
          ]
        })
      },
      {
        test: /\.(woff|woff2|ttf|svg|eot)(\?t=[\s\S]+)?$/,
        use: ["url-loader?limit=1000&name=files/[md5:hash:base64:10].[ext]"]
      },
      {
        test: /\.(jpg|png|gif|swf)$/,
        use: ["url-loader?limit=1000&name=files/[md5:hash:base64:10].[ext]&outputPath=img/"]
      },
      {
        test: /\.json$/,
        use: ["json-loader"]
      }
    ]
  },
  devtool: "source-map",
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ["vendor"],
      minChunks: Infinity,
      filename: "js/[name].js"
    }),
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("development")
      }
    }),
    new openBrowserWebpackPlugin({ url: "http://localhost:3000" })
  ]
});

package.json

"start": "./node_modules/.bin/webpack-dev-server --inline --config webpack.dev.config.js"

运行start;
是哪里除了问题?项目run起来无法实时刷新,只能手动刷新页面查看改变

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

忘你却要生生世世 2022-09-18 16:20:55

多加一个插件在plugins:new webpack.HotModuleReplacementPlugin()

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文