为什么需要继承webpack-dev-server?
实际上,当我们在开发项目的时候,我们需要添加一些其他的组件,需要对接rest api等等。
当我们添加路由组件或者使用axios 请求服务器api数据时,当我们双击项目入口文件index.html预览website时,会得到报跨域请求错误。
萎了解决这个问题,我们需要把项目编译产生的文件放到一台机器上跑。我们可以将这些文件放到IIS、Node Server、Tomcat等服务器上跑。但对于开发项目非常不方便。
以为我们需要一边开发一边实时去预览。
webpack-dev-server组件能够帮助我们解决这个问题。
webpack-dev-server能够提供给我们虚拟的服务器,当我们在开发的时候。当我们在完成代码编写并保存时,webpack-dev-server能够实时的更新我们的代码到浏览时进行预览,这就是热更新功能,并且能够在开发时进行跨域请求数据,非常这便于我们的开发。
下面让我们继续来继承webpack-dev-server。
继Part 1 - Create React App。
Step 1
1、npm install webpack-dev-server
2、当完成安装后,编辑package.json,添加一个run command,代码如下:
"scripts": {
...
"dev":"webpack-dev-server --progress --config ./config/webpack.config.js"
},
Step 2
打开webpack.config.js,用一下代码代替:
const path = require('path')
const publicPath='../build/'
const rootpath=path.resolve(__dirname,publicPath)
const HtmlWebpackPlugin= require('html-webpack-plugin')
module.exports={
entry:{
reactapp:'./index.js'
},
// output:{
// filename:'[name].js',
// path:rootpath,
// publicPath:publicPath
// },
devServer:{//webpackServer
hot:true,//开启热更新
host:'localhost',//主机名
port:8056,//端口号
open:true//编译完打开浏览器
},
mode:'development',
module:{
rules:[
{
test:/\.(js)$/,
exclude:/node_modules/,
use:{
loader:'babel-loader'
}
},
{
test:/\.css$/,
exclude:/node_modules/,
use:['style-loader','css-loader']
}
]
},
resolve:{
modules:['node_modules'],
extensions:['.js','.json']
},
plugins:[
new HtmlWebpackPlugin({
filename:'index.html',
template:'./public/index.html',
inject:true
})
]
}
从上面的代码我们看到注释了output,添加了一个devServer object。
Step 3
至此,全部的工作已准备好,我们在cmd中运行 npm run dev,待编译完成后,会自动打开浏览器,如下图:
现在,当我们修改代码的时候,我们就可以实时在浏览器看到修改代码的效果。