《前端》使用webpack+vue从零开始打造前端项目(2020最新版)五--开发环境的配置-devServer--bilibili-2021年1月27日

 

官网：https://www.webpackjs.com/guides/development/

https://www.webpackjs.com/configuration/dev-server/

watch mode（不常见）

webpack-dev-server（常用）

webpack-dev-middleware

 

开发环境配置

（一）devServer

为我们提供了一个简单的服务器，并能够实时重新加载。

1、安装

npm install -D webpack-dev-server

2、修改配置文件，告诉开发服务器(dev server)，在哪里查找文件：

    devServer: {

        contentBase: './dist',// 指定服务器根目录

        open:true,// 自动打开浏览器

    },

因为我们需要使用devServer的方式启动服务，所以还需要在package.json中，再写一个npm的脚本：

"start": "webpack-dev-server --open",

之前，我们修改了代码都需npm run build打包一下，界面才生效。现在，我们可以在命令行中运行 npm start，就会看到浏览器自动加载页面。如果现在修改和保存任意源文件，web 服务器就会自动重新加载编译后的代码。

运行报错：

Error: Cannot find module 'webpack-cli/bin/config-yargs'

（1）可能是兼容问题：（没能解决）

解决方法：
卸载局部或者全局 webpack-dev-server

npm uninstall webpack-dev-server -g 卸载全局

npm uninstall webpack-dev-server -D 卸载局部(本地)

安装指定版本的 [email protected]

npm i [email protected] -D 本地安装

注意：

webpack output is served from /:表示webpack输出文件正在根目录托管。

 webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有放到 实际的 物理磁盘上；而是直接托管到了 电脑的内存中，所以，我们在 项目根目录中，根本找不到 这个打包好的 bundle.js；
所以在引用文件的时候，路径是直接从根目录下的，如：

我们可以认为，webpack-dev-server 把打包好的文件，以一种虚拟的形式，托管到了 俺们的项目的 根目录中，虽然我们看不到它，但是，可以认为和 dist src node_modules 平级，有一个看不见的文件，叫做 bundle.js

（2）删除node_modules文件夹，重新执行npm i（没能解决）

报错详情：

[email protected] start C:\Users\Bella\Desktop\firstVueDemo
> webpack-dev-server --open

internal/modules/cjs/loader.js:883
  throw err;
  ^

Error: Cannot find module 'webpack/bin/config-yargs'
Require stack:
- C:\Users\Bella\Desktop\firstVueDemo\node_modules\webpack-dev-server\bin\webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object. (C:\Users\Bella\Desktop\firstVueDemo\node_modules\webpack-dev-server\bin\webpack-dev-server.js:54:1)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Users\\Bella\\Desktop\\firstVueDemo\\node_modules\\webpack-dev-server\\bin\\webpack-dev-server.js'     
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `webpack-dev-server --open`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\Program Files\nodejs\node_cache\_logs\2021-01-27T11_51_04_565Z-debug.log

前面遇到了好几个报错：现在留存一下代码：firstVueDemo-Errors