3.webpack-dev-server配置

2024年4月4日 231次阅读 来源: geology

修复前面版本的一些问题

在前面2-5分支中，运行后控制台总会出现一些错误。原因就是client目录下app.js和App.jsx的文件名相似引起的。因此我们将app.js重新命名为main.js，然后修改客户端webpack的入口文件为main.js即可。

webpack-dev-server的作用

前面都是buil命令，直接在硬盘上生成打包好的文件。而我们在开发过程中，往往会在本地启动一个服务器，webpack-dev-server就是帮助我们启动一个本地的服务器。本届主要时配置webpack的devServer属性，感兴趣的可以先去看看官方文档。

本节内容需要安装两个开发环境的依赖。

  1. webpack-dev-server 启动本地服务器
  2. cross-env 判断不同系统下的开发或生产环境

由于开发时的配置，所以主要是修改client端的配置文件。而且需要判断是否为开发环境。

const isDev = process.env.NODE_ENV === 'development'   //判断是否为开发环境

// 以前是直接 module.exports = config {}
// 现在需要在开发时增加一些配置
config = {....}   // 还是以前的配置，省略
// 如果时开发环境，增加如下配置
if (isDev) {
  config.devServer = {
    host: '0.0.0.0', // 可以通过localhost或127.0.0.1方式访问
    port: '8888', // 端口号
    contentBase: path.join(__dirname, '../dist'), // 访问的文件目录
    // hot: true, // 热更替，后面配置react后会开启
    overlay: {
      errors: true  // 在浏览器窗口出口错误的提示层
    },
    publicPath: '/public', // 与前面的功能一致
    historyApiFallback: {
      index: '/public/index.html' // 404页面默认回到首页
    }
  }
}

module.exports = config

前面我们在webpack中配置了mode:’development’,就已经设置为开发模式了。关于mode这个属性，可以去看看官方文档。

接下来，我们在package.json中配置scripts。

// cross-env判断不同系统环境下的NODE_ENV的值
    "dev:client": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js"

注意，运行dev:client命令时，记得先删除本地编译的dist目录。

本节代码位于仓库的2-6分支

    原文作者：geology
    原文地址: https://segmentfault.com/a/1190000018744991
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