账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    webpack-dev-server如何引起浏览器刷新或者模块替换?
    43
    0

    自己基于webpack写了个命令行工具,用的是webpack-dev-server,修改文件没有引起页面重载或者模块重载,具体表现如下:

    1. 修改文件能引起compiled
    2. 刷新能看到修改的内容
    3. websocket接收到了compiled信息

    相关信息:

    "webpack": "^3.11.0",
        "webpack-bundle-analyzer": "^2.9.0",
        "webpack-dev-server": "^2.11.2",
        "webpack-hot-middleware": "^2.21.0",

    devSever配置如下

    devServer: {
        clientLogLevel: 'warning',
        hot: true,
        hotOnly: true,
        contentBase: false,
        compress: true,
        host: HOST || config.dev.host,
        port: PORT || config.dev.port,
        open: config.dev.autoOpenBrowser,
        overlay: config.dev.errorOverlay
          ? { warnings: false, errors: true }
          : false,
        publicPath: config.dev.assetsPublicPath, // /
        proxy: config.dev.proxyTable,
        quiet: true,
        watchOptions: {
          poll: config.dev.poll, // true
        }
      },
      plugins: [
        new webpack.DefinePlugin({
          'process.env': require('../config/dev.env')
        }),
        new webpack.HotModuleReplacementPlugin(),
        // new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
        // new webpack.NoEmitOnErrorsPlugin(),
        // https://github.com/ampedandwired/html-webpack-plugin
        new HtmlWebpackPlugin({
          filename: 'index.html',
          template: dirs.template,
          inject: true
        }),
        // copy custom static assets
        new CopyWebpackPlugin([
          {
            from: dirs.statics,
            to: config.dev.assetsSubDirectory,
            ignore: ['.*']
          }
        ]),
        new FriendlyErrorsPlugin({
          compilationSuccessInfo: {
            messages: [`Your application is running here: http://${config.dev.host}:${config.dev.port}`],
          },
          onErrors: config.dev.notifyOnErrors
            ? utils.createNotifierCallback()
            : undefined
        })
      ]
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 高ジ冷的内在 普通会员 1楼

      Webpack Dev Server 是一个 Node.js 服务,用于热加载 Webpack 配置和应用代码,为开发者提供一个快速、高效和稳定的开发环境。要使 Webpack Dev Server 引起浏览器刷新或模块替换,您可以使用以下方法:

      1. 设置默认刷新:

      在 webpack.config.js 文件中,您可以使用 watch 和 serve 配置选项来设置默认刷新。

      示例代码: javascript module.exports = { // ... devServer: { hot: true, port: 3000, hotModuleReplacement: true, publicPath: './dist', }, // ... };

      在上面的配置中,当编译文件发生改变时,Dev Server 将自动刷新浏览器。

      1. 使用 watch 配置:

      如果您希望 Dev Server 在编译文件发生改变时自动刷新浏览器,您可以使用 watch 配置。例如,您可以添加以下配置:

      示例代码: javascript module.exports = { // ... devServer: { watch: true, port: 3000, hotModuleReplacement: true, publicPath: './dist', }, // ... };

      1. 使用 server 配置:

      如果您希望 Dev Server 在编译文件发生改变时自动刷新浏览器,并使用单独的服务器来处理静态文件,您可以使用 server 配置。例如,您可以添加以下配置:

      示例代码: javascript module.exports = { // ... devServer: { hot: true, port: 3000, hotModuleReplacement: true, publicPath: './dist', publicPath: '/static', }, // ... };

      在上面的配置中,当编译文件发生改变时,Dev Server 将自动刷新浏览器,并将文件分发到 /static 目录下。

      请注意,使用 watch 和 server 配置将使 Dev Server 更加复杂,可能需要更多的时间和精力来管理。此外,还请确保您的开发服务器支持浏览器的缓存刷新功能。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部