使用webpack构建本地服务器并添加React本地调试功能
2018-01-10 15:57
976 查看
参考文档(一个很全面的webpack入门):https://www.jianshu.com/p/42e11515c10f
前言:想不想让你的浏览器监听你的代码的修改,并自动刷新显示修改后的结果,其实
npm安装 webpack-dev-server
把这些命令加到webpack的配置文件中,现在的配置文件
在
在终端中输入
前言:想不想让你的浏览器监听你的代码的修改,并自动刷新显示修改后的结果,其实
Webpack提供一个可选的本地开发服务器,这个本地服务器基于node.js构建,可以实现你想要的这些功能,不过它是一个单独的组件,在webpack中进行配置之前需要单独安装它作为项目依赖
npm安装 webpack-dev-server
npm install --save-dev webpack-dev-server
把这些命令加到webpack的配置文件中,现在的配置文件
webpack.config.js如下所示
module.exports = { devtool: 'eval-source-map', entry: __dirname + "/app/main.js", output: { path: __dirname + "/public", filename: "bundle.js" }, 4000 devServer: { contentBase: "./public",//本地服务器所加载的页面所在的目录 historyApiFallback: true,//不跳转 inline: true//实时刷新 } }
在
package.json中的
scripts对象中添加如下命令,用以开启本地服务器:
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack", "server": "webpack-dev-server --open" },
在终端中输入
npm run server即可在本地的
8080端口查看结果(他会自动打开网页第一次)
相关文章推荐
- 使用webpack构建本地服务器,实现自动刷新,并直接在手机上访问
- 使用webpack构建本地服务器
- 使用Webpack构建React应用
- webpack构建React应用五:使用webpack Loaders 模块加载器(三)
- webpack 构建同时适用于手机和电脑的调试服务器
- 在node下使用webpack构建react开发环境
- webpack构建React应用二:webpack的安装及基础使用
- 使用React-route和Webpack快速构建一个react程序
- 使用webpack配置react并添加到flask应用
- 5分钟内使用React、Webpack与ES6构建应用
- 使用React-route和Webpack快速构建一个react程序
- 使用dvajs+webpack构建react开发环境
- WEB前端使用 webpack + reack 搭建框架 02 本地服务 与 热替换(react-hot-loader)
- 使用Electron构建React+Webpack桌面应用的方法
- 基于ES6,使用React、Webpack、Babel构建模块化JavaScript应用
- 前端自动化构建入门6-使用webpack改造我们的react应用
- 从零开始-使用React+Webpack+Nodejs+Express快速构建项目
- webpack构建React应用四:使用webpack Loaders 模块加载器(二)
- webpack---使用插件,常见webpack的plugin,构建vue,react单页面/多页面工程APP必备插件
- 前端构建之webpack+react使用