webpack自动刷新

itvincent 发布于2019-08-19 17:34 / 969人阅读

摘要：不修改配置文件推荐运行浏览器打开在中添加运行浏览器打开修改配置文件运行不用添加官网上说的参数浏览器打开这种方式的缺点会生成多余的文件，并且只能手动删除配置文件中的只能为数组，不能用于多个入口的情况上

webpack.config.js

var path = require("path");

module.exports = {
  entry: {
    index:"./js/components/index"
  },
  externals: [{
    "react-dom":"ReactDOM",
    "react":"React"
  }],
  output: {
    path:path.resolve(__dirname,"js/components"),
    filename: "bundle.js"
  },
  module: {
    loaders:[
    {
      test: /.js[x]?$/,
      include: path.resolve(__dirname, "js/components"),
      loader: "babel",
      query: {
        presets: ["es2015","react"]
      }
    },
    ]
  },
  resolve: {
    extensions: ["", ".js", ".jsx"],
    alias:[
    {"react-dom":"./libs/react-dom.js","react":"./libs/react.js"}
    ]
  }
};

1.html

...

不修改配置文件(推荐) Iframe mode

运行webpack-dev-server

浏览器打开http://localhost:8080/webpack-dev-server/1.html

Inline mode

在1.html中添加

运行webpack-dev-server

浏览器打开http://localhost:8080/1.html

修改配置文件

webpack.config.js

...
module.exports = {
  entry: ["webpack/hot/dev-server","webpack-dev-server/client?http://localhost:8080","./js/components/index"],
  ...
  plugins: [
  new webpack.HotModuleReplacementPlugin()
  ]
};

运行webpack-dev-server,不用添加官网上说的--inline --hot参数

浏览器打开http://localhost:8080/1.html

这种方式的缺点:

会生成多余的js,json文件，并且只能手动删除

配置文件中的entry只能为数组，不能用于多个入口的情况

    ...
    entry: {
        a: "./a",
        b: "./b",
        c: ["./c", "./d"]
    },
    output: {
        path: path.join(__dirname, "dist"),
        filename: "[name].entry.js"
    }
    ...

上面所有方式都需要先运行webpack -w监听文件变化

代码

参考
官网文档

云服务器 GPU云服务器自动刷新代码 html自动刷新 cdn自动刷新自动刷新设置教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78640.html

Express结合Webpack的全栈自动刷新

摘要：如果修改的是里的文件，保存后，服务器将自动重启，浏览器会在服务器重启完毕后自动刷新。从开始首先，已经想到了开发流程中的自动刷新，这就是。在以前的一篇文章BrowserSync，迅捷从免F5开始中，我介绍了BrowserSync这样一个出色的开发工具。通过BrowserSync我感受到了这样一个理念：如果在一次ctrl + s保存后可以自动刷新，然后立即看到新的页面效果，那会是很棒的开...

Simon 2019-08-21 13:30 评论0 收藏0
从零开始的webpack生活-0x002：devServer自动刷新

摘要：概述上一章已经实现了最简单的配置文件使用和监听功能，这一章要开始实现自动刷新。只能在终端中使用的在章节中指令后标有可以使用的功能，快速调用终端最终项目文件夹结构资源源代码 0x001 概述上一章已经实现了最简单的webpack配置文件使用和webpack监听功能，这一章要开始实现自动刷新。 0x002 浏览器自动刷新创建新的项目框架 - webpack_study + ...

AlanKeene 2019-08-21 17:27 评论0 收藏0
webpack devServer 无法自动刷新浏览器，但是可以自动编译

摘要：后面设置的输出路径都以此为基础用于文件路径查找抽离文件自动生成文件热模块更新把注释掉之后，可以加载成功文件和自动刷新了。估计是因为把文件都抽离到这里了，所以在下，引用和没有效。只是估计，新手上路，目前对的使用还是摸石过河。这几天在学习webpack使用中，发现的一个问题，记录一下问题：1.webpack devServer 无法自动刷新浏览器，但是可以自动编译2.无法加载js文件（不...

DataPipeline 2019-08-26 18:27 评论0 收藏0
webpack学习（三）—— webpack-dev-server

摘要：在项目根目录下创建，通过这个文件来起服务。到这里为止，自动刷新的内容基本讲完了。注意到一点，目前自动刷新都是刷新整个页面。其中表示热加载模块，表示。后续我还会进行更深入的学习，希望和大家共同进步。本文主要介绍以下两方面的内容： webpack-dev-server自动刷新热加载（Hot Module Replacement）自动刷新 webpack-dev-server提供了...

CKJOKER 2019-08-20 12:03 评论0 收藏0
Webpack 和 React 实战

摘要：首先安装然后在的里面加入和两个命令在建立一个服务器为你的代码创建源地址。更新使用语法编写修改加载器的配置方法将添加文件改为在中配置加载器的配置方法接下来需要配置，告诉我们使用了和插件。 TL;DR $ git clone https://github.com/nodejh/start-react-with-webpack react-sample $ cd react-sample &...

gxyz 2019-08-22 10:47 评论0 收藏0
webpack 项目构建：（三）开发环境——本地服务器搭建

摘要：上一章我们了解了的编译环境搭建项目构建二编译环境搭建这一章我们会结合的，介绍本地测试服务器的搭建过程。三开发环境有一些特性是专门用于开发环境的，可以帮助我们搭建一个更好的开发环境。我们可以通过配合使用来搭建本地服务。注：以下教程均在 windows 环境实现，使用其他操作系统的同学实践过程可能会有些出入。上一章我们了解了 webpack 的 ES6 编译环境搭建：webpack...

tolerious 2019-08-22 15:10 评论0 收藏0