使用webpack-dev-server搭建本地服务器

webpack提供了一个可选的本地开发服务器 webpack-dev-server，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。

第一步：安装

它是一个单独的模块，在使用之前需要先安装它。

安装：npm install --save-dev [email protected]

我使用的webpack版本是3.6.0，webpack-dev-server的版本是2.9.0

第二步：配置

安装好之后我们需要在webpack.config.js文件中添加 dev-server 进行配置。

选项本身可以设置如下属性：

contentBase：为哪一个文件夹提供本地服务，这里我填写./dist
port：端口号，默认为8080
inline：控制页面是否实时刷新。取值为true或false，当为true时，修改了代码后页面会自动刷新
historyApiFallback：在SPA页面中，依赖HTML5的history模式

// webpack.config.js
//...

module.exports = {
    
    
   // ...其它配置
  devServer: {
    
     
    contentBase:'./dist',
    inline:true,
  }
}

第三步：使用

此时，如果我们直接在终端中输入 webpack-dev-server 命令，发现报错了：告诉我们找不到这个命令。
在这里插入图片描述
原因：不管我们是通过 cmd ，还是编辑器的终端，直接输入命令，就像上边那样，它会去全局中寻找这个命令去执行。但是webpack-dev-server是局部安装（因为我们使用的是 --save-dev，而不是 -g），所以在全局中找不到，就报错了。

解决方法：在 package.json 文件的scripts中，添加一条命令：

//package.json文件

"scripts": {
    
    
    // ...其它命令
    "dev": "webpack-dev-server --open" //--open表示执行完命令后自动打开浏览器
}

然后我们使用 npm run dev 命令就可以了

再解释一下scripts中的命令：

scripts 中定义的都是一些命令，当我们使用 npm run xxx 的时候，就会去package.json文件中的scripts寻找 xxx 命令来执行。接下来会按照一定的顺序寻找命令对应的位置。
首先，会在本地的 node_modules/.bin 路径中寻找对应的命令。如果没有找到，会去全局的环境变量中寻找。

注意事项

在这里插入图片描述
我的代码目录结构中并没有 dist 文件夹，看不到编译后的文件，但是启动webpack-dev-server后可以正常运行，原因在于实时编译后的文件都保存到了内存当中。