webpac -devserver自动化配置

devserver : 用来自动化(自动编译，自动打开浏览器，自动刷新浏览器...

特点：只会在内存中编译打包，不会任何输出
启动 devserver 指令为 : npx webpack-dev-server

常用的配置有

      //构建后的路径
        contentBase:resolve(__dirname,'build')
      //监视 contentBase目录下所有文件，一旦文件变化就 reload
        watchContentBase: true,
        watchOptions: {
            ignored:'/node_modules/' ,//忽略文件
          },
        //启动 gizp 压缩
        compress:true,
        //端口号
        port:3000,
        //自动打开浏览器
        open:true,
        //启动 webpack 的模块热更新替换特性
        hot:true,
        //不要显示启动服务器日志信息
        clientLogLevel:'none',
        //除了一些基本的信息以为，其他内容多不要显示
        quiet: true,
        //如果出现错误,不要全屏提示
        overlay: false,
        //服务器代理，--》 解决开发环境跨域问题
        proxy: {
            //一旦devserver (500) 服务器接收到请求 /api/xxx请求，就会把请求转发其他服务器
            "/api": {
              target: "http://localhost:3000",
              //发送请求时候，请求路径重写:将/api/xxx--> /xxx (去掉/api)
              pathRewrite: {"^/api" : ""}
            }
          }

所有webpack.config.js文件

const {resolve} = require('path');
const HtmlWenpackPlugin=require('html-webpack-plugin');

module.exports={
    entry:'./src/js/index.js',
    output:{
        filename:'js/[name].js',
        path:resolve(__dirname,'build')
    },  
    module:{
        rules:[
            { 
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    },
    plugins:[
        new HtmlWenpackPlugin({
            template:'./src/index.html'
        })
    ],
    //devserver : 用来自动化(自动编译，自动打开浏览器，自动刷新浏览器...)
    //特点：只会在内存中编译打包，不会任何输出
    //启动 devserver 指令为 : npx webpack-dev-server
    devServer:{
        //项构建后的路径
        contentBase:resolve(__dirname,'build'),
        //监视 contentBase目录下所有文件，一旦文件变化就 reload
        watchContentBase: true,
        watchOptions: {
            ignored:'/node_modules/' ,//忽略文件
          },
        //启动 gizp 压缩
        compress:true,
        //端口号
        port:3000,
        //自动打开浏览器
        open:true,
        //启动 webpack 的模块热更新替换特性
        hot:true,
        //不要显示启动服务器日志信息
        clientLogLevel:'none',
        //除了一些基本的信息以为，其他内容多不要显示
        quiet: true,
        //如果出现错误,不要全屏提示
        overlay: false,
        //服务器代理，--》 解决开发环境跨域问题
        proxy: {
            //一旦devserver (500) 服务器接收到请求 /api/xxx请求，就会把请求转发其他服务器
            "/api": {
              target: "http://localhost:3000",
              //发送请求时候，请求路径重写:将/api/xxx--> /xxx (去掉/api)
              pathRewrite: {"^/api" : ""}
            }
          }


    },
    mode:'development'
}