一般运行本地项目都是在浏览器中输入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
至此,一个本地服务器就搭建完成了。
暂无评论