webpack彻底搞懂系列之 - 开发环境配置(dev-server)

191 阅读2分钟

webpack-dev-server
会在内存中打包,不会输出到目录

 devServer: {
 
    //`devServer.publicPath` 和 [`output.publicPath`] 是一样的
    publicPath:'/',// 总是以斜杠(/)开头和结尾。
   
    port: 9987,// 服务器监听端口号
    progress: true,
    
    //额外的静态文件目录
    contentBase: path.resolve("public"), 
    // contentBase: [path.join(__dirname, 'public'), path.join(__dirname, 'assets')]
    
    //布尔型的值,默认为false,当他为true的时候,它会对所有服务器资源采用gzip进行压缩。
    compress: true,
     
    //DevServer启动且第一次构建完成时,自动使用我们的系统默认浏览器去打开网页
    open: true,
    
    headers: { // 可以在HTTP响应中注入一些HTTP响应头
        'x-code':123
    },
    
    //对返回404页面时定向跳转到特定页面的。一般是应用在 HTML5中History API 的单页应用,
    historyApiFallback: true,
    historyApiFallback: { // 使用正则来匹配路由
        rewrites: [
            { from: /^\/user/, to: '/user.html' },
            { from: /^\/home/, to: '/home.html' }
        ]
    },
   
   //不刷新整个页面的情况下通过使用新模块替换旧模块来做到实时预览的
    hot: true,
    
    /** 
     * webpack-dev-server 有两种模式可以实现自动刷新和模块热替换机制。
     * inline: false 就是使用iframe模式来重载页面
     * iframe 模式的特点有:
     * 1. 在网页中嵌入了一个iframe,将我们自己的应用代码注入到 这个 iframe中去了。
     * 2. 在页面头部会有一个 App ready. 这个提示,用于显示构建过程的状态信息。
     * 3. 加载了 live.bundle.js文件,还同时包含了 socket.io的client代码,进行了 websocket通讯,从而完成了自动编译打包,页面自动刷新功能。
     * 
     * inline模式的特点有:
     * 1. 构建的消息在控制台中直接显示出来。
     * 2. socket.io的client代码被打包进bundle.js当中,这样就能和websocket通讯,从而完成自动编译工作,页面就能实现自动刷新功能。
     * 3. 以后的每一个入口文件都会插入上面的socket的一段代码,这样会使的打包后的bundle.js文件变得臃肿。
    */
    inline: true,
    
    //来在编译出错的时候,在浏览器页面上显示错误。该属性值默认为false,需要的话,设置该参数为true
    overlay: true,
    
    //'minimal', 'normal', 'verbose 编译的时候再命令行中输出的内容
    stats: 'errors-only',

    proxy: { // 实现跨域
        '/api': {
            target: 'http://api.xldou.cn',
            changeOrigin: true,
            // pathRewrite: {'^/api' : ''}
        },
        '/file': {
            target: 'http://file.xldou.cn',  // 目标接口域名
            changeOrigin: true
          },
    }
},