首页
所有分类
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 相关文章推荐
拖拉表格的JS函数
Nov 20 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
jQuery自定义组件(导入组件)
Nov 08 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 Javascript
JavaScript实现经纬度转换成地址功能
Mar 28 Javascript
js评分组件使用详解
Jun 06 Javascript
node中koa中间件机制详解
Aug 22 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
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
弱口令(1) 事务(5) 线程(1) 连接数(1) 内存(1) 策略(1) 缓存(3) 访问日志(2) ipv6(1) PV(1)
You might like
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
typecho插件编写教程（六）：调用接口
2015/05/28 PHP
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
js 性能优化之快速响应的用户界面
2017/02/15 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
详解Django-auth-ldap 配置方法
2018/12/10 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
python利用多种方式来统计词频（单词个数）
2019/05/27 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
使用python实现滑动验证码功能
2019/08/05 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
python与idea的集成的实现
2020/11/20 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
Marlies Dekkers内衣美国官方网上商店：高端内衣品牌
2018/11/12 全球购物
Android interview questions
2016/12/25 面试题
应聘教师推荐信
2013/10/31 职场文书
前台文员岗位职责及工作流程
2013/11/19 职场文书
平面设计师工作职责范文
2013/12/03 职场文书
幼儿园运动会加油词
2014/02/14 职场文书
软件售后服务方案
2014/05/29 职场文书
村党支部对照检查材料思想汇报
2014/09/28 职场文书
投标承诺函格式
2015/01/21 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
人与自然观后感
2015/06/16 职场文书
返乡农民工证明
2015/06/24 职场文书
python process模块的使用简介
2021/05/14 Python
Python基础之元组与文件知识总结
2021/05/19 Python
Java基础——Map集合
2022/04/01 Java/Android