首页
所有分类
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 相关文章推荐
语义化 H1 标签
Jan 14 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
原生js和jquery中有关透明度设置的相关问题
Jan 08 Javascript
JavaScript File API实现文件上传预览
Feb 02 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 Javascript
javaScript嗅探执行神器-sniffer.js
Feb 14 Javascript
使用webpack-dev-server处理跨域请求的方法
Apr 18 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
Vue之beforeEach非登录不能访问的实现（代码亲测）
Jul 18 Javascript
vue内置组件component--通过is属性动态渲染组件操作
Jul 28 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
nginx(76) 日志格式分析(1) Mybatis-Plus(3) create(1) TableField(1) Next.js(1) 子查询(1) mounted(1) 脚手架(2) el-table(1)
You might like
用ＰＨＰ和ＡＣＣＥＳＳ写聊天室(一)
2006/10/09 PHP
php _autoload自动加载类与机制分析
2012/02/10 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
php use和include区别总结
2019/10/13 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
python制作最美应用的爬虫
2015/10/28 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
精美的手工家居和生活用品：Nkuku
2019/11/01 全球购物
医院护理人员的自我评价分享
2013/10/04 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
班主任培训研修日志
2015/11/13 职场文书
建房合同协议书
2016/03/21 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python