webpack-dev-server依赖webpack,我们需要先安装webpack
npm install webpack --save-dev npm install webpack-cli --save-dev
npm install webpack-dev-server ---save-dev
因为webpack-dev-server完全依赖于webpack,所以我们需要编写webpack的配置文件
例如:
// path 模块解决项目路径问题 const path = require('path') module.exports = { //打包模式,一定要配置,不然打包速度慢很多 mode: 'development', //开发模式 // mode:'production',//生产模式 //入口 entry: path.join(__dirname, './src/main.js'), // __dirname 是node的通用变量,代表当前项目路径 output: { // 配置打包后文件存放目录 path: path.join(__dirname, './dist'), // 配置打包后文件的名称 filename: 'bundle.js' }, // 监听文件改动,自动打包 // watch: true, devServer: { contentBase: path.join(__dirname, './'), // 指定发布后的映射的路径,./代表映射当前路劲 compress: true, // 压缩资源 port: 9000, // 指定服务器的端口号 open: 'Chrome', // 指定以哪个浏览器打开,open:true 代表以默认浏览器打开 }, }
其余相关属性,我们可以看看官方文档,有详细的解释:
点击进入官方配置devServer
webpack版本4以上的命令配置如下
在终端里面运行
npm run dev-server
其实是有的,webpack-dev-server将我们的文件编译后,发布存放在内存内,不在物理磁盘上,例如:我们开启后,访问bundle.js是可以访问到的
我们的资源文件webpack已经帮助我们编译放到内存里面了,但是我们index.html依然在物理磁盘上,我需要将index.html同样放置到内存中,这是我们就需要依赖html-webpack-plugin
插件
通过npm安装
npm install html-webpack-plugin -D
通过require方法导入模块,并且在plugins中放置一个模块对象
运行webpack-dev-server