webpack自动打包和热更新的实现方法
webpack常用配置
webpackdevserver
- 功能:自动打包文件
- 配置devserver:在webpack.config.client.js中配置
constpath=require('path'); constHTMlPlugin=require('html-webpack-plugin'); //判断是否是开发环境 constisDev=process.env.NODE_ENV==='development' constconfig={ entry:{ app:path.join(__dirname,'../client/app.js') }, output:{ filename:'[name].[hash].js', path:path.join(__dirname,'../dist'), publicPath:'/public' }, module:{ rules:[ { test:/.jsx$/, loader:'babel-loader' }, { test:/.js$/, loader:'babel-loader', exclude:[ path.join(__dirname,'../node_modules') ] } ] }, plugins:[ newHTMlPlugin({ template:path.join(__dirname,'../client/template.html') }) ] } //新增 if(isDev){ //开发环境 config.devServer={ host:'0.0.0.0',//可以使用ip访问 port:'8888', contentBase:path.join(__dirname,'../dist'),//打包后的文件 overlay:{ errors:true//直接在网页上显示错误 }, publicPath:'/public', historyApiFallback:{ index:'/public/index.html' } } } module.exports=config;
在package.json中增加一条命令来进行自动打包
cross-env是为了兼容macwindowsliunx的环境变量,需要安装。
npminstallcross-env-D
"dev:client":"cross-envNODE_ENV=developmentwebpack-dev-server--configbuild/webpack.config.client.js"
hotmodulereplacemennt
功能:自动刷新页面
配置hotmodule:
安装react-hot-loader
npminstallreact-hot-loader-D
在webpack.config.client.js中配置
constwebpack=require('webpack') if(isDev){ config.entry={ app:[ "react-hot-loader/patch", path.join(__dirname,'../client/app.js') ] } ...省略 config.plugins.push(newwebpack.HotModuleReplacementPlugin()) }
在client/app.js中配置
...省略 import{AppContainer}from'react-hot-loader'; constroot=document.getElementById('root') constrender=Component=>{ aaa.hydrate(, root ) } render(App) if(module.hot){ module.hot.accept('./App.jsx',()=>{ constNextApp=require('./App.jsx').default render(NextApp) }) }
通过以上配置就能达到局部热更新了,修改代码,页面会实时修改,不会刷新页面了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。