代码更新后 有老哥遇到过这个问题吗
需要手动刷新 才能更新页面的数据。。
const config = require(’./webpack.config’) const webpack = require(‘webpack’) const WebpackDevServer = require(‘webpack-dev-server’) const path = require(‘path’)
config.entry.app.unshift( “webpack-dev-server/client?http://localhost:8080/”, ‘webpack/hot/dev-server’, ‘react-hot-loader/patch’); let compiler = webpack(config); const devServerOptions = Object.assign({}, config.devServer, { publicPath: config.output.publicPath, inline: true, stats: { colors: true }, hot: true, hotOnly: true } ); let server = new WebpackDevServer(compiler, devServerOptions); server.listen(8080, ‘localhost’, () => { console.log(‘服务启动于 http://localhost:8080’); });
这个是node server的配置
这个是 webpack.config.js的配置
const path = require(‘path’); const htmlWebpachPlugin = require(‘html-webpack-plugin’); const ExtractTextPlugin = require(‘extract-text-webpack-plugin’); const webpack = require(‘webpack’) const publicPath = ‘/’; const buildPath = ‘dist’; module.exports = { mode: ‘development’, entry: { app: [’./src/main.js’]//入口 }, output: { path: path.resolve(__dirname, buildPath), publicPath: ‘/’, filename: ‘build.js’ //出口 },
module: { rules: [ //配置加载器 { test: /\.js$/, //匹配要处理的文件,正则匹配以.js结尾 loader: 'babel-loader'//使用加载器的名称 }, { test: /\.css/, use: ['style-loader', 'css-loader'] }, { test: [/\.gif$/, /\.jpe?g$/, /\.png$/], loader: 'url-loader', options: { limit: 10000, //1w字节以下大小的图片会自动转成base64 } } ] }, plugins: [ new htmlWebpachPlugin({ template: './public/index.html', filename: 'index.html' }),// 生成index.html 并自己引用 build.js new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin(), new webpack.NamedModulesPlugin() ],
}
在入口文件里引入一下html文件试试 require(’./index.html’)
这种问题应该是没在入口文件写这句?
hot(module)(App)
devserver, HMR
@lizhenwu 前几天重新搞了搞…是少了这里…
CNode 社区为国内最专业的 Node.js 开源技术社区,致力于 Node.js 的技术研究。
需要手动刷新 才能更新页面的数据。。
const config = require(’./webpack.config’) const webpack = require(‘webpack’) const WebpackDevServer = require(‘webpack-dev-server’) const path = require(‘path’)
config.entry.app.unshift( “webpack-dev-server/client?http://localhost:8080/”, ‘webpack/hot/dev-server’, ‘react-hot-loader/patch’); let compiler = webpack(config); const devServerOptions = Object.assign({}, config.devServer, { publicPath: config.output.publicPath, inline: true, stats: { colors: true }, hot: true, hotOnly: true } ); let server = new WebpackDevServer(compiler, devServerOptions); server.listen(8080, ‘localhost’, () => { console.log(‘服务启动于 http://localhost:8080’); });
这个是node server的配置
这个是 webpack.config.js的配置
const path = require(‘path’); const htmlWebpachPlugin = require(‘html-webpack-plugin’); const ExtractTextPlugin = require(‘extract-text-webpack-plugin’); const webpack = require(‘webpack’) const publicPath = ‘/’; const buildPath = ‘dist’; module.exports = { mode: ‘development’, entry: { app: [’./src/main.js’]//入口 }, output: { path: path.resolve(__dirname, buildPath), publicPath: ‘/’, filename: ‘build.js’ //出口 },
}
在入口文件里引入一下html文件试试 require(’./index.html’)
这种问题应该是没在入口文件写这句?
devserver, HMR
@lizhenwu 前几天重新搞了搞…是少了这里…