学习webpack配置笔记2之devServer

每次改代码都需要重新部署，或者只改变修改代码行的效果，所以出现了devserver本地服务 为了解决不频繁切换mode的模式，我们采用拆分配置，合并配置,在build文件夹下

webpack.dev.config.js //开发环境会用到的配置

webpack.pro.config.js //生产环境会用到的配置

webpack.base.config.js //开发环境和生产环境都会用到的配置

步骤：

1. 安装npm install webpack-dev-server -D
2. 增加命令dev":"webpack-dev-server --config ./build/webpack.dev.config.js"
3. npm run dev即可

用这个启动项目有个特点：

1. 具备实时重新加载的功能
2. 不会输出build文件夹
3. 因为localhost8080—express(src等静态文件)，打包时直接将src等文件编译后放到内存里，然后直接使用express框架发起服务，如果先编译，放到外存里，然后将其上传到内存，然后使用express框架发起服务。那样会降低效率。

借鉴了刘乙江的这篇文章: blog.csdn.net/qq_42425551…

在webpack.base.config.js文件下，现在，对 /api/users 的请求会将请求代理到 http://localhost:3000/api/users。

如果不希望传递/api，则需要重写路径：

    devServer:{
        port:8080,  //服务器启动的端口
        static: {
            directory: path.join(__dirname, 'public'), //服务器静态资源文件夹
        },
        open:true,  //启动服务后，自动打开浏览器
        //如有请求axios.get('/api/jiekou/one')
        //将请求路径为/api代理到http:127.0.0.1:3000/api/jiekou
        proxy:{
            '/api/users':{
                target:'http:127.0.0.1:3000',
                changeOrigin:true,
                pathRewrite:{
                    '^/api':'', //将/api去掉
                }
            }
        }
    }