webpack实现热更新(实现同步刷新)

介绍了用webpack实现热更新(同步刷新)，分享给大家，希望对大家有所帮助。

解决方案1:

要实现热更新，首先要安装一系列节点命令。如果太麻烦，可以直接看第二种方案，相对简单。

1.webpack命令安装

npm安装webpack -g npm initnpm init -yes //您可以创建默认包。JSON NPM安装web pack-save-dev NPM安装path fs html-web pack-plugin extract-text-web pack-plugin autoprefixer web pack-dev-server-save-dev NPM安装css-loader style-loader-save-dev//style文件，我们需要两种加载器，css-loader和style-loader，css-loader会遍历CSS文件，找到所有的URL(.)并处理它们。样式加载器会将所有样式插入到页面的样式标签中。Webpack用的是命令：(只知道有这个东西，这里就不多介绍了)

webpack-configxxx.js//uses使用另一个配置文件(如webpack.config2.js)来打包web pack-watch//监视更改并自动打包webpack -p//压缩混淆脚本，这非常重要！Webpack -d//生成一个映射文件，以告知哪些模块最终被打包到哪里。-p是一个非常重要的参数。一个700kb的未压缩文件一旦被压缩，直接压缩到180kb(主要是因为style的脚本只占用了一行，导致未压缩的脚本变得非常大)。

2.webpack支持es6转码安装

//安装转码规则NPM安装babel-core babel-loader babel-preset-es 2015 babel-preset-react babel-preset-stage-0-save-dev3、webpack es6 react安装命令：

NPM安装React-DOM React-路由器React-hot-loader CSS-loader JSX-loader-save-dev//React-hot-loader是一个非常好用的React热插件，可以达到修改-运行同步的效果，最好和webpack-dev-server一起使用！注意：

当无法加载css或报告错误时(找不到错误模块：错误：无法解析d : \ workspace \ hbuilder react _ preobject \ web pack-demo 1 \ web PCK \ app中的模块“样式”)

执行这两个命令：

$ NPM iStyle-loader-d $ NPM ICSS-loader-d只要按照命令安装就可以实现。接下来，我附上我的实现代码：我需要几个文件：

1.package.json文件

在package.json文件中添加脚本，方便使用命令：

最终的package.json文件如下

脚本' : { ' start ' : ' node dev-serve . js ' }，最终的package.json文件如下：

