强大的webpack-dev-server

万能本地运行环境

• webpack-dev-server是一个用来快速搭建本地运行环境的工具。命令简单webpack-dev-server或配置命令脚本快捷运行。

使用情况：解决本地运行跨域

• 很多框架使用时其实是用了ajax的请求的，在本地运行时会发生跨域请求（啊擦嘞，我只是在html里引入一个js文件还能跨域？没错，就是这么神奇！！！）

• 模拟服务器运行情况，进行上线前调试等。

环境搭建开干

• 首先，你需要准备好node.js的环境，这些都是基于node.js环境下搭建的。
• 局部初始化npm仓库，创建一个简单项目；
  

npm init #生成包管理文件

• 全局安装工具webpack-dev-server:npm i -g webpack-dev-server

webpack-dev-server运行：

我的一个例子，解决react组件文件等的跨域问题：

一个react小例子，我打算引用component.jsx文件的组件导入，将index.js里的数据和函数导入(es6的语法)html：

直接双击打开html文件时报错，引发两个跨域问题和组件无效：

究其原因是babel在里面用ajax进行了数据传递，虽然是本地，但依然引发跨域问题。

• 接下来我开启webpack-dev-server:

成功使用了组件，并且也解决了跨域问题：

进一步简单配置一下：

• 我们先建立一个webpack的配置文件webpack.config.js：
• 控制端口和快速开启：

module.exports ={
    devServer:{
        port:7788,//控制端口
        open:true //是否自动打开默认浏览器
    }
}

• 自定义启动命令：

使用npm run fastOpen就可以直接运行webpack-dev-server了

• 如果出现了下面的问题：

这是因为没有配置主要文件路径的问题，这样打开可以直接看到所有文件，我是为了方便想打开哪个文件就点哪个文件：

以上配置仅适用于临时开发项目时方便测试，如果需要更详尽的配置，请参考以下的博客：

• 桃子叔叔为您解析webpack-dev-server主要的配置属性

• 【webpack】webpack-dev-server生猛上手——让我们来搭一个webpack的微服务器吧！