一般运行本地项目都是在浏览器中输入http://localhost:3000/

如何配置这样一个本地服务器，实现用npm run dev启动服务器呢？

下面介绍一下如何通过配置webpack实现本地服务器启动。

1、安装

npm install webpack-dev-server -D

webpack-dev-server 可以实现启动服务器。

运行

npx webpack-dev-server

不会生成打包文件，会生成内存打包。

2、webpack配置

module.exports = {
  devServer: {//开发服务器配置
    port: 3000,//端口号
    progress: true,//进度条
    contentBase: "./dist",//返回的资源目录
    compress: true//是否压缩
  },
}

如果以上配置运行时报错，可参考如下配置：

module.exports = {
    devServer: {//开发服务器配置
        port: 3000,//端口号
        static: './dist',
        compress: true,//是否压缩
    },
}

3、package.json配置

"scripts": {
    "dev":"webpack-dev-server"
  },

4、运行：

npm run dev

如遇报错：

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

可参考解决方案：https://maomao.ink/index.php/IT/1014.html

如遇报错：

Cannot find module 'webpack'

可参考解决方案：https://maomao.ink/index.php/IT/1015.html

5、查看

如果运行成功，会给出服务器地址：http://localhost:3000/

C02Z84E5LVCF:mm_webpack maomao$ npx webpack-dev-server
/Users/maomao/Documents/demo/h5/mm_webpack/src
10% building 0/1 entries 0/0 dependencies 0/0 modulesℹ ｢wds｣: Project is running at http://localhost:3000/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from ./dist
ℹ ｢wdm｣: asset bundle.js 4.44 KiB [emitted] (name: main)
runtime modules 997 bytes 4 modules
cacheable modules 76 bytes
  ./src/aaa.js 48 bytes [built] [code generated]
  ./src/bbb.js 28 bytes [built] [code generated]
webpack 5.38.0 compiled successfully in 112 ms
ℹ ｢wdm｣: Compiled successfully.

在浏览器中输入http://localhost:3000/

可以看到你配置的文件夹以及文件夹下的目录。

我的只有一个文件：

~ /
bundle.js

至此，一个本地服务器就搭建完成了。