首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

webpack实现热更新（实施同步刷新）

Posted in Javascript onJuly 28, 2017

本文介绍了webpack实现热更新（实施同步刷新），分享给大家，希望对大家有帮助。

解决方案一：

实现热更新，首先，安装一系列的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"
}

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

webpack实现热更新（实施同步刷新）

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'
    }, {
      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']
    }]
  },
  resolve: {
    extensions: ['', '.js', '.json']
  },
  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);

这里注意下内容，

webpack实现热更新（实施同步刷新）

我的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之后，为了保证速度，需要使用淘宝镜像，命令如下：

（1）npm config set registry "http://registry.npm.taobao.org" 

（2）npm config list  可以查看配置  

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

npm install webpack -g 

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

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

npm init 自定义创建package.json  
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

解决方案二：代码链接

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

webpack实现热更新（实施同步刷新）

- Author -

Rkatsiteli

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
纯js分页代码(简洁实用)
Nov 05 Javascript
js实现表格字段排序
Feb 19 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
详解vue axios中文文档
Sep 12 Javascript
JS计算两个数组的交集、差集、并集、补集（多种实现方式）
May 21 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 Javascript
vue项目创建步骤及路由router
Jan 14 Javascript
openlayers 3实现车辆轨迹回放
Sep 24 Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 #Javascript
解决React Native端口号修改的方法
Jul 28 #Javascript
vue+vux实现移动端文件上传样式
Jul 28 #Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 #Javascript
vue使用vue-cli快速创建工程
Jul 28 #Javascript
用JS实现简单的登录验证功能
Jul 28 #Javascript
基于JavaScript实现图片连播和联级菜单实例代码
Jul 28 #Javascript
403(1) CAD(1) 滚动条(1) Sunmao(1) macos(1) svg(1) 404(1) 输入法(2) sout(1) Sentry(1)
You might like
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
PHP编写RESTful接口
2016/02/23 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
tp5.0框架隐藏index.php入口文件及模块和控制器的方法分析
2020/02/11 PHP
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
在JavaScript应用中实现延迟加载的方法
2015/06/25 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
Vue实现简单分页器
2018/12/29 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
JS实现的自定义map方法示例
2019/05/17 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
小程序自动化测试的示例代码
2020/08/11 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
Python算法之栈（stack）的实现
2014/08/18 Python
在Python的循环体中使用else语句的方法
2015/03/30 Python
Python实现学校管理系统
2018/01/11 Python
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
Monki官网：斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
DataReader和DataSet的异同
2014/12/31 面试题
工程预算与管理应届生求职信
2013/10/06 职场文书
小学生节水倡议书
2015/04/29 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL