一般运行本地项目都是在浏览器中输入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//是否压缩
  },
}

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

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