webpack 热替换配置详解
热替换详解Main role
项目地址 欢迎mark 1 webpack-dev-server webpack官方提供的一个简易服务器,可以让我们快速的启动服务,配置devServer hot 为true即可,这个属于全局刷新 2 webpack-hot-server webpack-dev-middleware 当我们想要在自己服务器上使用全局刷新功能时使用 3 react-hot-loader 当我们想要局部刷新,并且不改变当前程序的状态(state).例如你当前控件有一个默认状态,和一个操作之后的状态,你不想你修改源码后,导致全局刷新,使得刚刚操作后状态消失(导致需要重复之前的操作),这时候你需要使用到改插件。 服务器配置1.使用webpack搭建一个简单的热替换服务器demo地址仅需要设置devServer hot为true,并添加插件HotModuleReplacementPlugin。便可以实现一个最简单热替换服务器,然后通过webpack-dev-server来启动 + devServer: { + hot: true,+ },+ new webpack.HotModuleReplacementPlugin(), __启动__: webpack-dev-server --config 配置文件名 2.使用node.js搭建一个简易服务器demo地址这里需要使用到两个中间件 webpack-hot-middleware & wepback-dev-middleware,然后在webpack中entry上配置,并添加插件HotModuleReplacementPlugin。通过server.js中使用两个中间件,最后通过node server.js启动 webpack config文件 entry: [ // http://webpack.github.io/docs/hot-module-replacement-with-webpack.html + 'webpack-hot-middleware/client?reload=true','./src/A/index.js' ], server.js文件 const path = require('path'); const webpack = require('webpack'); // 服务器框架 const express = require('express'); const config = require('./index'); const compiler = webpack(config); const app = express(); // 热更新 app.use(require('webpack-dev-middleware')(compiler,{ noInfo: true,hot: true,inline: true,// publicPath: 'dist' })); app.use(require('webpack-hot-middleware')(compiler)); // 启动服务 app.listen("4000",'0.0.0.0',(err) => { if (err) { console.error(err); return; } console.log(' start server at port ' +'4000'); }); 3.使用react-hot-loader搭建热替换服务器demo地址这里需要下载react-hot-loader,然后配置devserver hot 为true,然后需要在entry中配置 'react-hot-loader/patch',.babelrc文件中配置 react-hot-loader/babel & moudles: false,并且需要在入口文件源码中加上热替换逻辑,最后通过webpack-dev-server跑起来 1.注意点HtmlWebpackPlugin不能和该插件一起使用,如果想使用该插件,请使用自建服务器,参考 2.如何配置webpack config 配置
webpack config源码const webpackConfig = { // 入口配置 entry: [ + 'react-hot-loader/patch',+ 'webpack-dev-server/client?http://0.0.0.0:4000',// WebpackDevServer host and port + 'webpack/hot/only-dev-server',// "only" prevents reload on syntax errors './src/React_hot_loader/index.js' ],// Webpack config options on how to obtain modules resolve: { // 当你reuire时,不需要加上以下扩展名 extensions: ['.js','.md','.txt'],},devtool: 'eval',// 输出配置 output: { path: buildPath,// 输出文件路径 filename: 'app.js',// 输出文件名字 chunkFilename: '[chunkhash].js',// chunk文件名字 },+ devServer: { + host: 'localhost',+ port: 4000,+ + historyApiFallback: true,+ // respond to 404s with index.html + hot: true,+ // enable HMR on the server + },plugins: [ + new webpack.HotModuleReplacementPlugin(),// 防止加载所有地区时刻 // new webpack.IgnorePlugin(/^./locale$/,/moment$/),// Webpack 2以后内置 // new webpack.optimize.OccurrenceOrderPlugin(),// 碰到错误warning但是不停止编译 new webpack.NoEmitOnErrorsPlugin(),// 生成html文件 - // new HtmlWebpackPlugin({ - // // 输出文件名字及路径 - // filename: 'index.html',- // template: 'index.html' - // }),new webpack.NamedModulesPlugin(),],module: { rules: [ { test: /.js$/,use: [ 'babel-loader',exclude: /node_modules/,// webpack2 以后内置配置 // { // test: /.json$/,// use: 'json-loader',// },{ test: /.less/,use: [ 'style-loader','css-loader','postcss-loader','less-loader' ] },{ test: /.txt$/,use: 'raw-loader',{ test: /.md$/,{ test: /.css$/,use: 'style-loader!css-loader!postcss-loader',{ test: /.(eot|woff|woff2|ttf|svg|png|jpg)$/,loader: 'url-loader?limit=8192&name=[name]-[hash].[ext]' } ],}; module.exports = webpackConfig; src源码if (module.hot) module.hot.accept('./App',() => render(App)); .babelrc{ "env":{ "production": { "presets": [ "es2015","react","stage-0" ],"plugins": ["transform-decorators-legacy","add-module-exports","transform-object-assign"] },"development": { "presets": [ // http://babeljs.io/docs/plugins/preset-es2015/#modules // 默认将es6选以commonJs类型进行转化 + ["es2015",+ { "modules": false } + ],- // "es2015",+ "plugins": ["react-hot-loader/babel"] } } } 4.使用react-hot-loader + node.js搭建热替换服务器demo地址这里需要下载react-hot-loader,然后需要在entry中配置 'react-hot-loader/patch' & 'webpack-hot-middleware/client',并且需要在入口文件源码中加上热替换逻辑,还要再server.js中进行中间件的配置,最后通过node server.js启动 1. 如何配置webpack config 配置
src入口文件配置.babelrc文件配置server.js 文件配置
2. 源码实现webpack config源码const webpackConfig = { // 入口配置 entry: [ + 'react-hot-loader/patch',+ 'webpack-hot-middleware/client',//用于启动hmr './src/React_hot_loader/index.js' ],plugins: [ new webpack.HotModuleReplacementPlugin(),// 生成html文件 // new HtmlWebpackPlugin({ // // 输出文件名字及路径 // filename: 'index.html',// template: 'index.html' // }),// new webpack.NamedModulesPlugin(),}; server.js源码// 热更新 +app.use(require('webpack-dev-middleware')(compiler,{ + noInfo: true,+ hot: true,+ historyApiFallback: true +})); +app.use(require("webpack-hot-middleware")(compiler)); + +app.get('*',(request,response) => { + response.sendFile(path.resolve(defaultConfig.root,'index.html')); +}); // 启动服务 app.listen("4000",(err) => { if (err) { console.error(err); return; } console.log(' start server at port ' +'4000'); }); src源码if (module.hot) module.hot.accept('./App',+ "plugins": ["react-hot-loader/babel"] } } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |