no such file or directory, open package.json webpack打包js测试

最新推荐文章于 2026-06-21 16:10:08 发布

原创最新推荐文章于 2026-06-21 16:10:08 发布 · 1.1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Web前端

本文介绍了在遇到`no such file or directory, open package.json`错误时，如何通过安装webpack-dev-server进行解决。详细步骤包括安装webpack和相关插件，配置package.json的script，以及设置webpack.config.js。使用webpack-dev-server可以实现热加载和浏览器自动刷新功能。" 8051291,799672,验证wav音频文件格式,"['文件处理', '音频处理', 'Java', '异常处理']

2、推荐使用webpack-dev-server开发服务器 ,它的功能可以实现热加载并诅
自动刷新浏览器。
1 )安装webpack-dev-server
cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev
(自己用的npm安装taobao 下载点
npm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev)
安装完成自动创建package.json (记录了本程序所依赖的包信息)
(npm高版本是生成package-lock.json,需要在目录下输入 npm init -y 命令生成package.json)
安装完成自动创建node_ modules (存放了本程序所依赖的包)
2 )在package.json中配置script (运行命令)
"scripts": {
"dev": "webpack-dev-server --inline --hot --open --port 5008"
},
3 )配置webpack.config.js

//引用html-webpack-plugin插件，作用是根据html模板在内存生成html文件，它的工作原理是根据模板文件在内存中生成一个index.html文件。
var htmlwp = require('html-webpack-plugin');
module.exports={
entry:'./src/main.js', //指定打包的入口文件
output:{
path : __dirname+'/dist', // 注意：__dirname表示webpack.config.js所在目录的绝对路径
filename:'build.js' //输出文件
},
devtool: 'eval-source-map',
plugins:[
new htmlwp({
title: '首页', //生成的页面标题<head><title>首页</title></head>
filename: 'index.html', //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
template: 'vue_02.html' //根据vue_02.html这个模板来生成(这个文件请程序员自己生成)
})
]
}
webpack的配置文件,配置了入口文件、输入文件的路径、依赖的插件。
4 )使用webpack的命令去运行程序(idea中有两次可以直接点击运行)
npm run dev

标签

#npm