"start": "webpack-dev-server --open --mode development"
使用webpack搭建react开发环境的方法(2)
启动webpack-dev-server后,在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。因此使用webpack-dev-server进行开发的时候都看不到编译后的文件
2.热更新
配置一个webpack自带的插件并且还要在主要js文件里检查是否有module.hot
plugins:[ //热更新,不是刷新 new webpack.HotModuleReplacementPlugin() ],
在主要js文件里添加以下代码
if (module.hot){ //实现热更新 module.hot.accept(); }
在webpack.config.js中开启热更新
devServer:{ contentBase: "./dist",//本地服务器所加载的页面所在的目录 historyApiFallback: true,//不跳转 inline: true,//实时刷新 port:3000, open:true,//自动打开浏览器 hot:true //开启热更新 },
热更新允许在运行时更新各种模块,而无需进行完全刷新.
配置Html模板
1.安装html-webpack-plugin插件
npm i html-webpack-plugin -D
2.在webpack.config.js里引用插件
const path=require('path'); let webpack=require('webpack'); let HtmlWebpackPlugin=require('html-webpack-plugin'); module.exports={ entry:'./src/index.js', output:{ //添加hash可以防止文件缓存,每次都会生成4位hash串 filename:'bundle.[hash:4].js', path:path.resolve('dist') }, //以下是新增的配置 devServer:{ contentBase: "./dist",//本地服务器所加载的页面所在的目录 historyApiFallback: true,//不跳转 inline: true,//实时刷新 port:3000, open:true,//自动打开浏览器 hot:true //开启热更新 }, plugins:[ new HtmlWebpackPlugin({ template:'./src/index.html', hash:true, //会在打包好的bundle.js后面加上hash串 }) ] };
运行 npm run build
进行打包,这时候每次npm run build的时候都会在dist目录下创建很多打好的包.应该每次打包之前都将dist目录下的文件清空,再把打包好的文件放进去,这里使用clean-webpack-plugin插件.通过 npm i clean-webpack-plugin -D
命令安装.然后在webpack.config.js中引用插件.
const path=require('path'); let webpack=require('webpack'); let HtmlWebpackPlugin=require('html-webpack-plugin'); let CleanWebpackPlugin=require('clean-webpack-plugin'); module.exports={ entry:'./src/index.js', output:{ //添加hash可以防止文件缓存,每次都会生成4位hash串 filename:'bundle.[hash:4].js', path:path.resolve('dist') }, //以下是新增的配置 devServer:{ contentBase: "./dist",//本地服务器所加载的页面所在的目录 historyApiFallback: true,//不跳转 inline: true,//实时刷新 port:3000, open:true,//自动打开浏览器 hot:true //开启热更新 }, plugins:[ new HtmlWebpackPlugin({ template:'./src/index.html', hash:true, //会在打包好的bundle.js后面加上hash串 }), //打包前先清空 new CleanWebpackPlugin('dist') ] };
内容版权声明:除非注明,否则皆为本站原创文章。