webpack热更新和常见错误处理
2024-04-05 04:57:34
时间：2016-11-03 10:50:54
地址：https://github.com/zhongxia245/blog/issues/45
webpack热更新
一、要求
- 局部刷新修改的地方
二、如何配置
1、配置 webpack.config.js
下面最重要的是两个地方
webpack入口文件，加上
'webpack-dev-server/client'【必选】 ,'webpack/hot/only-dev-server',【可选】loader加载器， js|jsx 需要加上 react-loader 在最前面
{
test: /\.(js|jsx)$/,
loader: 'react-hot-loader!babel-loader',
exclude: /node_modules/
},
2、配置node的web server服务器
//热更新的关键一句
app.use(require('webpack-hot-middleware')(compiler))
完整的配置
'use strict';
var path = require('path')
var webpack = require('webpack')
module.exports = {
devtool: 'source-map',
cache: true,
entry: {
app: [
'webpack-dev-server/client',
'webpack/hot/only-dev-server',
path.join(__dirname, 'src/index')
],
common: path.join(__dirname, 'src/common')
},
output: {
path: path.join(__dirname, 'static'),
filename: '[name].bundle.js',
chunkFilename: 'chunk/[chunkhash:8].chunk.js',
publicPath: '/FileManage/static/'
},
plugins: [
new webpack.DefinePlugin({
__DEV__: String(true)
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.optimize.CommonsChunkPlugin('vender.js')
],
module: {
loaders: [{
test: /\.(js|jsx)$/,
loader: 'react-hot-loader!babel-loader',
exclude: /node_modules/
}, {
test: /\.css$/,
loader: 'style-loader!css-loader'
}, {
test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)(\?v=[\d\.]+)?$/,
loader: 'file-loader?name=files/[hash:8].[ext]'
}, {
test: /\.json$/,
loader: 'json-loader'
}, {
test: /\.less$/,
loader: 'style!css!less'
}]
},
resolve: {
//自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
extensions: ['', '.js', '.jsx'],
root: [
path.join(__dirname, '/src'),
path.join(__dirname, '/'),
path.join(__dirname, '../CommonComponent'),
path.resolve(__dirname, '../BFD-UI')
],
alias: {
Loading: 'common/components/Loading/index.js',
}
}
}
server.js
const express = require('express')
const debug = require('debug')('app:server')
const webpack = require('webpack')
const webpackConfig = require('../build/webpack.config')
const config = require('../config')
const app = express()
const paths = config.utils_paths
app.use(require('connect-history-api-fallback')())
// ------------------------------------
// Apply Webpack HMR Middleware
// ------------------------------------
if (config.env === 'development') {
const compiler = webpack(webpackConfig)
app.use(require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
contentBase: paths.client(),
hot: true,
quiet: config.compiler_quiet,
noInfo: config.compiler_quiet,
lazy: false,
stats: config.compiler_stats
}))
app.use(require('webpack-hot-middleware')(compiler))
app.use(express.static(paths.client('static')))
} else {
app.use(express.static(paths.dist()))
}
module.exports = app
The following modules couldn't be hot updated: (Full reload needed)
解决方案：参考原文地址 https://github.com/zhongxia245/blog/issues/45
最新文章
- SqlServer2008安装时提示重启计算机失败 解决办法
- 关于JavaScript预编译和执行顺序以及函数引用类型的思考
- 使用 CUDA范例精解通用GPU编程 配套程序的方法
- [UWP]涨姿势UWP源码——极简的RSS阅读器
- IntelliJ IDEA14.1中java项目Maven中没有配置JDK时的问题
- Revit二次开发示例：Journaling
- android开发环境搭建(for 驱动开发人员)
- Android短彩信源码解析-短信发送流程（三）
- whoosh使用笔记
- 6 个轻量级并且灵活的 PHP CMS 系统
- JAVA GUI学习 - JList列表、JScrollPane滚动条组件学习
- MyCAT部署及实现读写分离（转）
- 解决MySQL 在 Java 检索遇到timestamp空值时报异常的问题
- [SPOJ 4155]OTOCI
- Django中的模板渲染是什么
- [Codeforces Round #507][Codeforces 1039C/1040E. Network Safety]
- 【四】php 函数
- MySQL，Oracle，PostgreSQL，mongoDB,Hive, SAP HANA 数据库web维护客户端管理工具
- Java虚拟机（三）垃圾标记算法与Java对象的生命周期
- sql 跨服务器查询数据