{ 'name': '白羽'，' description ' : '实用程序组件为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 '存储库： { 'type': 'git '，' URL ' : ' git ssh ://[email protected]/sahusoftcom/react-utils。git ' }，' devdependencies ' : { ' autoprefixer ' : '^6.6.1','巴别塔-核心' : '^6.21.0','巴别塔-加载器' : '^6.2.10','巴别塔-预置-es 2015 ' : '^6.18.0','巴别塔-预置-巴别塔-预置-以上代码请注意这里，标红部位

2、webpack.config.js文件（网络包主文件)

var webpack=require('webpack ')、path=require('path ')、fs=require('fs ')、html web pack kplugin=require(' html-web pack-plugin ')、extract plugin=require(' extract-text-web pack-plugin ')；模块。导出={ entry : { app :[]./app.js'] }，output: { //输出目录路径： __dirname ' ./__build__ '，publicPath: ' '，filename: 'shared.js '，chunkFilename: '[name].[chunkhash:3].min.js '，}，module: { //在配置文件里添加JSON加载器加载器： [{ test: /\ .js$/，exclude : /^node_modules$/,loader: ' babel ' }，test: /\ .css$/，exclude : /^node_modules$/,loader : extract text plugin。extract(' style '，['css '，' autoprefixer']) }，{ test: /\ .减去$/exclude : /^node_modules$/,loader : extract textplugin。extract(' style '，['css '，' autoprefixer '，' less']) }，{ test: /\ .scss$/，exclude : /^node_modules$/,loader : extract textplugin。extract(' style '，['css '，' autoprefixer '，' sass']) }，{ test: /\ .(eot | woff | SVG | TTF | woff 2 | gif | app cache)(\？|$)/，不包括： /^node_modules$/,loader: '文件加载器？名称=[名称].[ext]' }，{ test: /\ .(png|jpg|gif)$/，exclude : /^node_modules$/,loader: ' URL加载程序？limit=8192 name=images/[hash :8].[姓名]。[ext]' //注意后面那个限制的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图}，{ test: /\ .jsx$/，exclude : /^node_modules$/,loaders:[' jsx '，' babel ']} }，resolve : { extensions 3360[' '，' .js '，' .json'] }，postss :[require(' autoprefixer ')//调用autoprefixer插件，加入各个浏览器的前缀]，plugins: [新的html webpacklugin({ template : })./index.html' })，新的extplugin('[name]-[hash 33603]).css ')，//css随机数新的网络包. HotModuleReplacementPlugin()，//热加载插件新的网络包definepreplugin({ ' process。ENV。node _ ENV ' : ' '开发' ' })，新网络包.NoErrorsPlugin()]}；3、网络包服务文件：dev-serve.js

var config=require(' ./web pack。配置。js’)；var web pack=require(' web pack ')；var WebpackDevServer=require(' web pack-dev-server ')；配置。入口。app。unshift(' web pack-dev-server/client？http://localhost :8099/')；定义变量编译器=web pack(配置)；var server=新的WebpackDevServer(编译器，{公共路径： config。输出。公共路径，stats : { colors 3360 true } })；服务器。听(8099)；这里注意下内容，

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

app.js文件

从反应导入反应从react-dom '导入{ render }从react-路由器“警报”(AAA)导入{路由器，路由，索引路由，链接，索引链接，哈希历史记录}；安装完成webpack命令之后，

运行国家预防机制启动命令，即可实现本地实施同步开发！

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

全部代码在这里：在这里

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

操作步骤：

1、安装完结节之后，为了保证速度，需要使用淘宝镜像，命令如下：

国家预防机制配置集注册表http://registry.npm.taobao.org

(2)国家预防机制配置列表可以查看配置

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

国家预防机制安装webpack -g //-g的意思是安装全局的网络包，但是我们实际的开发中还需要针对单个的项目进行webpack安装，执行命令：3、使用国家预防机制初始化初始化，生成package.json文件：执行命令：

国家预防机制初始化自定义创建包裹。jsonnpm初始化-是可以创建默认的package.json

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

(1) 局部安装Webpack，执行命令：

国家预防机制安装网络包-保存-开发(2)安装反应，保存命令用于将包添加至package.json文件，执行命令：

复制代码代码如下：npm安装反应-唐反应-路由器反应-热-加载器CSS-加载器jsx-加载器html-web pack-插件-保存-开发

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

复制代码代码如下：npm安装巴别塔-加载器巴别塔-核心巴别塔-预置-es2015巴别塔-预置-反应巴别塔-预置-阶段-0 -保存-开发

(4)安装自动刷新热更新服务，安装网络包-开发-服务器执行命令：

国家预防机制安装网络包-开发-服务器-保存-开发(5)在package.json文件中为剧本添加，方便使用开启服务命令：

脚本' : { ' build ' : ' web pack '，' dev ' : ' web pack-dev-server-devtool eval-progress-colors-content-base build ' }包。JSON全部文件附上：

{ 'name': 'yubai8 '，' version': '1.1.1 '，' main': 'index.js '，' dependencies': {}，' devdependencies ' : { ' html-web pack-plugin ' : '^2.26.0' '，' web pack-dev-server ' : '^1.16.2' '，' scripts ' : { ' build ' web pack '，' dev': 'webpack-dev这里有一点提醒大家，package.json中名字不能跟我们的模块和项目文件目录同名！

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

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

var path=require('path ')、webpack=require('webpack ')、html web pack kkplugin=require(' html-web pack-plugin ')；模块。导出={ entry :[' web pack/hot/dev-server '，path . resolve(_ dirname)，/app.js')]，输出： { path : path。解析(_ _ dirname，' ./__build__ ')，filename: 'bundle.js' }，devServer: { inline: true，port: 8099 }，模块： { loaders :[{ test :/\ .js？$/，排除：/(node _ modules | bower _ components)/，loader: 'babel '，query : {预设s :[' es 2015 '，' react ']} } } })，plugins :[新的html webpackkplugin({ template : })./index.html' })，新的网络包.hotmoduleereplacementplugin()]}；上面第五行/app.js '是你的射流研究…入口文件

安装完成之后运行命令

1、根目录下执行命令，其中一个：

国家预防机制运行构建线上目录国家预防机制运行开发开发目录2.浏览器直接访问：http://localhost :8099/index。超文本标记语言

解决方案二：代码链接

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