本文介绍了webpack实现热更新（实施同步刷新），分享给大家，希望对大家有帮助。
解决方案一：
实现热更新，首先，安装一系列的node命令，如果嫌麻烦，你可以直接看解决方案二，相对来说比较简单。
1、webpack命令安装
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 --watch //监听变动并自动打包
webpack -p//压缩混淆脚本，这个非常非常重要！
其中的 -p 是很重要的参数，曾经一个未压缩的 700kb 的文件，压缩后直接降到 180kb （主要是样式这块一句就独占一行脚本，导致未压缩脚本变得很大） 。
2、webpack 支持es6转码安装
3、webpack + es6 + react 安装命令：
//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）
执行这两个命令：
只要你按照命令安装，即可实现，接下来我附加上我的实现代码：需要几个文件：
1、package.json文件
在package.json文件中为scripts添加,方便使用命令:
最终package.json文件如下
最终package.json文件如下：
以上代码请注意这里，标红部位
2、webpack.config.js文件（webpack主文件）
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$/,loader: ExtractTextPlugin.extract('style',['css','autoprefixer'])
},{
test: /.less$/,'autoprefixer','less'])
},{
test: /.scss$/,'sass'])
},{
test: /.(eot|woff|svg|ttf|woff2|gif|appcache)(\?|$)/,loader: 'file-loader?name=[name].[ext]'
},{
test: /.(png|jpg|gif)$/,loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
//注意后面那个limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图
},{
test: /.jsx$/,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 compiler = webpack(config);
var server = new WebpackDevServer(compiler,{
publicPath: config.output.publicPath,stats: {
colors: true
}
});
server.listen(8099);
这里注意下内容，
我的app.js是这么配置的，很简单，
app.js文件
安装完成webpack命令之后，
运行 npm start 命令 ，即可实现本地实施同步开发！
接下来就编写你的代码即可！
全部代码在这里：
解决方案二：（推荐使用）
操作步骤：
1、安装完Node之后，为了保证速度，需要使用淘宝镜像，命令如下：
（1）npm config set registry "http://registry.npm.taobao.org"
（2）npm config list 可以查看配置
2.安装完nodejs之后,打开终端,执行命令:
3、使用 npm init 初始化，生成 package.json 文件：执行命令:
npm init 自定义创建package.json npm init -yes 可以创建默认的package.json
（1） 局部安装Webpack,执行命令：
（2）安装react,–save 命令用于将包添加至 package.json 文件,执行命令：
（3） 安装babel插件,babel插件是webpack需要的加载器,如果没有这几个加载器我们的jsx语法，和es2015语法就会报错。
（4）安装自动刷新热更新服务，安装webpack-dev-server执行命令：
（5）在package.json文件中为scripts添加,方便使用开启服务命令:
package.json全部文件附上：
这里有一点提醒大家，package.json中name不能跟我们的模块和项目文件目录同名！
安装完命令之后，创建webpack的配置文件：webpack.config.js文件
webpack.config.js文件配置如下：
}]
},new webpack.HotModuleReplacementPlugin()
]
};
上面第五行 ‘./app.js' 是你的js入口文件
安装完成之后运行命令
1、根目录下执行命令,其中一个：
2.浏览器直接访问:http://localhost:8099/index.html
原文链接：https://www.f2er.com/js/37508.html