webpack系列学习（二）webpack-dev-server

这章，跟大家一起学习webpack-dev-server的配置
一、安装webpack-dev-server
cnpm i webpack-dev-server -D
webpack.config.js配置如下

    // 开发服务器 devServer: 用来自动化(自动编译，自动打开浏览器，自动刷新浏览器)
    // 特点：只会在内存中编译打包，不会有任何输出
    devServer: {
        // 运行代码的目录
        contentBase: resolve(__dirname, 'build'),
        // 监视contentBase下的所有文件，一旦文件变化就会reload
        watchContentBase: true,
        watchOptions: {
            ignore: /node_modules/ // 忽略监视此文件
        },
        // 启动gzip压缩
        compress: true,
        port: '8099',
        inline: true, // 文件修改后实时刷新
        historyApiFallback: true, // 不跳转
        open: true, // 自动打开浏览器
        clientLogLevel: 'none', // 不要显示启动服务器日志信息
        quiet: true, // 除了显示启动信息外，其他内容不显示
        overlay: false, // 如果出现错误，不要全屏提示
        proxy: { // 服务器代理--解决开发环境跨域问题
            '/api': {
                // 一旦devServer(5000)服务器收到api/xxx的请求，就会把请求转发到另一个服务器(3000)
                target: 'http:localhost:3000',
                // 发送请求时，请求路径重写，将/api/xxx --> /xxx(去掉api)
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }

终端命令行输入
npx webpack-dev-server -D 启动服务 // 内存中编译打包，没有输出
如图1.1所示

下一章为大家讲解webpack关于生产环境相关的配置