webpack 局部热更新没有起作用_webpack 局部更新 - CSDN
精华内容
参与话题
  • vue-cli3+webpack热更新失效问题

    千次阅读 2019-06-10 18:49:16
    A项目中遇到问题,热更新失效,百思不得其解,查询搜索vuecli3热更新失效、vue histroy 模式热更新失效,网上看到不少方法,npm重新安装,不要用淘宝镜像cnpm安装;npm安装yarn,再用yarn重新install,yarn serve启动...

    1、起因

    A项目中遇到问题,热更新失效,百思不得其解,查询搜索vuecli3热更新失效、vue histroy 模式热更新失效,网上看到不少方法,npm重新安装,不要用淘宝镜像cnpm安装;npm安装yarn,再用yarn重新install,yarn serve启动,在npm run serve 启动等方法都不好用。github有类似问题https://github.com/vuejs/vue-cli/issues/1559,有次得到启发可能版本不同导致。

    对比热更新正常的项目B的几个配置文件,重点查看package.json文件,发现有webpack版本不同

    2、解决方案

    初步断定是webpack版本原因,搜索关键词就变成了webpack4.0热更新失效,webpack4.0热更新开启由此查询查询尝试。原因大概是webpack4.0需要手动配置开启热更新,默认没有开启

    2.1、局部安装依赖webpack-dev-server
     

    npm install --save-dev webpack-dev-server

    2.2、在webpack.config.js配置相关参数

    增加devServer的配置

    const path = require('path');
    
    module.exports = {
        entry: './index.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'youname.js'
        },
        plugins: [
        ],
        devServer: {
            contentBase: path.join(__dirname, 'page'),
            compress: true,
            port: 8080
        }
    };

    2.3、在package.json中的scripts对象添加命令,开启本地服务

    "server": "webpack-dev-server --open"
    

     如果server有其他命令执行,在后面增加这一句命令就可以了

     

    2.4、vue.config.js配置,开启热更新

     devServer: {
            disableHostCheck: true,//webpack4.0 开启热更新
     }

     

    2.5、最后执行npm run server即可,热更新失效问题解决

     

    展开全文
  • var hotMiddleware = require('webpack-hot-middleware')(compiler) // force page reload when html-webpack-plugin template changes compiler.plugin('compilation', function (compilation) {

    在dev-server.js里面

    var hotMiddleware = require('webpack-hot-middleware')(compiler)
    // force page reload when html-webpack-plugin template changes
    compiler.plugin('compilation', function (compilation) {
      compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
        hotMiddleware.publish({ action: 'reload' })
        cb()
      })
    })
    已经使用热加载的代码,然后我的项目是用webstorm打开的,发现有时候会热部署,有时候不热部署了,后面发现原因,解决方案如下:
    它默认保存在临时文件,把settings=>appearance=>system=>synchornization=>最后一项勾去掉,热部署替换是没问题的
    展开全文
  • webpack 热更新(实施同步刷新)

    万次阅读 2017-11-03 12:00:34
    解决方案一:实现热更新,首先,安装一系列的node命令,如果嫌麻烦,你可以直接看解决方案二,相对来说比较简单。1、webpack命令安装npm install webpack -g npm initnpm init -yes //可以创建默认的package.json ...

    解决方案一:


    实现热更新,首先,安装一系列的node命令,如果嫌麻烦,你可以直接看解决方案二,相对来说比较简单。

    1、webpack命令安装
    npm install webpack -g  
    
    npm init
    
    npm init -yes //可以创建默认的package.json 
    
    npm install webpack --save-dev  
    
    npm install  path fs html-webpack-plugin extract-text-webpack-plugin autoprefixer webpack-dev-server --save-dev
    
    npm install css-loader style-loader --save-dev//样式文件,我们需要两种loader,css-loader 和 style-loader,css-loader会遍历css文件,找到所有的url(...)并且处理。style-loader会把所有的样式插入到你页面的一个style tag中。

    webpack 使用命令:(知道有这个东西就行,这里不做过多介绍)

    webpack --config XXX.js //使用另一份配置文件(比如webpack.config2.js)来打包
    
    webpack --watch //监听变动并自动打包
    
    webpack -p//压缩混淆脚本,这个非常非常重要!
    
    webpack -d//生成map映射文件,告知哪些模块被最终打包到哪里了
    
    其中的 -p 是很重要的参数,曾经一个未压缩的 700kb 的文件,压缩后直接降到 180kb (主要是样式这块一句就独占一行脚本,导致未压缩脚本变得很大) 。
    


    2、webpack 支持es6转码安装

    //安装转码规则
    npm install babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 –save-dev


    3、webpack + es6 + react 安装命令:

    npm install  react react-dom react-router react-hot-loader css-loader  jsx-loader --save-dev  
    
    //react-hot-loader 是一款非常好用的 React 热插拔的加载插件,通过它可以实现修改-运行同步的效果,配合 webpack-dev-server 使用更佳!


    附注:

    css加载不出来的时候或者报错的时候(ERROR Module not found: Error: Cannot resolve module ‘style’ in D:\workspace\HBuilder React_Probject\webPack-demo1\webpck\app)

    执行这两个命令:

    $ npm i style-loader -D
    
    $ npm i css-loader -D



    只要你按照命令安装,即可实现,接下来我附加上我的实现代码:需要几个文件:

    1、package.json文件

    在package.json文件中为scripts添加,方便使用命令:

    最终package.json文件如下

      "scripts": {
        "start": "node dev-serve.js"
      },



    最终package.json文件如下:

    {
      "name": "yubai",
      "description": "Utility components for react js",
      "version": "1.1.1",
      "keywords": [
        "react-component",
        "react-utils",
        "react utility"
      ],
      "scripts": {
        "start": "node dev-serve.js"
      },
      "src": "src",
      "test": "test",
      "dist": "dist",
      "mainInput": "ReactUtils",
      "mainOutput": "main",
      "dependencies": {
        "async": "^0.9.0",
        "backbone": "^1.1.2",
        "bootstrap": "^3.2.0",
        "es6-promise": "^1.0.0",
        "flux": "^2.0.1",
        "font-awesome": "^4.2.0",
        "humps": "0.0.1",
        "jquery": "^2.1.1",
        "jquery.ui.widget": "^1.10.3",
        "json5": "^0.2.0",
        "less": "^1.7.5",
        "less-loader": "^0.7.7",
        "lodash": "^2.4.1",
        "moment": "^2.8.3",
        "normalizr": "^0.1.2",
        "q": "^1.0.1",
        "react-hot-loader": "^0.4.5",
        "rimraf": "^2.2.8",
        "routes": "^1.2.0",
        "superagent": "^0.18.2",
        "codemirror": "3.20.0"
      },
      "repository": {
        "type": "git",
        "url": "git+ssh://git@github.com/sahusoftcom/react-utils.git"
      },
      "devDependencies": {
        "autoprefixer": "^6.6.1",
        "babel-core": "^6.21.0",
        "babel-loader": "^6.2.10",
        "babel-preset-es2015": "^6.18.0",
        "babel-preset-react": "^6.16.0",
        "css-loader": "^0.6.12",
        "extract-text-webpack-plugin": "^1.0.1",
        "fs": "0.0.1-security",
        "gulp": "^3.8.8",
        "gulp-concat": "^2.4.0",
        "gulp-jshint": "^1.8.4",
        "gulp-rename": "^1.2.0",
        "gulp-sass": "^0.7.3",
        "gulp-uglify": "^1.0.1",
        "gulp-util": "^3.0.1",
        "html-webpack-plugin": "^2.26.0",
        "jshint-loader": "~0.6.0",
        "jsx-loader": "^0.11.2",
        "karma": "~0.10.9",
        "karma-chrome-launcher": "~0.1.2",
        "karma-firefox-launcher": "~0.1.3",
        "karma-jasmine": "~0.1.5",
        "karma-phantomjs-launcher": "~0.1.1",
        "karma-script-launcher": "~0.1.0",
        "karma-webpack-plugin": "~1.0.0",
        "path": "^0.12.7",
        "postcss-loader": "^1.2.1",
        "react": "^15.4.2",
        "react-dom": "^15.4.2",
        "react-hot-loader": "^0.4.5",
        "react-router": "^3.0.0",
        "style-loader": "^0.6.5",
        "url-loader": "~0.5.4",
        "webpack": "^1.14.0",
        "webpack-dev-server": "^1.16.2"
      },
      "bugs": {
        "url": "https://github.com/sahusoftcom/react-utils/issues"
      },
      "homepage": "https://github.com/sahusoftcom/react-utils#readme",
      "main": "app.js",
      "author": "yubai",
      "license": "ISC"
    }
    

    以上代码请注意这里,标红部位

    这里写图片描述



    2、webpack.config.js文件(webpack主文件)

    var webpack = require('webpack'),
        path = require('path'),
        fs = require('fs'),
        HtmlWebpackPlugin = require('html-webpack-plugin'),
        ExtractTextPlugin = require('extract-text-webpack-plugin');
    
    module.exports = {
        entry: {
            app: ["./app.js"]
        },
        output: { //输出目录
            path: __dirname + './__build__',
            publicPath: "",
            filename: 'shared.js',
            chunkFilename: '[name].[chunkhash:3].min.js',
        },
        module: { //在配置文件里添加JSON loader
            loaders: [{
                test: /\.js$/,
                exclude: /^node_modules$/,
                loader: 'babel-loader'
            }, {
                test: /\.css$/,
                exclude: /^node_modules$/,
                loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer'])
            }, {
                test: /\.less$/,
                exclude: /^node_modules$/,
                loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer', 'less'])
            }, {
                test: /\.scss$/,
                exclude: /^node_modules$/,
                loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer', 'sass'])
            }, {
                test: /\.(eot|woff|svg|ttf|woff2|gif|appcache)(\?|$)/,
                exclude: /^node_modules$/,
                loader: 'file-loader?name=[name].[ext]'
            }, {
                test: /\.(png|jpg|gif)$/,
                exclude: /^node_modules$/,
                loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
                    //注意后面那个limit的参数,当你图片大小小于这个限制的时候,会自动启用base64编码图
            }, {
                test: /\.jsx$/,
                exclude: /^node_modules$/,
                //loaders: ['jsx', 'babel'],//1.0的配置
                loaders: ['jsx-loader', 'babel-loader'],//2.0++ 必须加上 loader
            }]
        },
        resolve: {
            //extensions: ['', '.js', '.json'],
            extensions: ['.js', '.json'],//webpack 2.0以上的配置 2017-11-03改
        },
        postcss: [
            require('autoprefixer') //调用autoprefixer插件,加入各个浏览器的前缀
        ],
        plugins: [
            new HtmlWebpackPlugin({
                template: './index.html'
            }),
            new ExtractTextPlugin('[name]-[hash:3].css'), //css随机数
            new webpack.HotModuleReplacementPlugin(), //热加载插件
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': '"development"'
            }),
            new webpack.NoErrorsPlugin()
        ]
    };



    3、webpack服务文件:dev-serve.js

    var config = require("./webpack.config.js");
    var webpack = require('webpack');
    var WebpackDevServer = require('webpack-dev-server');
    
    config.entry.app.unshift("webpack-dev-server/client?http://localhost:8099/");
    
    var compiler = webpack(config);
    var server = new WebpackDevServer(compiler, {
        publicPath: config.output.publicPath,
        stats: {
            colors: true
        }
    });
    server.listen(8099);

    这里注意下内容,

    这里写图片描述



    我的app.js是这么配置的,很简单,

    app.js文件

    import React from 'react'
    import { render } from 'react-dom'
    import { Router, Route, IndexRoute, Link, IndexLink, hashHistory } from 'react-router'
    
    alert("AAA");

    安装完成webpack命令之后,

    运行 npm start 命令 ,即可实现本地实施同步开发!

    接下来就编写你的代码即可!


    全部代码在这里:在这里



    解决方案二:(推荐使用)


    操作步骤:

    1、安装完Node之后,为了保证速度,需要使用淘宝镜像,命令如下:

    1npm config set registry "http://registry.npm.taobao.org"2npm config list  可以查看配置  

    2.安装完nodejs之后,打开终端,执行命令:

    (1)npm install webpack -g  
    
    //-g的意思是安装全局的webpack,但是我们实际的开发中还需要针对单个的项目进行webpack安装,执行命令:
    

    3、使用 npm init 初始化,生成 package.json 文件:执行命令:

      1. npm init 自定义创建package.json  
      2. npm init -yes 可以创建默认的package.json  

    现在我们的项目已经创建好了,接下来我们来添加依赖包及插件

    (1) 局部安装Webpack,执行命令:

    npm install webpack --save-dev  



    (2)安装React,–save 命令用于将包添加至 package.json 文件,执行命令:

    npm install  react react-dom react-router react-hot-loader css-loader  jsx-loader html-webpack-plugin --save-dev 



    (3) 安装babel插件,babel插件是webpack需要的加载器,如果没有这几个加载器我们的jsx语法,和es2015语法就会报错。

    npm install babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-0 --save-dev  



    (4)安装自动刷新热更新服务,安装webpack-dev-server执行命令:

    npm install webpack-dev-server --save-dev



    (5)在package.json文件中为scripts添加,方便使用开启服务命令:

    "scripts": {  
        "build": "webpack",  
        "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"  
    }  

    package.json全部文件附上:

    {
      "name": "yubai8",
      "version": "1.1.1",
      "main": "index.js",
      "dependencies": {},
      "devDependencies": {
        "html-webpack-plugin": "^2.26.0",
        "webpack-dev-server": "^1.16.2"
      },
      "scripts": {
        "build": "webpack",
        "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
      },
      "author": "",
      "license": "ISC",
      "keywords": [],
      "description": ""
    }
    

    这里有一点提醒大家,package.json中name不能跟我们的模块和项目文件目录同名!



    安装完命令之后,创建webpack的配置文件:webpack.config.js文件

    webpack.config.js文件配置如下:

    var path = require('path'),
        webpack = require('webpack'),
        HtmlWebpackPlugin = require('html-webpack-plugin');
    module.exports = {
        entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app.js')],
        output: {
            path: path.resolve(__dirname, './__build__'),
            filename: 'bundle.js'
        },
        devServer: {
            inline: true,
            port: 8099
        },
        module: {
            loaders: [{
                test: /\.js?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                }
    
            }]
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './index.html'
            }),
            new webpack.HotModuleReplacementPlugin()
        ]
    };

    上面第五行 ‘./app.js’ 是你的js入口文件

    解决方案二:链接地址



    安装完成之后运行命令

    1、根目录下执行命令,其中一个:

    npm run build         线上目录
    
    npm run dev           开发目录

    2.浏览器直接访问:

    http://localhost:8099/index.html

    ok,完成!


    2017-11加

    webpack最近更新版在 在这里

    展开全文
  • 各种框架开发是相当流行,今天,带大家使用vue-cli搭建简单的vue+webpack热更新项目。 准备工作:你的电脑要安装node(自带npm),这一点就不多说了,作为前端必备,哈哈。 第一步:使用npm全局安装webpack和vue-...

    近年来,前端的发展速度惊人的快,要想跟上前端的进军速度,每时每刻都要学习。各种框架开发是相当流行,今天,带大家使用vue-cli搭建简单的vue+webpack热更新项目。

    准备工作:你的电脑要安装node(自带npm),这一点就不多说了,作为前端必备,哈哈。

    第一步:使用npm全局安装webpack和vue-cli(如果安装速度慢,可以使用cnpm淘宝镜像安装,直接百度就有)

    $ npm install webpack vue-cli -g

    这里写图片描述
    这几行warn是警告,自动忽略即可,这样代表安装成功

    第二步:使用vue init命令创建模板文件(如果这时报错vue不是指定命令,请看后文报错总结)
    vue init 你用的模板工具 项目名称 (这里采用webpack作为模板工具)

    $ vue init webpack sharismSpace-personel

    这里写图片描述
    这样,我们就创建好了一个vue+webpack项目,目录结构如下
    这里写图片描述
    第三步:如果想要运行,请cd到这个目录下,然后npm run dev即可
    这里写图片描述
    然后,浏览器打开对应网址:http://localhost:8080,出现如下画面,恭喜,说明安装成功!
    这里写图片描述

    报错总结:

    一:使用vue init命名报错(vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称…),如下图:
    这里写图片描述
    原因:这是因为第一次安装vue-cli,但是并没有更新到环境变量中导致的,需要我们手动配置一下。
    解决步骤:
    1. 找到系统磁盘中安装npm的根路径,然后查找vue.cmd
    这里写图片描述

    2.右键找到相应的目录,然后将npm根目录添加到系统环境变量中
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述

    3.添加完成后一路确认,之后重新打开vscode控制台或者powershell,再次输入命令,就好使了。

    展开全文
  • 1.安装依赖webpack项目依赖npm和nodejsbrew install npm npm install node检查版本npm -v node -v2.安装webpack1.全局安装:具体位置如下图npm install webpack -g2.局部安装:当前项目中安装,比如桌面有个webpack...
  • 配置webpack-dev-server

    千次阅读 2019-06-19 18:15:21
    1.相关概念 webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。 webpack-dev-server 主要提供两个功能: ...替换指运行时更新各种模块,即局部...
  • vue的热更新

    千次阅读 2018-10-31 08:46:50
    使用vue的加载可以实现局部内容的刷新,更改数据后,不会刷新整个页面 在webpack.config.js中设置: 对config.devServer中添加属性hot:true 对config.plugins添加 new webpack.HotModuleReplacementPlugin(), ...
  • 有人会问 webpack-dev-server 已经是加载了,能做到只要代码修改了页面也自动更新了,为什么在 react 项目还要安装 react-hot-loader 呢?其实这两者的更新是有区别的,webpack-dev-server 的加载是开发人员修改...
  • webpack-dev-server插件可以实现Webpack的自动打包编译 这样 就不需要每次修改完代码都重新手动输入webpack打包了 2、安装: 在项目的根路径下输入:cnpm i webpack-dev-server -D 将插件安装到项目的本地开发依赖...
  • webpack-dev-server 使用教程

    千次阅读 2018-11-07 21:51:35
    更新ing
  • Hot-Module-Replacement详细配置说明

    千次阅读 2018-06-30 14:40:30
    前言在react工程中要实现加载,就是只更新局部的修改,我们可以使用react-hot-loader。安装依赖npm install --save-dev react-hot-loader修改.babelrc配置文件 { plugins: ["react-hot-loader/babel"] ...
  • A:其实这两者的更新是有区别的,webpack-dev-server 的加载是开发人员修改了代码,代码经过打包,重新刷新了整个页面。而 react-hot-loader 不会刷新整个页面,它只替换了修改的代码,做到了页面的局部刷新。但...
  • 现在因为有HMR局部热更新,所以dllPlugin这两个插件用得少了,不过还是记录一下配置方法,可能以后会再次使用。 这两个插件可以对第三方NPM包预编译,生成*.dll.js,在项目启动和开发中不停的反复Ctrl+S的时候,...
  • webpack的安装和基本使用

    万次阅读 2018-08-23 22:05:12
    webpack概念 中文文档官网: https://www.webpackjs.com/ 网页中常用的静态资源: JS(.js .jsx .coffee .ts(TypeScript中间语言,不能自浏览器中运行,需要编译器进行编译为js语言))  CSS(.css .less .sass -&...
  • webpack-dev-server不能自动刷新问题

    千次阅读 2017-11-14 09:17:29
    使用webpack-dev-server中遇到不能浏览器无法自动刷新的问题;寻找多方答案后明白了一些;...你在webpack.config.js里面的配置output属性是你用webpack打包时候才起作用的,对webpack-dev-server并不起作用2.webpa
  • Webpack 4 入门笔记

    千次阅读 2020-10-12 20:27:13
    Webpack4 入门笔记
  • 几种手动实现HMR的方式

    千次阅读 2018-06-09 14:33:22
    众所周知,在webpack中使用模块替换(HMR),能够使得应用在运行时,无需开发者重新npm run dev、刷新页面,便能更新更改的模块,并且将效果及时展示出来,这无疑极大的改善了前端同学们的生活。 当然,目前有许多...
  • Webpack入门

    万次阅读 2016-08-11 11:24:47
    Webpack 是什么webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。 简单说就是模块加载器,通过使用Webpack,能够像Node.js一样...
  • Webpack配置详解(package.json/webpack.config.js详细配置 ) webpack安装 package.json配置以及模块安装 webpack.config.js配置 开启webpack-dev-server服务 替换插件的安装以及配置 开启自动打开浏览器插件的...
1 2 3 4 5 ... 20
收藏数 1,697
精华内容 678
关键字:

webpack 局部热更新没有起作用