二、webpack-dev-server静态服务配置

下载

npm install webpack-dev-server -D
然后在终端运行npx webpack-dev-server在本地内存中生成文件打包地址
可是网址展示的信息并不是想展示的页面，这时候就需要对webpack进行开发服务器的配置
1.在package.json中的scripts里配置快捷启动方式
例如："dev":"webpack-dev-server"
下次想要运行命令直接就npm run dev就行
2.对webpack.config.js开发服务器进行配置

// webpack 是node写出来的  node的写法
let path = require('path');
// console.log(path.resolve('dist'))

module.exports = {
    devServer: {     //开发服务器的配置
        port: 3000,  //端口
        progress: true,  //打包进度条
        contentBase: './dist',    //以这个目录作为静态服务
        open:true,   //打包完成自动打开浏览器
        compress:true   //启用压缩
    },
    mode: 'development',    //模式  默认两种 生产：production 开发：development
    entry: './src/index.js',     //入口
    output: {
        filename: 'bundle.js',   //打包后的文件名称
        path: path.resolve(__dirname, 'dist'),  //路径必须是一个绝对路径，需要引入node的自带模块
    }
}